提高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链接相同的资源,避免重复下载。

猜你喜欢

转载自jizheng1125-gmail-com.iteye.com/blog/1161458