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

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

针对js文件的加载位置

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

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

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

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

针对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该知识点，这里件简单提下吧。

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

更快速的数据访问

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

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

  //修改前

  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";

      }

  };

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

JavaScript 总结几个提高性能知识点的更多相关文章

  1. Javascript函数式编程要掌握的知识点讲解

    一:理解call和apply 及arguments.callee ECMAScript3给Function的原型定义了两个方法,他们是Function.prototype.call 和 Functio ...

  2. 为什么虚拟 dom 会提高性能?

    虚拟 dom 相当于在 js 和真实 dom 中间加了一个缓存,利用 dom diff 算法避免了没有必要的 dom 操作,从而提高性能.用 JavaScript 对象结构表示 DOM 树的结构:然后 ...

  3. ASP.NET MVC之如何看待内置配置来提高性能优化（四）

    前言 前几篇我们比较基础的讲了下MVC中的知识,这一节我们穿插点知识,讲讲MVC中我们可以提高性能的办法. Razor视图引擎优化(优化一) 我们知道默认情况下配置MVC去解析一个视图会首先约定通过查 ...

  4. CSS性能分析，如何优化CSS提高性能

    不负十年后的自己,共勉! 前端性能优化一直是一个比较热门的话题,我们总是在尽我们最大的努力去,提高我们的页面性能,比如减少HTTP请求,利用工具对资源进行合并压缩,脚本置底,避免重复请求,css sp ...

  5. 对于大批量赋值功能，使用if判断是否能提高性能

    场景: 如果对某变量进行赋值,是否需要判断一下,如果相等就不用赋值,这样会不会提高性能. 代码如下: "; "; , x2=, x3=; Stopwatch w = new Sto ...

  6. Java编程提高性能时需注意的地方

    1.尽量在合适的场合使用单例 使用单例可以减轻加载的负担,缩短加载的时间,提高加载的效率,但并不是所有地方都适用于单例,简单来说,单例主要适用于以下三个方面 第一,控制资源的使用,通过线程同步来控制资 ...

  7. 使用C# yield关键字来提高性能和可读性

    对于”yield”这个关键字我已经见过N次了,直到最近我才知道这个关键字所蕴含的力量.我将在下面展示出一些使用”yield”让你的代码有更高可读性和更好性能的例子. 为了让你对yield有一些快速概览 ...

  8. 使用WITH AS提高性能简化嵌套SQL(转载)

    使用WITH AS提高性能简化嵌套SQL http://www.cnblogs.com/fygh/archive/2011/08/31/2160266.html

  9. Java 编程：如何提高性能？（简单总结篇）

    开发者在编程中除了要有编程规范,还要注意性能,在 Java 编程中有什么提高性能的好办法呢? 本文转自国内 ITOM 行业领军企业 OneAPM Cloud Insight(一款能够优雅监控多种操作系 ...

随机推荐

  1. Apache的Order Allow,Deny 详解

    Allow和Deny可以用于apache的conf文件或者.htaccess文件中(配合Directory, Location, Files等),用来控制目录和文件的访问授权. 所以,最常用的是: O ...

  2. python中set集合

    一.set集合的特性 访问速度快 天生解决重复问题 二.set变量申明 s1 = set() s2 = set([1,2,3]) 备注:第二种方式在set类中直接传入一个序列. 三.set类中方法大全 ...

  3. c# bass入门学习

    据说bass挺好用的,所以又搞了个音乐播放器 这是参考了别人的bass教学结合自己的理解写的bass操作类 public class BassHelper { private static BassH ...

  4. Open Auth辅助库（使用ImitateLogin实现登录）

    网络上越来越多的公司进行着自己的平台化策略,其中绝大多数都已Web API的方式对外提供服务,为了方便的使用这些服务,你不得不引用许多相关的类库,但是API的本质其实仅仅是一些约定的网络请求,我们大多 ...

  5. tomcat黑/白名单设置

    vim $tomcat_home/conf/server.xml(可以单个IP或者多个ip,多个ip用|分隔,支持正则) <Context path=" reloadable=&quo ...

  6. oracle函数--trunc

    作用:截取 语法:trunc(date,[fmt])   TRUNC函数,ORA-01898 精度说明符过多 TRUNC(SYSDATE)即可默认当前日期(年月日),---写到这一步就好了 TRUNC ...

  7. 警惕多iframe下的同名id引起的诡异问题

    遇到个诡异bug,虽然bug中套bug,忽略次要bug,其中最诡异最典型的现象是多行window.top.$("#id")取值操作,其中有一行却取不到值.这个着实让我费解.因为用到 ...

  8. dedecms调用标签总结(一)

    dedecms 基本包含了一个常规网站需要的一切功能,拥有完善的中文学习资料,很容易上手,学习成本较低.学会dedecms 的模板修改.栏目新增.内容模型新增和常用的标签调用方法后,即便我们不懂 ph ...

  9. HDU 2117 取(2堆)石子游戏【wzf博弈】

    题意:威佐夫博弈原型,除了输出先手能不能胜,还要输出先手的第一手选择. 思路:预处理出1000000以内的所有奇异局势.对于每个自然数,其必然是某一个奇异局势的a或者b.故对于一个非奇异局势,必定有一 ...

  10. sql索引的填充因子多少最好，填充因子的作用？

    当创建一个新索引,或重建一个存在的索引时,你可以指定一个填充因子,它是在索引创建时索引里的数据页被填充的数量.填充因子设置为100意味着每个索引页100%填满,50%意味着每个索引页50%填满. 如果 ...