很多前端开发人员其实都见过‘’性能优化‘’这个词，特别是在面试要求上，我也不例外。

    所以我也曾经直接问度娘“前端性能优化”之类的，但是得到的结果看起来有点云里雾里，因为自己没有去尝试过，比较过，所以并没有get到，而这里，我记录的是一些我自己用到过的性能优化方法。

    其实前端就是跟浏览器打交道的，所以所谓的性能优化，就是对浏览器进行优化，包括浏览器向服务器发起请求和接受请求，都是和浏览器自身有关的，所以可以了解一下浏览器的工作原理，这样就会对性能优化产生一定的了解。

1.SPA页面懒加载

    其实就是按需加载，避免首次进页面加载过多的资源，造成等待时间过长。这方面知识挺多的，很多技术框架也自带懒加载功能或者插件。

2.操作DOM尽量减少layout

    比如目前我有两个节点domA,domB,我需要通过js分别给这两个节点的宽度加上20px,

    代码可能如下(jq写法)

    $(domA).css('width',$(domA).outerWidth()+ 20 + 'px');

    $(domB).css('width',$(domB).outerWidth()+ 20 + 'px');

    这样写是OK,分别给两个节点添加了20px的宽度,但是仔细看就会发现,代码的执行顺序是

    先获取domA得宽度,然后再修改domA宽度

    然后再获取domB得宽度,再修改domB宽度

    这样会造成性能消耗,读写,读写,浏览器进行了两次layout操作,

    而我们先获取到两个节点的宽度,再修改节点宽度,读读,写写,这样浏览器只进行一次layout操作。

3.选择器优先级

        选的越少性能越高,因为查询的节点少

　    1.id选择器（#myid）

　　2.类选择器（.myclassname）

　　3.标签选择器（div,h1,p）

　　4.相邻选择器（h1+p）

　　5.子选择器（ul < li）

　　6.后代选择器（li a）

　　7.通配符选择器（*）

　　8.属性选择器（a[rel="external"]）

　　9.伪类选择器（a:hover,li:nth-child）

    另外注意样式系统从最右边的选择符开始向左进行匹配规则,

    比如.worker_main .tree div , 浏览器会遍历所有的div标签,然后再找到.tree的节点,最后再找到.worker的节点.

    所以为了提升渲染性能,多层可以用class选择器代替

    当然还需要以实际情况出发,如果页面dom不多,为了可维护性,还是可以使用后代选择器或者子类选择器的.