前端性能优化及技巧

1.精灵图

      最基本的是尽可能的将背景图片做成精灵图,减少图片的请求,所以一般web工程师的另一项基础本能就是精灵图的制作。

 2.css选择器优化

在css中要尽量的使用子代选择器>,少使用后代选择器,使用后代选择器时,搜素引擎会将所有的后代元素都进行搜索,如果我们使用子代选择器时,可以将搜索的范围缩小,从而减少搜索引擎的性能消耗。

    3.js改变样式直接操作类名

js操作元素样式时,不要用style去直接添加样式,一般属性少时不会影响多少性能,其实则不然,在每次添加样式时,页面都会重绘一次,重绘是不得不重视的,操作样式时,直接操作类名,只引起一次重绘,用style直接添加样式会引起多次的重绘。

 4.js直接操作dom节点

当操作节点时尽量将节点添加在元素的后面,如果插入到节点的前面时,会使插入节点之后的节点都引起回流,而插入到后面时只需要被插入的节点回流一次就可以了。

可能有人不理解重绘与回流的概念

 5.正则匹配选择器

       在css3以及jQuery中的属性选择器,这些选择器中有的是用正则进行匹配的尽量不要去使用,当然如果对于性能优化不进行考虑的话,这些方法还是比较好用的,正则匹配选择器会使搜索引擎搜索所有的标签,很大的影响性能

 6.js获取元素优化

      在js中获得元素时,正常是使用document.getElementsById,搜索引擎会从Dom树的最底端,进行搜索,直到搜索到window中的document再进行返回搜索,所以在获得元素时最好是将document.body进行储存,当再次使用时,只需将这个变量取出使用,可以节省搜索引擎的性能

7.内存溢出

一般在递归运行时,会产生内存溢出,造成在运行递归时性能大幅度下降,在运行结束后内存会被系统回收,所以在运行递归时需要用对象将值保存,在每次递归运算时检测,如果存在则直接返回,不存在则添加,这样就可以解决递归的很大性能。

8.对Ajax用GET请求

    POST请求是通过先发送HTTP请求头,再发送数据来实现的,GET而是没有请求头的,但是需要注意:GET大小限制约4K,POST则没有限制。

9.延迟加载图片

        在页面发起请求时,请求量过大,可以使图片进行懒加载,当页面滚到到图片的位置时,再进行加载图片。

     推荐一个图片懒加载的插件:jquery.lazyload.js

10.避免图片src属性为空

    src 属性是空字符串的图片很常见,主要以两种形式出现:

1
2
3
<img src="" />
var img = new Image();
img.src = "";

这两种形式都会引起相同的问题:浏览器会向服务器发送另一个请求。

 

虚拟主机
《你不知道的JavaScript(中卷)》PDF
【深入浅出Node.js】PDF
《JavaScript设计模式与开发实践 》PDF
《HTML5 权威指南》PDF
广告也精彩