Web前端性能优化

雅虎性能优化法则的第一条:要尽可能地减小HTTP请求。css

1、html文档结构标签语义化
一、首先什么是语义化呢?
语义化是指用合理HTML标记以及其特有的属性去格式化文档内容。机器在须要更少的人类干预的状况下可以研究和收集信息,让网页可以被机器理解,最终让人类受益。即用正确的标签作正确的事。html

二、语义化的好处或者说存在的意义
① 有利于搜索引擎
② 结构清晰的HTML在团队合做中的做用:代码可读、便于维护、提升开发效率、快速达成共识、利于二次开发。
③ 有利于盲人屏幕阅读器web

2、css、js文件数量及大小优化
通常对于css、js是建议使用外联式来进行导入。咱们能够对css、js作相应的规划也能够减小css、js的个数以减小http请求。同时也要注重减小重复代码,注重代码重复利用,以达到用最少的代码干最多的事。同时当项目要投入上线使用的时候,能够对css、js文件进行压缩,文件的减少能够加速文件的连接导入,以便加速网页的加载渲染。浏览器

3、图片的数量和大小
多个服务器请求会对站点的性能产生显著的影响。对一张图片进行导入又是一个http请求,所以咱们应该减小图片的导入数量以便减小http请求。此处,咱们必须提到一个名词“css精灵spirit”。css精灵是指包含多个不一样的图标、按钮或图形的单个图像。所以咱们能够把多张背景图片合并为一张而后对背景图片进行相应的定位。同时使用PNG8格式的图片相对于GIF来讲比较少。而对于内容图片,能够对其进行适当的压缩,能够加快文档内容加载,或者若是是须要用户下载的图片,小的图片能够加快用户下载的速度。缓存

4、有效性验证
除了根据语义加标记以外,HTML文档还须要用有效的代码来编写,若是代码是无效的,浏览器会尝试解释标记自己,有时候会产生错误的结果。更糟的是,若是发送具备正确的MIME类型的XHTML文档,理解XML的浏览器将不显示无效的页面。由于浏览器须要知道要使用什么DTD(文档类型定义)才能正确地处理页面,因此对页面进行有效性验证要求有DOCTYPE声明。性能优化

有效性验证工具径:
① W3C验证器(bookmarklet),这是一小段能够存储在浏览器的书签或收藏夹中的Javascript。单击这个书签就会触发Javascript动做。
②能够访问http://validator.w3.org/,经过输入本身的URL来对本身的站点来进行在线验证。
③使用firefox浏览器的能够下载插件Firefox Web Developer Extension服务器

5、雅虎的Web优化最佳实践cookie

一、内容优化
① 尽可能减小HTTP请求:常见方法包括合并多个CSS文件和JavaScript文件,利用CSS Sprites整合图像,Image map(图像中不一样的区域设置不一样的连接),内联图象(使用 data: URL scheme 在实际的页面嵌入图像数据)等。
② 减小DNS查找
③ 避免重定向
④ 使Ajax可缓存
⑤ 延迟加载组件:考虑哪些内容是页面呈现时所必需首先加载的、哪些内容和结构能够稍后再加载,根据这个优先级进行设定。
⑥ 预加载组件:预加载是在浏览器空闲时请求未来可能会用到的页面内容(如图像、样式表和脚本)。当用户要访问下一个页面时,页面中的内容大部分已经加载到缓存中了,所以能够大大改善访问速度。
⑦ 减小DOM元素数量:页面中存在大量DOM 元素,会致使JavaScript遍历DOM的效率变慢。
根据域名划分页面内容:把页面内容划分红若干部分可使你最大限度地实现平行下载。但要确保你使用的域名数量在2个到4个之间(不然与第2条冲突)。
⑧ 最小化iframe的数量:iframes 提供了一个简单的方式把一个网站的内容嵌入到另外一个网站中。但其建立速度比其余包括JavaScript和CSS的DOM元素的建立慢了1-2个数量级。
⑨ 避免404:HTTP请求时间消耗是很大的,所以使用HTTP请求来得到一个没有用处的响应(例如404没有找到页面)是彻底没有必要的,它只会下降用户体验而不会有一点好处。网络

二、服务器优化
① 使用内容分发网络(CDN):把你的网站内容分散到多个、处于不一样地域位置的服务器上能够加快下载速度。
添加Expires或Cache-Control信息头:对于静态内容,可设置文件头过时时间Expires的值为“Never expire(永不过时)”;对于动态内容,可以使用恰当的Cache-Control文件头来帮助浏览器进行有条件的请求。
② Gzip压缩
③ 设置ETag:ETags(Entity tags,实体标签)是web服务器和浏览器用于判断浏览器缓存中的内容和服务器中的原始内容是否匹配的一种机制。
④ 提早刷新缓冲区:当用户请求一个页面时,服务器会花费200到500毫秒用于后台组织HTML文件。在这期间,浏览器会一直空闲等待数据返回。在PHP中,可使用flush()方法,它容许你把已经编译的好的部分HTML响应文件先发送给浏览器,这时浏览器就会能够下载文件中的内容(脚本等)然后台同时处理剩余的HTML页面。
⑤ 对Ajax请求使用GET方法:当使用XMLHttpRequest时,浏览器中的POST方法会首先发送文件头,而后才发送数据。所以使用GET最为恰当。
⑥ 避免空的图像src工具

三、Cookie优化
① 减少cookie大小:去除没必要要的coockie,并使coockie体积尽可能小以减小对用户响应的影响
② 针对Web组件使用域名无关的Cookie:对静态组件的Cookie读取是一种浪费,使用另外一个无Cookie的域名来存放静态组件是一个好方法,或者也能够在Cookie中只存放带www的域名。

四、CSS优化
① 将CSS代码放在HTML页面的顶部
② 避免使用CSS表达式:CSS表达式在执行时候的运算量很是大,会对页面性能产生大的影响
③ 使用<link>来代替@import
④ 避免使用Filters:IE独有属性AlphaImageLoader用于修正IE 7如下版本中PNG图片的半透明效果,但它的问题在于浏览器加载图片时它会终止内容的呈现而且冻结浏览器。

五、JavaScript优化
① 将JavaScript脚本放在页面的底部
② 将JavaScript和CSS做为外部文件来引用:在实际应用中使用外部文件能够提升页面速度,由于JavaScript和CSS文件都能在浏览器中产生缓存。
③ 缩小JavaScript和CSS
④ 删除重复的脚本
⑤ 最小化DOM的访问:使用JavaScript访问DOM元素比较慢
⑥ 开发智能的事件处理程序

六、图像优化
① 优化图片大小
② 经过CSS Sprites优化图片
③ 不要在HTML中使用缩放图片
④ favicon.ico要小并且可缓存

七、针对移动优化
① 保持组件大小在25KB如下:主要是由于iPhone不能缓存大于25K的文件(注意这里指的是解压缩后的大小)。
② 将组件打包成为一个复合文档:把页面内容打包成复合文本就如同带有多附件的Email,它可以使你在一个HTTP请求中获取多个组件。

更多信息:http://developer.yahoo.com/performance/rules.html(中文翻译)

相关文章
相关标签/搜索