现代Web的资源/类型/元素--发展趋势

5月6日,谷歌开发者中心推出了一个
Web 开发最佳实践手册
。伯乐在线资源频道摘编该资源后,已邀请一些关注 Web 开发的朋友参与翻译手册。

由于译者朋友几乎都是已在职,都是在工作之余参与,每位的翻译进度会不一样(请理解),所以手册中文版不会按照英文版章节顺序发布。

我们的Web应用程序在规模、野心和功能上持续成长
——这是一件好事。然而,向着更丰富的Web无情进军的过程,也推动了另一种趋势:每个应用程序下载的数据量也在持续稳步增长。为了提供强大的性能,我们需要优化每个字节的加载!

一个现代Web应用程序,应该是什么的样子? HTTP
档案馆
可以帮我们回答这个问题。该项目通过定期抓取最受欢迎的网站(Alexa最热百万网站列表中的三十多万个网站),来跟踪Web的建设,同时记录和汇总分析了每个目标网站的资源数、内容类型和其他元数据。





































 

50%的被测网站小于以下数值

75%的被测网站小于以下数值

90%的被测网站小于以下数值

HTML 13 KB 26 KB 54 KB
图片 528 KB 1213 KB 2384 KB
JavaScript 207 KB 385 KB 587 KB
CSS 24 KB 53 KB 108 KB
其他 282 KB 308 KB 353 KB
总计 1054 KB 1985 KB 3486 KB

以上数据呈现了2013年1月到2014年1月间,热门网站所需加载的数据字节数的增长趋势。当然,并不是每一个网站都以同样的速度增长,或者要求加载同样的数据量,我们也是因此而标出了几个突出的分布范围:第50(中位数)、第75,和第90百分位。

2014年初,处于中位数的网站需要进行75次连接请求,加载共1054
KB字节的数据,这一需要加载的数据量(以及连接请求数)在上一年中以稳定的步伐增长着。这本身并不值得意外,但它确实带来了重要的性能影响:的确,网速是越来越快了,但它在不同国家的增长速度并不一样,而许多用户仍受制于速度瓶颈和昂贵的网络套餐价格——尤其在移动端。

和桌面应用程序不同,Web应用程序并不需要一个单独的安装过程:输入网址,它们就被启动和运行了——这是Web应用程序的一个关键特征。但是,要做到这一步,们经常需要加载几十个、有是几百个各种源,它们加起来可达几兆字节的数据量,并且必在几百毫秒内融合起来,以实现我们想要的即

实现以这些要求为前提的即时网络体验,是不小的壮举,这就是为什么优化内容的加载效率是至关重要的:消除不必要的下载,通过各种压缩技术来优化资源的传输编码,并利用高速缓存来消除多余的下载。

http://httparchive.org/

http://blog.jobbole.com/67702/

现代Web的资源/类型/元素--发展趋势,布布扣,bubuko.com

时间: 2025-02-01 14:53:52

现代Web的资源/类型/元素--发展趋势的相关文章

个人Web工具箱&资源整理(1)

很久就想把使用的工具及收藏的资源整理一番:一是为了传达博客社区的理念:资源共享,而是方便自己及团队快速获取. 学习资源: 首推两个入门级在线参考网站. 1 w3c school. 2 Runoob.com(菜鸟教程). HTML5:标记语言,是HTML和XHTML的最新版本. HTML5 Outliner HTML5在线生成. 模板: jade:Jade 是一个高性能的模板引擎,它深受 Haml 影响,它是用 JavaScript 实现的,并且可以供 Node 使用. jade API:运行在N

极客Web开发资源大荟萃

前端开发已经成为当前炙手可热的技术之一.此次我们总结的前端开发包含了相关技术和流行趋势,希望从中大家可以挖掘你们所需要的,并带给你们最有价值的帮助!原文来自:极客标签 使用代码回放来愉快地学习前端知识 - TECH2IPO创见 编 程学习中最痛苦的地方在于:你试图理解学习对象的思路,但常规教学材料的传播方式生硬,对编程新手来说一点都不体贴.极客标签是一个试图改变这 种局面的产品,你可以称呼它“编程学习平台”,但它比同类产品好得多.来自tech2ipo对极客标签的专业报道和介绍,欢迎大家阅读和了解

AngularJS使用OData请求ASP.NET Web API资源的思路

本篇整理AngularJS使用OData请求ASP.NET Web API资源的思路. 首先给ASP.NET Web API插上OData的翅膀,通过NuGet安装OData. 然后,给controller中需要使用OData的Action加上EnableQuery特性,并让Action方法返回IQueryable<T>类型. public class ProductsController : ApiController { // GET: api/Products [EnableQuery(

Php学习之资源类型的使用详解

本文和大家分享的主要是php中资源类型的使用相关内容,一起来看看吧,希望对大家 学习php 有所帮助.  资源类型是一种特殊类型,它实际上可以保存任意的C指针,对PHP表现出一个资源对象的模样,例如:PHP里fopen的返回值就是一个resource.  我们可以利用资源类型,保存类型对象的指针,比如:一个FILE*文件描述符,或者仅仅是一个简单的char *字符串,其意义是可以将我们希望传递的C语言内存对象通过zval的形式包装起来,以便C和PHP跨语言传递.  资源类型是一个zval的底层数

Selenium Web 自动化 - 如何找到元素

Selenium Web 自动化 - 如何找到元素 2016-07-29 1. 什么是元素? 元素:http://www.w3school.com.cn/html/html_elements.asp 2. 定位方式解析 Selenium WebDriver 提供一个先进的技术来定位 web 页面元素.Selenium 功能丰富的API 提供了多个定位策略如:Name.ID.CSS 选择器.XPath 等等,如下图所示: 一般会用ID来定位,因为它是唯一的,xpath也比较通用,火狐浏览器插件:f

puppet资源类型详解(02)

常用的资源类型: notify, cron, exec, service, file, package, group, user (1) notify:利用puppet定义一个信息. message:通知的信息内容 notify {'warning': message=> "From warning notify resource.", } (2) cron ensure: 目标状态 command: 命令 hour minute month monthday weekday n

自己写一个swap函数交换任意两个相同类型元素的值 对空指针的使用 字节大小的判断(二)了解原理

验证的代码: 1 #include <stdio.h> 2 int main(){ 3 4 char c = 'z'; 5 int num = ('Z' << 24) + (c << 16) + ('A' << 8) + 'a'; 6 7 printf("'Z'=0x%x c=0x%x 'A'=0x%x 'a'=0x%x\n", 'Z', c, 'A', 'a'); 8 printf("num=0x%x\n", num

PHP-Manual的学习----【语言参考】----【类型】-----【Resource 资源类型】

2017年8月24日11:29:361.资源 resource 是一种特殊变量,保存了到外部资源的一个引用.资源是通过专门的函数来建立和使用的.2.由于资源类型变量保存有为打开文件.数据库连接.图形画布区域等的特殊句柄,因此将其它类型的值转换为资源没有意义.3.由于 PHP 4 Zend 引擎引进了引用计数系统,可以自动检测到一个资源不再被引用了(和 Java 一样).这种情况下此资源使用的所有外部资源都会被垃圾回收系统释放.因此,很少需要手工释放内存. 4. 持久数据库连接比较特殊,它们不会被

Telnet访问Web服务器资源

1:在Tomcat服务器下webapp目录创建一个静态资源 2:启动web服务器 3:cmd进入命令行窗口,执行telnet localhost 8080 .如果显示如下信息,需要开启Telnet客户端 控制面板-程序和功能-打开或关闭windows功能-选择Telnet客户端-确定. 再次执行telnet localhost 8080,就能输入命令行了.如果命令行不能明文展示,请按下Ctrl+],然后回车 4:访问Web服务器资源