前端程序员必须知道的高性能Javascript知识

想必大家都知道，JavaScrip是全栈开发语言，浏览器，手机，服务器端都可以看到JS的身影。 本文会分享一些高效的JavaScript的最佳实践，提高大家对JS的底层和实现原理的理解。

数据存储
计算机学科中有一个经典问题是通过改变数据存储的位置来获得最佳的读写性能，在JavaScript中，数据存储的位置会对代码性能产生重大影响。 – 能使用{}创建对象就不要使用new Object，能使用[]创建数组就不要使用new Array。JS中字面量的访问速度要高于对象。 – 变量在作用域链中的位置越深，访问所需实践越长。对于这种变量，可以通过缓存使用局部变量保存起来，减少对作用域链访问次数 – 使用点表示法（object.name）和操作符（object[name]）操作并没有太多区别，只有Safari会有区别，点始终更快

循环
在JS中常见的循环有下面几种：

for(var i = 0; i < 10; i++) { // do something}
for(var prop in object) { // for loop object}
[1,2].forEach(function(value, index, array) { // 基于函数的循环})

毋庸质疑，第一种方式是原生的，性能消耗最低的，速度也最快。第二种方式for-in每次迭代都回产生更多的开销（局部变量），它的速度只有第一种 的1/7 第三种方式明显提供了更便利的循环方式，但是他的速度只有普通循环的1/8。所以可以根据自己项目情况，选择合适的循环方式。

事件委托
试想一下页面上每一个A标签添加一个事件，我们会不会给每一个标签都添加一个onClick呢。 当页面中存在大量元素都需要绑定同一个事件处理的时候，这种情况可能会影响性能。每绑定一个事件都加重了页面或者是运行期间的负担。对于一个富前端的应 用，交互重的页面上，过多的绑定会占用过多内存。 一个简单优雅的方式就是事件委托。它是基于事件的工作流：逐层捕获，到达目标，逐层冒泡。既然事件存在冒泡机制，那么我们可以通过给外层绑定事件，来处理 所有的子元素出发的事件。

document.getElementById('content').onclick = function(e) {
  e = e || window.event;
  var target = e.target || e.srcElement;  //如果不是 A标签，我就退出
  if(target.nodeNmae !=== 'A') { return }  //打印A的链接地址
  console.log(target.href) }

重绘与重排
浏览器下载完HTMl，CSS，JS后会生成两棵树：DOM树和渲染树。 当Dom的几何属性发生变化时，比如Dom的宽高，或者颜色，position，浏览器需要重新计算元素的几何属性，并且重新构建渲染树，这个过程称之为重绘重排。

bodystyle = document.body.style;
bodystyle.color = red;
bodystyle.height = 1000px;
bodystyke.width = 100%;

上述方式修改三个属性，浏览器会进行三次重排重绘，在某些情况下，减少这种重排可以提高浏览器渲染性能。 推荐方式如下，只进行一次操作，完成三个步骤：

bodystyle = document.body.style;
bodystyle.cssText 'color:red;height:1000px;width:100%';

JavaScript加载
IE8，Firefox3.5，Chrome2都允许必行下载JavaScript文件。所以<script>不会阻塞其他标签下载。 遗憾的是，JS下载过程依然会阻塞其他资源的下载，比如图片。尽管最新的浏览器通过允许并行下载提高了性能，但是脚本阻塞任然是一个问题。 因此，推荐将所有的<script>标签放在<body>标签的底部，以尽量减少对整个页面渲染的影响，避免用户看到一片空白

JS文件高性能部署
既然大家已经知道多个<script>标签会影响页面渲染速度，那么就不难理解“减少页面渲染所需的 HTTP”是网站提速的一条经典法则。 所以，在产品环境下合并所有的JS文件会减少请求数，从而加快页面渲染速度。 除了合并JS文件，我们还可以压缩JS文件。压缩是指将文件中与运行无关的部分进行剥离。剥离内容包括空白字符，和注释。改过程通常可以将文件大小减半。 还有一些压缩工具会将局部变量的长度减小，比如：

var myName = "foo" + "bar";
//压缩后变成
var a = "foobar";

缓存JS文件
缓存HTTP组件能极大提高网站回访的用户体验。Web服务器通过“Expires HTTP响应头”来告诉客户端一个资源应该缓存多长时间。当然，缓存也有自己的缺陷： 当应用升级时，你需要确保用户下载到最新的静态内容。这个问题可以通过改变静态资源的文件名来解决。 你可能在产品环境看到浏览器引用jsapplication-20151123201212.js，这种就是以时间戳的方式保存新的JS文件，从而解决缓存不更新问题。

总结
当然，高效的JS不仅仅只有这些可以改进的地方，如果能够减少一些性能的损耗，我们就能更高效的使用JavaScript进行开发了。

赞 (0)

相关推荐

  • JavaScript 语言基础知识点总结（思维导图）

    JavaScript 语言基础知识点总结（思维导图）

    JavaScript 数组 JavaScript 函数基础 Javascript 运算符 JavaScript 流程控制 JavaScript 正则表达式 JavaScript 字符串函数 JavaScript 数据类型 JavaScript 变量 Window 对象 DOM 基本操作    由于上面的图片比较大,建议大家下载到本地查看

  • javascript DOM 操作基础知识小结

    DOM添加元素,使用节点属性 DOM添加元素,使用节点属性 //涂聚文 geovindu@163.com var nr = 1; function addItem() { var list = document.getElementById("list"); var newNode = document.createElement("li"); var newLink = document.createElement("a"); newLink.

  • JS重要知识点小结

    讲解还是以示例代码搭配注释的形式,这里做个小目录: JS代码预解析原理(包括三个段落): 函数相关(包括 函数传参,带参数函数的调用方式,闭包): 面向对象(包括 对象创建.原型链,数据类型的检测,继承). JS代码预解析原理 复制代码 代码如下: /****************** JS代码预解析原理 ******************/ /* JS代码预解析.变量作用域.作用域链等 应该能作为学习JS语言的入门必备知识. 下边给出些简要解释和一些典型的代码段,若要了解更多,能从网上搜索

  • js事件(Event)知识整理

    js事件(Event)知识整理

    鼠标事件 鼠标移动到目标元素上的那一刻,首先触发mouseover 之后如果光标继续在元素上移动,则不断触发mousemove 如果按下鼠标上的设备(左键,右键,滚轮--),则触发mousedown 当设备弹起的时候触发mouseup 目标元素的滚动条发生移动时(滚动滚轮/拖动滚动条..)触发scroll 滚动滚轮触发mousewheel,这个要区别于scroll 鼠标移出元素的那一刻,触发mouseout 事件注册 平常我们绑定事件的时候用dom.onxxxx=function(){}的形式

  • javascript之正则表达式基础知识小结

    元字符 ^ $ . * + ? = ! : | \ / ( ) [ ] { } 在使用这些符号时需要用"\"来进行转移. 如果记不清楚那些标点符号需要转移,可以在使用标点符号时都使用反斜杠"\" 简单匹配 1.直接量 /javascript/ 匹配带有"javascript"的字符串 比如"javascript is an object-oriented scripting language" 2.[ ] /[abc]/ 匹配

  • javascript创建页面蒙板的一些知识技巧总结第1/3页

    在ajax大行其道的今天,模拟弹出窗口,或者thinkbox,greybox等很多特效都用了蒙板的功能,其应用原来对于我们来说也很简单:创建一个绝对定位,top/left都为0,宽度和高度等于浏览器内容的高宽,然后索引设置的大点即可.可是这里有一些问题和技巧可能是您一直都不知道或者不清楚的,这里总结几点,这些都是个人学习的过程中发现的. 1.创建的蒙板如果要禁止对蒙板下部内容的操作必须设置background属性且必须设置一个有效的值,否则虽然遮罩层创建成功,但仍然可以对页面下部的元素进行操作.

  • js+jquery常用知识点汇总

    js+jquery常用知识点汇总

    一.jquery源码中常见的知识点 1.string,number类型转换的快捷方法 复制代码 代码如下: // @param s为字符串,n为数字 function fn(obj){     //转换为String类型     var s = obj +"";     //转换为number类型     var n = +obj; } 分享一个面试例子: //加会将其后面自动转换成字符串 "64"+4="644" //减会将其自动转换成数字 &

  • extjs 学习笔记（一） 一些基础知识

    extjs 学习笔记（一） 一些基础知识

    我在项目中已经频繁使用了jquery,这次主要是学习使用extjs,但现有的教程基本都是针对2.0的,而且后台用到的语言也很少是.net平台下的C#,所以我打算针对3.0版,后台使用C#,记录下自己的学习过程,希望能和志同道合的朋友一起探讨,共同进步. extjs的官方网站是http://www.extjs.com,目前最高版本是3.0.2,但是只有3.0.0的才没有任何下载限制,可以点击这里下载3.0版的.下载来的压缩包里边包含压缩后的extjs库,调试时用到的库,具有可读性的源代码,文档和例

  • javascript Excel操作知识点

    1创建 var XLObj = new ActiveXObject("Excel.Application" ); var xlBook = XLObj.Workbooks.Add; //新增工作簿 var ExcelSheet = xlBook.Worksheets(1); //创建工作表 2.保存表格 ExcelSheet.SaveAs("C:\\TEST.XLS" ); 3.使 Excel 通过 Application 对象可见 ExcelSheet.Appli

  • 详细讲解JS节点知识

    注意大小写一定不能弄错. 属性: Attributes 存储节点的属性列表(只读) childNodes 存储节点的子节点列表(只读) dataType 返回此节点的数据类型 Definition 以DTD或XML模式给出的节点的定义(只读) Doctype 指定文档类型节点(只读) documentElement 返回文档的根元素(可读写) firstChild 返回当前节点的第一个子节点(只读) Implementation 返回XMLDOMImplementation对象 lastChil

随机推荐