六开彩开奖结果2017玽

JavaScript提高性能的几个方法

时间:2016-01-17 21:52??? 点击:

针对js文件的加载位置

在HTML文件中,<script>标签是可以加在<head>区域和<body>区域的。这里鉴于JavaScript执行和UI渲染的单线程原因,如果js文件载入会阻塞后面对于页面的解析过程,页面会等到js文件完全加载并运行后才继续执行该做的操作。那?#27425;?#39064;就来了,这样可能会出现页面空白or卡顿现象。作为?#24187;?#21069;端开发,重要的不仅仅止于实现了需求,应该还有优质的用户体验。那么我们就需要消除用户枯燥的等待,针对这个问题,这里有本兽想到的两种解决方案:

1.  如果js文件没有特殊要求?#35813;?#38656;要在页面渲染之前载入及编译完成的,那么选择将js文件放到</body>标签前(既所有的页面所呈现内容的后面),css文件还是放到<head>区域(谁也不愿意看一个布局杂乱无章的页面)。这样做就能先让用户看到有布局的页面而不是空白页了,那么?#19981;?#26377;人指出:那数据得通过js请求加载进来啊,怎么办呢?可以对数据的加载做排序,急需呈现的接口放前面执行,不是那么需要的可以延后执行,同时做个简单的载入动画or提示。

2.  如果这些js文件有?#35813;?#38656;要先执行了,才能更好的展示页面内容,那么就在第一个js或者页面上先放个载入小动画,可以一些有趣的或者?#35753;?#30340;动画场?#21834;?#36825;样也是能较好的避免用户等待的无聊,说不定人?#19968;?#23545;这个载入动画更?#34892;?#36259;呢,这样可提升项目的用户体验?#23567;?/p>

最终推荐:将<script>标签尽可能的放到</body>标签前面加载,以提升用户体验。

针对js文件的合并

在很多团队开发中,我们可能会将不同功能的代码块分别放置在不同的js文件中,以便于开发过程中众人合作?#21019;?#30721;会更加方便,毕竟只需要找?#26434;?#25991;件夹或文件而不是在一个很长的文件中找一个方法。这确实是会提高团队开发效率及新人加入后的更容易进行二次开发及维护。那么将这个问题放到页面性能里呢?这正是问题所在,在这本书中指出:Each HTTP request brings with it additional performance overhead,so downloading one single 100 KB file will be faster than downloading four 25 KB files.

下载1个100KB的文件比下载4个25KB的文件要快,而开发过程中区分开各个文件又有很大的好处,那么合并这个问题也就放在开发完后再处理咯,相信这个操作大家都不会陌生吧,现在的前端工具这么丰富,各位习惯用什么压缩就用什么压缩吧~
这里简单提出下,在载入文件方面还可?#26434;?#21040;defer和async属性,用于延迟加载和异步加载,在?#25191;?#27983;览器中,大多数是已经支持defer属性了,还没习惯用这个额,也不知道具体会不会存在什?#27425;?#39064;。有兴趣的朋友可自行google该知识点,这里件简单提下吧。

现在的框架也大多配合懒加载和按需加载了。

更快速的数据访问

对于浏览器来说,一个标识符所处的位置越深,去读写他的速度也就越慢(对于这点,原型链亦是如此)。这个应该不难理解,简单比喻就是:杂货店离你?#20197;?#36828;,你去打酱油所花的时间就越长… 熊孩子,打个酱油那么久,菜早烧焦了 -.-~

如果我们需要在当前函数内多次用到一个变量值,那么我们可?#26434;?#19968;个局部变量先将其存储起来,案例如下:

  //修?#37027;?
  function showLi(){
      var i = 0;
      for(;i<document.getElementsByTagName("li").length;i++){    //一次访问document
          console.log(i,document.getElementsByTagName("li")[i]);  //三次访问document
      };
  };
  //修改后
  function showLi(){
      var li_s = document.getElementsByTagName("li");  //一次访问document
      var i = 0;
      for(;i<li_s.length;i++){
          console.log(i,li_s[i]);  //三次访问局部变量li_s
      };
  };

DOM操作的优化

众所周知的,DOM操作远比javascript的执行耗性能,虽然我们避免不了对DOM进行操作,但我们可以尽量去减少该操作对性能的消耗。

让我们通过代码解释这个问题:

  function innerLi_s(){
      var i = 0;
      for(;i<20;i++){
          document.getElementById("Num").innerHTML="A"; //进行了20次循环,?#30475;?#21448;有2次DOM元素访问:一次读取innerHTML的值,一次写入值
      };
  };

针对以上方法进行一次改写:

  function innerLi_s(){
      var content ="";
      var i = 0;
      for(;i<20;i++){
          content += "A";  //这里?#27426;詊s的变量循环了20次
      };
      document.getElementById("Num").innerHTML += content;  //这里?#21040;?#34892;了一次DOM操作,又分2次DOM访问:一次读取innerHTML的值,一次写入值
  };

减少Dom的重绘重排版

元素布局的改变或内容的增删改或者浏览器窗口尺寸改变都将会导致重排,而字体颜色或者背景色的修改则将导致重绘。
对于类似以下代码的操作,据说?#25191;?#27983;览器大多进行了优化(将其优化成1次重排版):

  //修?#37027;?
  var el = document.getElementById("div");
  el.style.borderLeft = "1px"; //1次重排版
  el.style.borderRight = "2px"; //又1次重排版
  el.style.padding = "5px"; //还有1次重排版
  //修改后
  var el = document.getElementById("div");
  el.style.cssText = "border-left:1px;border-right:2px;padding:5px"; //1次重排版

针对多重操作,以下三种方法也可以减少重排版和重绘的次数:

1.Dom先隐藏,操作后再显示 2次重排 (临时的display:none)

2.document.createDocumentFragment() 创建文档片?#26410;?#29702;,操作后追加到页面 1次重排

3.var newDOM = oldDOM.cloneNode(true)创建Dom副本,修改副本后oldDOM.parentNode.replaceChild(newDOM,oldDOM)覆盖原DOM 2次重排

循环的优化

这应该是较多人都知道的写法了,简单带过即可(后面还是?#20040;?#30721;+注释?#38382;?#35828;明)~

  //修?#37027;?
  var i = 0;
  for(;i<arr.lengthli++){  //?#30475;?#24490;环都需要获取数组arr的length
      console.log(arr[i]);
  }
  //修改后
  var i = 0;
  var len = arr.length;  //获取一次数组arr的length 
  for(;i<len;i++){
      console.log(arr[i]);
  }
  //or
  var i = arr.length;;
  for(;i;i--){
      console.log(arr[i]);
  }

合理利用二进制

如:对2取模,则偶数最低位是0,奇数最低位是0,与1进行位与操作的结果是0,奇数的最低位是1,与1进行位与操作的结果是1。

代码如下:

  .odd{color:red}
  .even{color:yellow}
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
    </ul>
  var i = 0;
  var lis = document.getElementsByTagName("li");
  var len = lis.length;
  for(;i<len;i++){
      if(i&1){
          lis[i].className = "even";
      } else{
          lis[i].className = "odd";
      }
  };

来源:未知//所属分类:技术资料/更新时间:2016-01-17 21:52
顶一下
(0)
0%
踩一下
(0)
0%
上一篇:JavaScript中typeof和instanceof深入详解
下一篇:JavaScript创建对象4种方法详解
相关内容
六开彩开奖结果2017玽 云南时时十一选五开奖走势图 快乐彩怎么玩 江西快3计划 为何有些东西不赚钱也卖 波克捕鱼兑换码怎么得 简单的二人扑克牌玩法 河北福彩快3走势图 西安二人麻将技巧 麻将老虎机技巧视频 街机森林舞会