很多前端开发人员其实都见过‘’性能优化‘’这个词，特别是在面试要求上，我也不例外。
所以我也曾经直接问度娘“前端性能优化”之类的，但是得到的结果看起来有点云里雾里，因为自己没有去尝试过，比较过，所以并没有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不多,为了可维护性,还是可以使用后代选择器或者子类选择器的.
