前言 为什么要优化性能对于前端工程师如此重要
在行业内有句话不知道大家有没有听说过,‘懂得性能优化并且研究过jquery源代码的人和不懂得性能优化写出来的代码对于性能的消耗会相差上百倍甚至上千倍',现在的javascript属于从ECMAscript3到ECMAscript5以及ECMAscript6的一个过渡的过程。在javascript的编写不健全的时候编写代码方法不得当,引起的问题也是不容忽视的。
性能优化
下面将自己对于性能优化的一些见解与大家分享;
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.内存溢出
新闻热点
疑难解答
图片精选