前段时间花时间看了大半的《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. asp.net mvc 之旅—— 第一站 从简单的razor入手

    记得2011年mvc3刚出来的时候,我们就有幸将 mvc3 用在我们团购项目上,当时老大让我们用一个星期时间来熟悉mvc,幸好园子里面的老朋友DR 正在写mvc3系列,也恭喜这个系列文章被整理成专题供 ...

  2. phpStydy配置memcache扩展

    一.下载并安装memcached服务器端软件    1.下载memcached软件 32位下载地址: memcached-win32-1.4.4-14.zip(直接下载),memcached-win3 ...

  3. HTTP状态码206和416

    HTTP 2xx范围内的状态码表明了:"客户端发送的请求已经被服务器接受并且被成功处理了". TTP/1.1 200 OK是HTTP请求成功后的标准响应 HTTP/1.1 206状 ...

  4. js 数组删除指定元素

    Array.prototype.remove = function(obj) { for (var i = 0; i < this.length; i++) { var temp = this[ ...

  5. c++双字符常量

    ascii表中 A是65,B是66,16706是A乘256+B 一些双字符的汉字也可以通过此方法转为int数字

  6. x01.Game.CubeRun: XACT3 播放声音

    1.使用 Xact3 工具 在 DXSDK 安装目录 => Uilities => bin => x86 里,运行 Xact3.exe 程序,新建波形库(Wave Bank).声音库 ...

  7. android The public type classname must be defined in its own file 报错

    The public type classname must be defined in its own file classname  为类名 错误提示,公用的类必髯有自己拥有独立.java文件 解 ...

  8. 一：c语言(数据类型和运算符)

    #include <stdio.h> /*就是一条预处理命令,它的作用是通知C语言编译系统在对C程序进行正式编译之前需做一些预处理工作.*/ int main() /*C程序就是执行主函数 ...

  9. TCP三次握手，数据传输，四次挥手

    TCP包结构 一个TCP包结构如下: 一个TCP包主要由TCP包头和数据部分组成,包头固定部分为20字节,选项和数据部分根据实际情况设置为4N(N可以为0)字节. 1.16bit源端口和目的端口号,它 ...

  10. ExecutorType 的类型