2016初冬笔记整理----性能优化篇

一.js优化的几个方法:

     1,尽量少用DOM操作,如appendchild;

              2,尽量使用局部变量;

              3,最好使用Textcss,外链CSS文件;

              4,最好使用缓存信息;

              5,最好使用文档碎片(createDocumentFragmeng)

      5.将CSS放再顶部: 能加快页面内容显示,并且能避免页面产生白屏

      6.将JS放在底部,防止阻塞

      7.压缩文件

二.性能优化

    1.精灵图:减少图片的请求,压缩图像

    2.css选择器优化

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

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

       js操作元素样式时,用style直接添加样式会引起多次的重绘,直接操作类名,只引起一次重绘。

    4.js直接操作dom节点

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

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

    

    7.内存溢出

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

    8.对Ajax用GET请求

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

    9.延迟加载图片

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

        下面给大家推荐一个图片懒加载的插件 jquery.lazyload.js

   10.避免图片src属性为空, 避免坏请求

  减少Http请求

  • 使用精灵图
  • 使用CSS Sprites
  • 合并JS和CSS文件

    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.巧妙使用三元运算符

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

1
obj=obj===undefined?Object:obj;
原文地址:https://www.cnblogs.com/bugda/p/6075556.html