现代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://blog.jobbole.com/67702/
现代Web的资源/类型/元素--发展趋势的更多相关文章
- 好程序员web前端分享CSS元素类型
好程序员web前端分享CSS元素类型 目标 1.元素类型分类依据和元素类型分类 2.元素类型的转换 3.inline-block元素类型的应用 4.置换和非置换元素的概念和应用案例 一.元素类型分类依 ...
- 个人Web工具箱&资源整理(1)
很久就想把使用的工具及收藏的资源整理一番:一是为了传达博客社区的理念:资源共享,而是方便自己及团队快速获取. 学习资源: 首推两个入门级在线参考网站. 1 w3c school. 2 Runoob.c ...
- 极客Web开发资源大荟萃
前端开发已经成为当前炙手可热的技术之一.此次我们总结的前端开发包含了相关技术和流行趋势,希望从中大家可以挖掘你们所需要的,并带给你们最有价值的帮助!原文来自:极客标签 使用代码回放来愉快地学习前端知识 ...
- web.xml中的元素
error-page元素包含三个子元素error-code,exception-type和location.将错误代码(Error Code)或异常(Exception)的种类对应到web应用资源路径 ...
- web开发资源导航
实用工具 前端在线工具 兼容性速查 html5兼容性查询 node-es6支持度 es6兼容性表查询 设备es6支持度 游览器H5支持度 浏览器内核检测工具 手机设备信息检测 浏览器市场份额 文档手册 ...
- AngularJS使用OData请求ASP.NET Web API资源的思路
本篇整理AngularJS使用OData请求ASP.NET Web API资源的思路. 首先给ASP.NET Web API插上OData的翅膀,通过NuGet安装OData. 然后,给control ...
- [置顶]
kubernetes资源类型--PetSets/StatefulSet
PetSet首次在K8S1.4版本中,在1.5更名为StatefulSet.除了改了名字之外,这一API对象并没有太大变化. 注意:以下内容的验证环境为CentOS7.K8S版本1.5.2,并部署Sk ...
- [置顶]
kubernetes资源类型--持久化存储Persistent Volume和Persistent Volume Claim
概念 存储管理跟计算管理是两个不同的问题.理解每个存储系统是一件复杂的事情,特别是对于普通用户来说,有时并不需要关心各种存储实现,只希望能够安全可靠地存储数据. 为了简化对存储调度,K8S对存储的供应 ...
- 手把手教你查看网站遭受到的Web应用攻击类型
常见Web应用攻击类型有:webshell.SQL注入.文件包含.CC攻击.XSS跨站脚本攻击.敏感文件访问.远程命令.恶意扫描.代码执行.恶意采集.特殊攻击.其他攻击十二种攻击类型. 如何查看网站遭 ...
随机推荐
- 配置iSCSI
先查下yum list | grep iscsi, 存在iscsi包, 进行安装:yum install iscsi-initiator-utils.x86_64, cat /etc/iscsi/in ...
- [工具]toolbox_graph基本操作
toolbox_graph提供了对3D模型的一些操作.MATLAB代码源自:http://www.mathworks.com/matlabcentral/fileexchange/5355-toolb ...
- windows phone 扫描二维码
在网上找了找扫描二维码的例子,利用ZXing库实现(下载),提供的Silverlight版本的下载,在网上搜了一下已经有wp的dll可用了,不过网上实现的条码扫描的例子还都是用的Silverlight ...
- 禁止 apache 开机启动
sudo update-rc.d apache2 disable http://askubuntu.com/questions/19320/what-is-the-recommended-way-to ...
- PHP数组操作——获取数组最后一个值的方法
php开发过程中,可能经常需要对取出的数组要获取数组的最后健或值.在这里总结了三个方法,并且跟据他们三个方法在一些情况下如何使用的条件限制进行了说明. <?php $array=array(1, ...
- cli下的php(并传递参数)
传递参数有两种方式: 第一种使用文件操作,STDOUT作为标准输出,STDIN作为标准输入 使用fwrite($file,$string)作输出,使用fgets($file)作输入.这种应该算是继承自 ...
- VS2015安装开发ios android
前几天很火,装了一下,结果是不是太满意,装了VS2015只是多了一个android和ios的模版,最终还是要装xamarin ,最后装了个xamarin ,然后破解 破解地址:http://www.c ...
- jMeter之二
jMeter应用的最小子集有如下三个概念: 首先是线程组(Thread Group),线程组意味着定义一下多少个线程,多长时间建立起来(模拟增量按照一定频度上扬)以及循环多少次: 第二个是采样器(Sa ...
- tomcat https 配置
以前基本上笔者对于安全性考虑的并不多,最近因为saas平台要开始逐渐推广,所以需要开始逐渐加强xss/crsf/https等措施以避免潜在的安全性风险.本文简单的记录下tomcat下https的配置. ...
- OC 之 const
1. 修饰变量 一般设置传参数的时候 若设置为const, 则在调用过程中不允许修改参数值;(readonly) // *前const: 不能通过指针, 改变p指向的值 const int *p = ...