HTML5网页设计

网站优化

如何提高网页执行速度(2)

时间:2011-08-04 14:18来自:网络作者:秩名点击:
16. 优化CSS。要使用link方式,而不要使用@import方式。请参考这个优秀的文档http://www.slideshare.net/stubbornella/object-oriented-css 17. 使用CSS技术来优化图片资源 18. 用GZip方式压缩 .js 和 .css 文件。

16. 优化CSS。要使用<link>方式,而不要使用@import方式。请参考这个优秀的文档http://www.slideshare.net/stubbornella/object-oriented-css  

17. 使用CSS技术来优化图片资源  

18. 用GZip方式压缩 .js 和 .css 文件。如果你使用的是Apache,在 .htaccess 里设置压缩方式,你的HTML, XML 和 JSON 也同时会被压缩。       AddOutputFilterByType DEFLATE text/html text/css text/plain text/xml application/x-javascript application/json   

19. 使用JavaScript压缩工具。除了使用YUI和JSMin外,你还可以试一试Google Closure http://closure-compiler.appspot.com/home (感谢: James Westgate, 一位读者)   20. 优化每个页面上的各种资源,把它们拆分到各个子域上,这么它们就能够并行下载。请参考http://yuiblog.com/blog/2007/04 /11/performance-research-part-4/   

21. 将CSS样式表放在页面的最顶端,这样能方便包括IE在内的浏览器进行解析。  

22. 尽量将DOM结构保持的越简单越好。DOM的体积会影响相关的操作效率,像查找, 遍历,DOM改动都有影响。document.getElementsByTagName(’*').length这 个值越小越好。

23. 注意你使用的选择器。例如,如果你想获取一个ul下的直接子元素,使用jQuery(”ul > li”)而不要使用jQuery(”ul li”)。  

24. 当切换元素的可见性时(display),除非在一个循环里,我选择element.addClass(’myHiddenClass’), 这样会使代码更简洁 – 不要使用 inline CSS 和 JavaScript。  

25. 当你使用完对DOM的引用变量后,要把它置为NULL。  

26. 使用AJAX时,GET的执行效率高于POST。所以要尽量使用 GET 方式。只是要注意一点,IE只允许你用GET传送2K的数据。  

27. 小心使用脚本动画。没有硬件的支持,动画会执行的很慢。尽量避免使用那些没有实际价值的动画效果。  

28. 如果你的background-image对于这个图片的容器太小的话,请避免使 用background-repeat。如果你的背景图片需要来回填充很多次才能充满背景,那么将background-repeat属性设置成 background-image 和repeat-x 或 repeat-y来 达到填充背景的效果的做法是不明智的,这种填充方式的效率特别的低。你应该尝试使用一个足够大的图片来做background-image并 且使用background-repeat: no-repeat。  

29. 布局时不要使用<table>。 <table>在浏览器完全把它画出来之前需要反复绘制好几次。因为DOM中<table>是很少见的一种之后输出的会影响之前 输出的显示效果的元素。对于表格数据来说,你可 以使用table-layout:fixed; 这是一种更有效的现实算法,根据CSS 2.1技术说明,这种写法可以让表格一行一行的输出。  

30. 尽可能的使用原始JavaScript。限制JavaScript框架的使用。

当前文章地址:http://www.shejicool.com/web/seo/184.html

阅完本篇文章?您还可以: 收藏本文 文章挑错 朋友推荐