增高Web页面加载效率

提高Web页面加载效率
提高浏览器的页面加载效率
1. 去掉不必要的html、css代码。因为浏览器在解析html时，会构建一个内部文档树用于描述所有需要展现的元素。过多无用的html、css代码只会增加浏览器的构建时间，
也影响渲染css时查找匹配时间。
  
2. 大多浏览器选取CSS时，采用从右至左匹配原则。因此CSS的定义方式也会影响浏览器的渲染效率
  几种效率低下的定义：

  a. 采用通配方式    body * {...}    .hide-scrollbars * {...}  b. 采用标签作为key   ul li a {...}   #footer h3 {...}   * html #atticPromo ul li a {...]

3. 最小化css文件，将大的css文件拆分多个应用于当前页面的小文件。
4. 不是在页面开始时用到的样式可以拆分为单独文件。推迟到onload事件执行后加载。
5. 最小化javascript,去掉多余空格、换行和缩进。常用的javascript处理工具。 Closure Compiler, JSMin 和 YUI Compressor
6. 最小化css文件,常用工具： YUI Compressor 和 cssmin.js
7. 最小化html
8. 延迟加载js文件。css、javascrip文件浏览器都需要先下载完成、解析、执行。然后才会渲染页面。当javascript文件中有处理外部资源（如：图片），就会阻止浏览器
  渲染页面直到下载完成。
   常用延迟加载javascript的方法：

   <script type="text/javascript"> // Add a script element as a child of the body function downloadJSAtOnload() { var element = document.createElement("script"); element.src = "deferredfunctions.js"; document.body.appendChild(element); } // Check for browser support of event handling capability if (window.addEventListener) window.addEventListener("load", downloadJSAtOnload, false); else if (window.attachEvent) window.attachEvent("onload", downloadJSAtOnload); else window.onload = downloadJSAtOnload;</script>

9. 压缩图片，去除图片文件额外信息（如：作者，日期等）。PNG格式是不错的图片文件格式；GIF通常用于小(10pxX10px )或者简单(色板低于三色)的图片；JPG通常适用
   照片/摄影格式；不建议使用BMP和TIFF。常用工具 GIMP，OptiPNG 和 PNGOUT.

10. 采用相同的URL链接相同的资源，避免重复下载。

查看更多 下一篇