高性能网站建设进阶指南(一)

WEB性能提升的14条规则:

1、尽量减少HTTP请求(使用css sprites);

2、使用CDN;

3、添加Expires头;

4、添加Gzip压缩组件;

5、将样式表放在顶部;

6、避免CSS表达式,使用外部的js和css,并精简JS,删除重复的脚本;

7、减少DNS查询;

8、避免重定向;

9、配置ETag;

10、使ajax可缓存;

第一章    理解ajax性能

1、权衡:但是在97%的情况下,过早优化是万恶之源,但我们不应该错过那关键的3%。现实情况的项目三角形(项目管理的三角形是时间、成本和范围):时间、质量、成本三选二,在生活和工作中权衡无处不在,选择算法要权衡运行时间和内存,会为抢占市场而牺牲代码质量。这些权衡对增量式开发(是一种任务高度和分阶段的策略,系统的各个部分以不同的时间和速度开发,完成之后进行整合。它并不强调是否采用迭代式开发和瀑布式开发这两种再加工策略。取代增量式开发的另一个选择是使用大爆炸集成方式来开发整个系统。)的效果很大。

2、优化的原则:优化对系统资源开销大的组件或模板,如优化循环,循环嵌套的越多,可优化的选择就越少

测试WEB应用时,应该尽可能的模拟用户的环境,使用低端机器和低速网络来测试,开发人员的配置都比较高,在开发环境下测试会掩盖性能问题。

3、页面之间的跳转(请求替换页面)会带来很大的开销,因此对于连续页面之间差别小的应用来说,使用ajax技术。

传统方式下用户操作的结果是请求替换页面,页ajax的实现方式是:发送数据包(数据包要尽可能的小)到服务器端(通常编码为json文本),然后服务器返回另一个数据包(也是json编码)来响应,最后js程序使用这些数据来更新浏览器的显示。这样做,数据的传输量、用户操作和可视化反馈的时间间隔都明显减少,服务器和浏览器需要做的工作量反而减少了,但是ajax程序员需要做的工作量很可能因此页增加,这也是需要权衡的因素之一。

ajax应用的常见错误是把所有应用数据都发送给浏览器,这会引入ajax本应该避免的延迟问题。

4、使用ajax库。运行程序最大的开销是DOM,并不是js,布局是(处理CSS)最大的开销。因此要理解DOM的奥秘并减少它的影响。

5、如果浏览器要展示一个非常大的数据集无需用滚动而要用分页。

7、只有评估,才能有把握对性能产生积极的影响。

第二章  创建快速响应的WEB应用

1、当用户和浏览器交互时,操作系统首先要判断是计算机中的哪个设备在输入,然后判断哪个应用应该接收这些输入之后,将它们打包为单独事件并放置到该应用的事件队列中。浏览器按照队列顺序完成其队列中单独事件的处理。它按先进先出的顺序把它们从队列中取出来,然后决定如何处理这个事件。通常,浏览器将基于这些事件做如下的操作:对事件本身做处理(例如:浏览网页、显示设定动画)或执行页面本身的JS。

如下图

浏览器使用单线程在队列中取出事件,然后对事件本身进行处理或执行JS,所以浏览器一次只能处理一个任务,并且任何一个任务都能阻止其它任务的执行。

2、怎样是够快?

页面响应超过0.2--0.1秒(页面不够快,不够平滑)时会被用户注意到。

超过1秒(给用户的感觉是慢)的延迟要提示用户计算机正在解决这个问题,如:改变光标的形状。

超过10秒(用户焦虑,感觉网站慢)的任何操作都需要一个百分比完成指示器以及一个方便用户中断操作且有清晰标识的方法。

3、测试性能的方法

手动代码检测(记录)和自动代码检测(性能分析)

手动代码检测:在函数中添加计时器,利用var sta=new Date().getMilliseconds();在很多浏览器中有console,可以用console.log()函数来代替alert(),如console.log("你好啊!");

自动代码检测工具是用来查找瓶颈或运行最慢的代码块。firebug有性能分析器。

4、性能优化:使用多线程把用户开销很大的代码从与用户交互的线程中剥离出来,但是JS不支持多线程,解决方法是web workers API,把开销很大的JS委托给workers。如果有浏览器不支持web worker API,则可以用Gears worker API插件。而且很多操作系统和浏览器都已经绑定sqlite(也可以用Navicat for SQLite、sqlitespy ),也可以使用JS的定时器控制代码的执行。

线程处理:XHR(xml HttpRequest)有两种的执行方式同步和异步。

5、快速响应的另一个关键方面是:内存管理,JS有GC机制,然而,自动内存管理是有开销的,当执行回收时,它们会冻结整个运行环境(包括正在调用的主浏览器JS线程),直到遍历完整个对象创建的“堆”,因为冻结运行环境的时间短而避开用户的注意,但是随着应用程序占用的内存的增加,要查找所有没有用到的对象所用的时间较长时就会被用户注意到。整个浏览器就有可能定期被冻结。

6、如果确定内存性能有影响:

使用delete关键字从内存中移除不再需要的JS对象;

从网页的DOM树上移除不再是必须的节点;

第三章  拆分初始化负载

DHTML(动态HTML),下载JS时有阻塞特性,但是下载CSS时没有

1、压缩JS,可以把JS分成两部分,一个用于页面初始化,另一个则可以延迟加载,可以缩短应用程序的加载时间。

Doloto是自动拆分JS的系统,把JS代码拆分成两部分,一部分用于页面初始化,另一部分再需要用到时再加载或者在初始化代码加载完成时再加载,但是平时还是需要开发者手动拆分JS代码。

Doloto安装时需要首先安装.NET Framework 3.5,Doloto下载地址:http://pan.baidu.com/s/1pJqO8mJ

更多Doloto的资源:http://research.microsoft.com/en-us/projects/doloto/

拆分代码的难点:

(1)避免出现未定义标识符错误,解决方法:提示正在加载中......,提醒用户该功能还没有加载完成。

(2)延迟加载的代码里绑定界面元素的事件处理程序。IE的通过attchEvent实现,其它浏览器采用addAttchListener

(3)使用桩函数:与原函数名相同,但函数体为空,或者是用临时代码代替原有内容的函数,需要加载时再用原函数代替桩函数。

时间: 2024-10-23 11:55:33

高性能网站建设进阶指南(一)的相关文章

高性能网站建设进阶指南:Web开发者性能优化最佳实践 pdf扫描版

高性能网站建设进阶指南:Web开发者性能优化最佳实践是<高性能网站建设指南>姊妹篇.作者Steve Souders是Google Web性能布道者和Yahoo!前首席性能工程师.在本书中,Souders与8位专家分享了提升网站性能的最佳实践和实用建议,主要包括:理解Ajax性能,编写高效的JavaScript,创建快速响应的应用程序.无阻塞加载脚本, 跨域共享资源,无损压缩图片大小,使用块编码加快网页渲染:避免或取代iframe的方法,简化CSS选择符,以及其他技术.性能是任何一个网站成功的关

高性能网站建设进阶指南(三)

第五章  整合异步脚本 1.脚本如果按常规方式加载<scripg src=""></script不仅会阻塞页面中其它内容的下载,还会阻塞脚本后面所有元素的渲染,异步加载脚本可以避免这种阻塞情况.但是代码异步执行时可能会出现竞争状态而导致出现未定义标识符的错误.如果行内脚本依赖外部脚本(如引用jquery),保证执行顺序就很重要,外部脚本必须在行内脚本之前下载.解析.执行. 2.竞争状态 没有一种技术既能并行下载又能保持执行顺序,唯一的特例是firefox中执行的Scr

高性能网站建设进阶指南(二)

第四章  无阻塞加载脚本 阻塞:大部分浏览器在下载或执行<script>标签内容时不会下载其他内容.浏览器是按顺序执行的,但不一定要按顺序下载脚本. 对于外部脚本,如果浏览器缓存中有,就从缓存中读取,否则发送HTTP请求获取. 解决阻塞: (1)把所有的<script>中的代码内嵌在HTML页面中,这种方法不推荐使用. (2)XHR Eval.XHR注入.Script in Iframe(iframe是页面中开销最高的DoM元素),这两个的缺点:通过XHR获取的脚本必须部署在和主页

前端性能优化规则总结—读《高性能网站建设指南》

本文对<高性能网站建设指南>这本书中提出的14种基本的前端性能优化方案进行了总结,这本书介绍的优化方案比较过时了,不能完全满足目前前端性能优化,如果您浏览完能弄清楚每种方案的实施过程.就没必要看这本书了. 规则1-减少HTTP请求 1.使用图片地图 图片地图允许你在一个图片上关联多个URL,目标URL的选择取决于用户点击了图片上的哪个位置. 比如导航栏菜单有五个选项,为了美观,我们将菜单对应的超链接关联到图片上,可以使用五个分开的图片分别关联五个分开的超链接,此时加载这个导航菜单就要通过五次H

高性能网站建设指南pdf

下载地址:网盘下载 内容简介  · · · · · · 本书结合Web 2.0以来Web开发领域的最新形势和特点,介绍了网站性能问题的现状.产生的原因,以及改善或解决性能问题的原则.技术技巧和最佳实践.重点关注网页的行为特征,阐释优化Ajax.CSS.JavaScript.Flash和图片处理等要素的技术,全面涵盖浏览器端性能问题的方方面面.在<高性能网站建设指南>中,作者给出了14条具体的优化原则,每一条原则都配以范例佐证,并提供了在线支持.<高性能网站建设指南>内容丰富,主要包

高性能网站建设

压缩 浏览器使用Accept-Encoding头来生命它支持压缩. 服务器使用content-Encoding头确认响应已被压缩. 持久连接 request:      Connection:keep-alive response:    Connection:keep-alive 图片优化 1.使用图片地图,将多个图片整合到一张图片上   <map> 2.CSS Sprites   多张图片合并为一张,使用时,通过位置制定 合并后大小比单个图片总和还小,并且减少http请求 3.内联图片 d

高性能网站建设和优化

高性能网站建设和优化 在前端中,性能优化就是优化用户体验,减少响应速度以助于提高网页整体的加载速度,提高性能在建设高性能页面中不可缺少的一部分. 改进性能分为从前端改进和后台改进. 可以说前端是改进编辑页面的一些细节,在建设页面编辑代码是就注意性能的优化,然后集少成多 ,响应和加载时间通过逐步的减少,到达性能的改进, 而且在前端优化中需要的时间和资源都较少. 而要从后台入手改进性能,就相对来说复杂,也会带来很多的改动. 前端 作为前端开发人员,就要把性能优化的重点放在前端优化中.在代码编辑中考虑

读书笔记-高性能网站建设指南(2007)

人的思维往往会进入一种误区,认为"后面的","背后的"东西都是神秘的,伟大的影响力非凡的.所以很多书以"某某内幕"为题,很多程序猿以精通"底层开发"或"后端开发"为荣:同样的当网站出现问题时,我们第一时间想到的也是如何优化"后端".但这并不一定就是正确的,也许从前端入手,改善性能,将事半功倍. 绪言A:前端性能的重要性 在请求脚本时不会发生并行请求.这是因为在多数情况下,浏览器在下载脚本

《高性能网站建设指南》笔记

目录: 绪言A: 至少有80%的时间花在了显示Web页面上,并且这些时间是花在html文档下载完毕后发生的. 14条规则: 规则1: 减少http请求 方法: 1. 图片地图(Image Map):在一个图片上关联多个url,目标url的选择取决于用户点击了图片上的哪个位置. 图片地图有两种类型:服务器端图片地图(将所有点击提交到同一个目标url,向其传递用户点击的x,y坐标.Web应用程序将该x,y坐标映射为适当的操作)和客户端图片地图(将用户的点击映射到一个操作).映射通过html的map标