JavaScript 总结几个提升性能知识点

时间 2019-11-24

标签 javascript 总结几个提升性能知识栏目 JavaScript 繁體版

原文原文链接

前段时间花时间看了大半的《High Performance JavaScript》这本书啊，而后就开始忙项目了，庆幸最忙的一周已经熬过去了。因为空不出时间，这个月写的学习笔记也很少，忙完最苦X的一周，这两天晚上也算是挑灯夜读了...终因而在残血之际将这本书shut down了...javascript

既然读完了，总归是要学到些什么的。说说对这本书的见解先吧，总体的来讲，内容仍是不错的，就是感受有点老了（做为前端小白，也多是自身水平有限，未能体会到其中真意）。看这本书的过程当中也是写了挺多代码用以测试的，而且对本书提倡的写法和原先大众的写法的执行分别进行了断点跟踪，对于能实际测出的问题进行理解，固然，下断点跟着执行也看不出的那也没办法咯。对于书中的知识点，这里只是简单的整理出我的所推崇的一部分，固然~ 不喜勿喷。css

针对js文件的加载位置前端

在HTML文件中，<script>标签是能够加在<head>区域和<body>区域的。这里鉴于JavaScript执行和UI渲染的单线程缘由，若是js文件载入会阻塞后面对于页面的解析过程，页面会等到js文件彻底加载并运行后才继续执行该作的操做。那么问题就来了，这样可能会出现页面空白or卡顿现象。做为一名前端开发，重要的不只仅止于实现了需求，应该还有优质的用户体验。那么咱们就须要消除用户枯燥的等待，针对这个问题，这里有本兽想到的两种解决方案：java

1. 若是js文件没有特殊要求指明须要在页面渲染以前载入及编译完成的，那么选择将js文件放到</body>标签前(既全部的页面所呈现内容的后面)，css文件仍是放到<head>区域(谁也不肯意看一个布局杂乱无章的页面)。这样作就能先让用户看到有布局的页面而不是空白页了，那么也会有人指出：那数据得经过js请求加载进来啊，怎么办呢？能够对数据的加载作排序，急需呈现的接口放前面执行，不是那么须要的能够延后执行，同时作个简单的载入动画or提示。数组

2. 若是这些js文件有指明须要先执行了，才能更好的展现页面内容，那么就在第一个js或者页面上先放个载入小动画，能够一些有趣的或者萌萌的动画场景。这样也是能较好的避免用户等待的无聊，说不定人家还对这个载入动画更感兴趣呢，这样可提高项目的用户体验感。浏览器

最终推荐：将<script>标签尽量的放到</body>标签前面加载，以提高用户体验。app

针对js文件的合并
在不少团队开发中，咱们可能会将不一样功能的代码块分别放置在不一样的js文件中，以便于开发过程当中众人合做写代码会更加方便，毕竟只须要找对应文件夹或文件而不是在一个很长的文件中找一个方法。这确实是会提升团队开发效率及新人加入后的更容易进行二次开发及维护。那么将这个问题放到页面性能里呢？这正是问题所在，在这本书中指出：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的文件要快，而开发过程当中区分开各个文件又有很大的好处，那么合并这个问题也就放在开发完后再处理咯，相信这个操做你们都不会陌生吧，如今的前端工具这么丰富，各位习惯用什么压缩就用什么压缩吧~
这里简单提出下，在载入文件方面还能够用到defer和async属性，用于延迟加载和异步加载，在现代浏览器中，大多数是已经支持defer属性了，还没习惯用这个额，也不知道具体会不会存在什么问题。有兴趣的朋友可自行google该知识点，这里件简单提下吧。异步

如今的框架也大多配合懒加载和按需加载了。async

更快速的数据访问

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

若是咱们须要在当前函数内屡次用到一个变量值，那么咱们能够用一个局部变量先将其存储起来，案例以下：

  //修改前
  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次循环，每次又有2次DOM元素访问：一次读取innerHTML的值，一次写入值
      };
  };

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

  function innerLi_s(){
      var content ="";
      var i = 0;
      for(;i<20;i++){
          content += "A";  //这里只对js的变量循环了20次
      };
      document.getElementById("Num").innerHTML += content;  //这里值进行了一次DOM操做，又分2次DOM访问：一次读取innerHTML的值，一次写入值
  };

减小Dom的重绘重排版

元素布局的改变或内容的增删改或者浏览器窗口尺寸改变都将会致使重排，而字体颜色或者背景色的修改则将致使重绘。
对于相似如下代码的操做，听说现代浏览器大多进行了优化(将其优化成1次重排版)：

  //修改前
  var ele = document.getElementById("div");
  document.body.appendChild(ele); //本例针对已存在DOM元素的操做作对比，添加动做产生1次重排
  ele.style.borderLeft = "1px"; //又1次重排版
  ele.style.borderRight = "2px"; //又1次重排版
  ele.style.padding = "5px"; //还有1次重排版
  //修改后
  var ele = document.getElementById("div");
  document.body.appendChild(ele); //添加动做产生1次重排
  el.style.cssText = "border-left:1px;border-right:2px;padding:5px"; //又1次重排版

上面代码只是作个次数对比，若是是正常的作法，应该是如下代码：

 var ele = document.getElementById("div");
  ele.style.borderLeft = "1px"; 
  ele.style.borderRight = "2px"; 
  ele.style.padding = "5px"; 
  document.body.appendChild(ele); //1次重排

针对已存在DOM的多重操做，如下三种方法也能够减小重排版和重绘的次数：

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

2.document.createDocumentFragment() 建立文档片断处理，操做后追加到页面 1次重排

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

循环的优化

这应该是较多人都知道的写法了，简单带过便可(后面仍是用代码+注释形式说明)~

  //修改前
  var i = 0;
  for(;i<arr.lengthli++){  //每次循环都须要获取数组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";
      }
  };

虽然说现代浏览器都已经作的很好了，可是本兽以为这是本身对代码质量的一个追求。而且可能一个点或者两个点不注意是不会产生多大性能影响，可是从多个点进行优化后，可能产生的就会是质的飞跃了~