现代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跨站脚本攻击.敏感文件访问.远程命令.恶意扫描.代码执行.恶意采集.特殊攻击.其他攻击十二种攻击类型. 如何查看网站遭 ...
随机推荐
- 【技术·水】浅谈Dism++清理插件开发
前言 昨天我发布了NCleaner,一款Dism++清理插件(地址:http://bbs.pcbeta.com/viewthread-1692182-1-1.html) 有些人想要我开源NCleane ...
- C++类继承内存布局(三)
参考:http://blog.csdn.net/jiangyi711/article/details/4890889# (三)成员函数 类X中每一个非静态成员函数都会接受一个特殊的隐藏参数——this ...
- 九度OJ 1455 珍惜现在,感恩生活 -- 动态规划(背包问题)
题目地址:http://ac.jobdu.com/problem.php?pid=1455 题目描述: 为了挽救灾区同胞的生命,心系灾区同胞的你准备自己采购一些粮食支援灾区,现在假设你一共有资金n元, ...
- (转)IOS开发之——绘图(CGContext)
周刊 更多 登录 IOS开发之——绘图(CGContext) 时间 2014-04-21 09:17:43 CSDN博客 原文 http://blog.csdn.net/zhenyu521131 ...
- Python之实现一个简易计算器
自己动手写计算器 一.功能分析 用户输入一个类似这样 3*( 4+ 50 )-(( 100 + 40 )*5/2- 3*2* 2/4+9)*((( 3 + 4)-4)-4) 这样的表达式,假设表达式里 ...
- initrd.gz的解压和制作
解压: gzip -d initrd.gz cpio -idmv < initrd 压缩: find . | cpio -o -c > initrd.img gzip initrd.img ...
- Python编写的Linux网络设置脚本,Debian Wheezy上测试通过
hon编写的Linux网络设置脚本,Debian Wheezy上测试通过 阿里百川梦想创业大赛,500万创投寻找最赞的APP 技术细节参见Linux网络设置高级指南 注意事项参见程序注释 ...
- 简单Linq笔记
Linq是.net 3.5才引入的 要引入命名空间System.Linq. Linq to XML要引入System.Xml.Linq Linq to ADO.NET要引入System.Data.L ...
- Navicat Premium 未保存的SQL如何找回 ?
在使用 Navicat Premium 编辑SQL的过程中为防止程序意外崩溃,已经将编辑的SQL都已经备份. 备份存放目录地址:C:\Users\{登录用户名}\Documents\Navicat\M ...
- web2.0最全的国外API应用集合
web2.0最全的国外API应用集合 原文地址:http://www.buguat.com/post/98.html 2.0时代,越来越多的API被大家广泛应用,如果你还不了解API是何物,请看这里的 ...