前端性能优化及技巧

为何要优化性能对于前端工程师如此重要

          在行业内有句话不知道你们有没有据说过，‘懂得性能优化而且研究过jquery源代码的人和不懂得性能优化写出来的代码对于性能的消耗会相差上百倍甚至上千倍’，如今的javascript属于从ECMAscript3到ECMAscript5以及ECMAscript6的一个过渡的过程。在javascript的编写不健全的时候编写代码方法不得当，引发的问题也是不容忽视的。

 

 

    性能优化

---

    下面将本身对于性能优化的一些看法与你们分享；

    1.精灵图

      最基本的是尽量的将背景图片作成精灵图，减小图片的请求，因此通常web工程师的另外一项基础本能就是精灵图的制做。

    2.css选择器优化

        在css中要尽可能的使用子代选择器>,少使用后代选择器，使用后代选择器时，搜素引擎会将全部的后代元素都进行搜索，若是咱们使用子代选择器时，能够将搜索的范围缩小，从而减小DOM引擎的性能消耗。

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

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

    4.js直接操做dom节点

      当操做节点时尽可能将节点添加在元素的后面，若是插入到节点的前面时，会使插入节点以后的节点都引发回流，而插入到后面时只须要被插入的节点回流一次就能够了。

    可能有人不理解重绘与回流的概念，给你们推荐一个网址：

    http://www.zhangxinxu.com/wordpress/2010/01/%E5%9B%9E%E6%B5%81%E4%B8%8E%E9%87%8D%E7%BB%98%EF%BC%9Acss%E6%80%A7%E8%83%BD%E8%AE%A9javascript%E5%8F%98%E6%85%A2%EF%BC%9F/

    5.正则匹配选择器

       在css3以及jQuery中的属性选择器，这些选择器中有的是用正则进行匹配的尽可能不要去使用，固然若是对于性能优化不进行考虑的话，这些方法仍是比较好用的，正则匹配选择器会使DOM引擎搜索全部的标签，很大的影响性能

    6.js获取元素优化

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

    7.内存溢出

     通常在递归运行时，会产生内存溢出，形成在运行递归时性能大幅度降低，在运行结束后内存会被系统回收，因此在运行递归时须要用对象将值保存，在每次递归运算时检测，若是存在则直接返回，不存在则添加，这样就能够解决递归的很大性能。

    8.对Ajax用GET请求

    POST请求是经过先发送HTTP请求头，再发送数据来实现的，GET而是没有请求头的，可是须要注意：GET大小限制约4K，POST则没有限制。

    9.延迟加载图片

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

        下面给你们推荐一个图片懒加载的插件

jquery.lazyload.js

  插件下载地址：http://download.csdn.net/download/lwpxx/5179738  

   10.避免图片src属性为空

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

    <img src=””>

    var img = new Image();img.src = “”;

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

 

    技巧

---

        1.排他思想

    先排除当前全部的，再进行下一次操做；通常在进行动画、添加样式等时,在二次操做时先清楚前面的样式再重新添加新的样式，避免同时进行动画的冲突。

        2.短路运算（||）

    通常在一个值须要判断是否存在时，尽可能不要使用if语句,可使用短路运算符，能够省去代码占用的内存。好比：

  a=a||b;

a存在则使用a，a不存在则使用b。

        3.运算（&&）

    能够运用在条件匹配时，以便条件的多余查询，好比判断一个对象是否为数组时，

a && a.length&& a.length>=0

        4.伪数组以及数组

        当须要封装一个非数组元素变为一个数组时，最简单的办法就是给其添加一个[],若是须要是一个伪数组时，能够给其设置一个length属性。

        5.节流阀

    通常运用在动画中，设定一个值，开始时设置为true，判断其值，在进入动画时给这个值赋值为false，在动画结束时使用回调函数再从新赋值为true。

        6.解除文本的被动选中状态（纯干货）

    当在点击一些按钮时，有时会出现文本被选中的状况，让客户看见就犹如bug通常，如下是解除这一状态的代码，粘贴便可。

    if(document.all){
        document.onselectstart= function(){return false}; //for ie
    }else{
        document.onmousedown= function(){return false};
        document.onmouseup= function(){return true};
    }
    document.onselectstart = new Function('event.returnValue=false');

        7.巧妙使用三元运算符

        当须要判断一个值是否存在，也可使用三元运算符使代码更加优化。好比

   obj=obj===undefined?Object:obj;

        

        补充：

        上述是本身在工做中，总结的前端优化以及一些技巧与你们分享，若是你们有什么好的优化以及技巧但愿能够多多评论，我的认为技术是须要多沟通才能够更好的进步。