现代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跨站脚本攻击.敏感文件访问.远程命令.恶意扫描.代码执行.恶意采集.特殊攻击.其他攻击十二种攻击类型. 如何查看网站遭 ...
随机推荐
- Codevs 1048 石子归并
1048 石子归并 时间限制: 1 s 空间限制: 128000 KB 题目等级 : 黄金 Gold 题目描述 Description 有n堆石子排成一列,每堆石子有一个重量w[i], 每次合并可以合 ...
- 【ADO.NET】5、手机归属地查询( winfrom )
using System.IO; 有一个数据库手机号码的txt文件,格式是 : 13500000000-13560000000-中国移动 查询结果: 湖南移动[邵阳]文件夹选择对话框 FolderBr ...
- 认识linux权限
首先,我们来了解下linux系统的用户和用户组 场景:公司里有两个项目组:小组A和小组B:A.B.C是小组A的成员,甲.乙是小组B的成员.为了保密起见,小组内的进度.文档.程序都有小组内公开.比如小组 ...
- input表单
submit:点击submit按钮表单就会被提交给服务器,中文IE下默认按钮文本为“提交查询”,可以设置value属性修改按钮的显示文本 text:size属性为宽度,value为值,maxlengt ...
- php MVC 及例子解释
根据http://www.21ds.net/article/4/453改写: MVC模式在网站架构中十分常见.它允许我们建立一个三层结构的应用程式,从代码中分离出有用的层,帮助设计师和开发者协同工作以 ...
- CentOS6.6源码编译升级GCC至4.8.2
升级前提 源码编译需要至少要有一个可用的gcc编译器. 可以用过yum自动安装或者手动下载rpm包安装. 通过yum可以看到至少需要下面这些安装包,所以可以到许多rpm package站点中搜索下载相 ...
- asp.net mvc 发送邮箱验证码
public ActionResult Index() { /*第一种,利用Google的smtp来发送邮件*/ SmtpClient client = ); Random Rdm = new Ran ...
- 2015年9月29日 sql 触发器
触发器(trigger):当有关联操作的时候使用(级联操作),属于ddl关键字. eg:下订单时,创建中的商品数量要减少:退票时,总的票数要增加. 在订单上建立触发器 ...
- html5应用程序标签
一.html5应用程序标签 (1)datalist需要数据载体 input list属性指向数据源 <input type="text" list="input_l ...
- web服务编码设置
response设置编码. <%@ page contentType="text/html;charset=UTF-8" %> 是服务器端java程序运行时的输出编码, ...