前段时间花时间看了大半的《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. 双十一来了，别让你的mongodb宕机了

    好久没过来吹牛了,前段时间一直赶项目,没有时间来更新博客,项目也终于赶完了,接下来就要面临双十一这场惊心动魄的处女秀考验, 我们项目中会有一个wcf集群,而集群地址则放在mongodb中,所以mong ...

  2. spring Quartz 调度

    Quartz 是开源任务调度框架中的翘首,它提供了强大任务调度机制,同时保持了使用的简单性.Quartz 允许开发人员灵活地定义触发器的调度时间表,并可以对触发器和任务进行关联映射.此外,Quartz ...

  3. 【Oracle XE系列之一】Windows10_X64环境 安装Oracle XE11gR2 X64数据库

    一.安装 1.去Oracle官网下载XE版的安装包[下载路径](Oracle Database Express Edition 11g Release 2 for Windows x64),解压. 2 ...

  4. oracle存储过程、函数、序列、包

    一. 存储过程 1. 语法 create or replace procedure procedureName(seqName varchar2) is /*声明变量*/ n ); cursor cu ...

  5. shell脚本切割tomcat的日志文件

    鉴于在调试logback和log4j的文件切割一直无法成功,随性用shell写个脚本用来切割tomcat下的日志文件(大家如果有在logback或log4j使用文件切割成功的话,可以留下使用方式,先谢 ...

  6. ThinkPHP3.1.3源码分析---php文件压缩zlib.output_compression 和 ob_gzhandler

    问题来源:\ThinkPHP3.1.3_full\ThinkPHP\Lib\Core\App.class.php 中 init()方法      if(C('OUTPUT_ENCODE')){     ...

  7. 优化SQL查询：如何写出高性能SQL语句

    1. 首先要搞明白什么叫执行计划? 执行计划是数据库根据SQL语句和相关表的统计信息作出的一个查询方案,这个方案是由查询优化器自动分析产生的,比如一条SQL语句如果用来从一个 10万条记录的表中查1条 ...

  8. 【4412嵌入式开发板学习笔记】认识uboot

    转自迅为讨论群:http://www.topeetboard.com 重要说明:这份笔记不是4412开发配套的,是我在网上看视频的时候下载上课老师的笔记后修改的.所以我试了一下笔记上的uboot命令, ...

  9. Hive分析hadoop进程日志

    想把hadoop的进程日志导入hive表进行分析,遂做了以下的尝试. 关于hadoop进程日志的解析 使用正则表达式获取四个字段,一个是日期时间,一个是日志级别,一个是类,最后一个是详细信息, 然后在 ...

  10. PhpSms 稳定可靠的php短信发送库

    可能是目前最聪明.优雅的PHP短信发送库了.从此不再为各种原因造成的个别短信发送失败而烦忧! phpsms的任务均衡调度功能由toplan/task-balancer提供. GitHub地址:http ...