web程序中全优化（二）之提高你的JavaScript效率Tips_web下载单个100kb比下载4个25kb慢-CSDN博客

本文链接：https://blog.csdn.net/u010191243/article/details/51549053

来国电快两个月了，开始了新的需求侧项目，不过不幸的是新的项目依然很忙…… 由于空不出时间，这个月写的学习笔记也不多，估计再有两周，就忙完最苦X的时期了，不过每天晚上依然是尽量保留一段时间夜读，也算是没辜负这漫漫长夜…

好了，闲话可有不宜多，下面我们来具体介绍，在项目实践过程中积累的关于JavaScript的一些好的用法，希望对大家有所帮助~

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

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

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

3、针对js合并：在很多团队开发中，我们可能会将不同功能的代码块分别放置在不同的js文件中，以便于开发过程中众人合作写代码会更加方便，毕竟只需要找对应文件夹或文件而不是在一个很长的文件中找一个方法。这确实是会提高团队开发效率及新人加入后的更容易进行二次开发及维护。那么将这个问题放到页面性能里呢？

由于下载1个100KB的文件比下载4个25KB的文件要快，而开发过程中区分开各个文件又有很大的好处，那么合并这个问题也就放在开发完后再处理就好了，之后我们再采用文件压缩工具进行js文件压缩。

4、更快速的数据访问：对于浏览器来说，一个标识符所处的位置越深，去读写他的速度也就越慢。这个应该不难理解，简单比喻就是：杂货店离你家越远，你去打酱油所花的时间就越长…

如果我们需要在当前函数内多次用到一个变量值，那么我们可以用一个局部变量先将其存储起来，案例如下：

 //修改前
  function showLi(){
      var i = 0;
      for(i=0;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=0;i<li_s.length;i++){
          console.log(i,li_s[i]);  //三次访问局部变量li_s
      };
  };

5、减少dom的重绘重排版：元素布局的改变或内容的增删改或者浏览器窗口尺寸改变都将会导致重排，而字体颜色或者背景色的修改则将导致重绘。

对于类似以下代码的操作，据说现代浏览器大多进行了优化(将其优化成1次重排版)：

 //修改前
  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次重排版

小结：其实还有些优化手段都是相似的，只是表现在了不同的方面，比如有一种循环的优化：和文中第4点比较相似，都是先定义好循环次数变量，避免再计算。敬请期待后续~