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的资源/类型/元素--发展趋势的更多相关文章

  1. 好程序员web前端分享CSS元素类型

    好程序员web前端分享CSS元素类型 目标 1.元素类型分类依据和元素类型分类 2.元素类型的转换 3.inline-block元素类型的应用 4.置换和非置换元素的概念和应用案例 一.元素类型分类依 ...

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

    很久就想把使用的工具及收藏的资源整理一番:一是为了传达博客社区的理念:资源共享,而是方便自己及团队快速获取. 学习资源: 首推两个入门级在线参考网站. 1 w3c school. 2 Runoob.c ...

  3. 极客Web开发资源大荟萃

    前端开发已经成为当前炙手可热的技术之一.此次我们总结的前端开发包含了相关技术和流行趋势,希望从中大家可以挖掘你们所需要的,并带给你们最有价值的帮助!原文来自:极客标签 使用代码回放来愉快地学习前端知识 ...

  4. web.xml中的元素

    error-page元素包含三个子元素error-code,exception-type和location.将错误代码(Error Code)或异常(Exception)的种类对应到web应用资源路径 ...

  5. web开发资源导航

    实用工具 前端在线工具 兼容性速查 html5兼容性查询 node-es6支持度 es6兼容性表查询 设备es6支持度 游览器H5支持度 浏览器内核检测工具 手机设备信息检测 浏览器市场份额 文档手册 ...

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

    本篇整理AngularJS使用OData请求ASP.NET Web API资源的思路. 首先给ASP.NET Web API插上OData的翅膀,通过NuGet安装OData. 然后,给control ...

  7. [置顶] kubernetes资源类型--PetSets/StatefulSet

    PetSet首次在K8S1.4版本中,在1.5更名为StatefulSet.除了改了名字之外,这一API对象并没有太大变化. 注意:以下内容的验证环境为CentOS7.K8S版本1.5.2,并部署Sk ...

  8. [置顶] kubernetes资源类型--持久化存储Persistent Volume和Persistent Volume Claim

    概念 存储管理跟计算管理是两个不同的问题.理解每个存储系统是一件复杂的事情,特别是对于普通用户来说,有时并不需要关心各种存储实现,只希望能够安全可靠地存储数据. 为了简化对存储调度,K8S对存储的供应 ...

  9. 手把手教你查看网站遭受到的Web应用攻击类型

    常见Web应用攻击类型有:webshell.SQL注入.文件包含.CC攻击.XSS跨站脚本攻击.敏感文件访问.远程命令.恶意扫描.代码执行.恶意采集.特殊攻击.其他攻击十二种攻击类型. 如何查看网站遭 ...

随机推荐

  1. 数位DP入门Ural1057

    CF一战让我觉得很疲倦,所以今天感觉很慢. 昨天解D题时候,因为太累,根本连题目都没看,今天看了之后感觉不会做,听闻是数位DP问题. 有某神说过,DP的功力建立在刷过的题上,我真的毫无功力可言. 介绍 ...

  2. ZeroMemory和memset的区别

    摘自百度百科,保存为学习使用 ZeroMemory,是美国微软公司的软件开发包SDK中的一个宏. 其作用是用0来填充一块内存区域. 声明 void ZeroMemory( PVOID Destinat ...

  3. JavaScript之Chart.js图例(legend)

    #html <div id="chart_line_legend" class="chart-legend"></div> <ca ...

  4. jquery ajax 的data 存表单的值

    jsp <body> <form action="" method="post" id="formid">  < ...

  5. php curl模拟post请求提交数据

    最近在做校园图书馆图书信息的采集程序,既然是图书馆图书的采集,肯定有提交搜索的页面,无非是post提交,让我想到了curl模拟提交,首先通过firebug进行抓包查询下post提交后的格式如下: tx ...

  6. 我终于忍不住喷一下某些书了,关于Java传引用的XX言论

    凡是说Java对象传的是引用,简直一派胡言,尤其误导我这种Java初学者,更严重的是以前用过C++的Java初学者. 我们都知道Java建立对象一般都是需要这样的格式: Object obj = ne ...

  7. 第 12 章 命令模式【Command Pattern】

    以下内容出自:<<24种设计模式介绍与6大设计原则>> 今天讲命令模式,这个模式从名字上看就很简单,命令嘛,老大发命令,小兵执行就是了,确实是这个意思,但是更深化了,用模式来描 ...

  8. BZOJ 1711: [Usaco2007 Open]Dingin吃饭

    Description 农夫JOHN为牛们做了很好的食品,但是牛吃饭很挑食. 每一头牛只喜欢吃一些食品和饮料而别的一概不吃.虽然他不一定能把所有牛喂饱,他还是想让尽可能多的牛吃到他们喜欢的食品和饮料. ...

  9. 【转】来自GDXB大大大大的小总结

    一  最短路 模型一 增加限制 例:给定一个图,求起点到终点的最短路,其中你可以使用最多k次机会使某条边的边权变为x. 解法:把每个点拆成k个点,分别表示还能使用多少次机会,构造新图. 模型二 一个点 ...

  10. HDU 3308 LCIS 线段树区间更新

    最近开始线段树一段时间了,也发现了不少大牛的博客比如HH大牛  ,小媛姐.这个题目是我在看HH大牛的线段树专题是给出的习题,(可以去他博客找找,真心推荐)原本例题是POJ3667 Hotel 这个题目 ...