提高程序执行效率 Web开发技巧集合2

 

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

　　17.使用CSS技术来优化图片资源。关于Web前段优化，欢迎访问：改善用户体验 Web前端优化策略总结

　　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外。

　　20.优化每个页面上的各种资源，把它们拆分到各个子域上，这么它们就能够并行下载。

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

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

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

　　24.当切换元素的可见性时(display),请记住：element.css({display:none})的 速度快于element.hide() 和 element.addClass(’myHiddenClass’)。 除非在一个循环里，我选择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.布局时不要使用 。  在浏览器完全把它画出来之前需要反复绘制好几次。因为DOM中  是很少见的一种之后输出的会影响之前输出的显示效果的元素。对于表格数据来说，你可 以使用table-layout:fixed; 这是一种更有效的现实算法，根据CSS 2.1技术说明，这种写法可以让表格一行一行的输出。

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

原文出自【比特网】，转载请保留原文链接：http://soft.chinabyte.com/database/93/11403093_2.shtml