JavaScript性能优化

最新推荐文章于 2021-07-12 23:21:29 发布
最新推荐文章于 2021-07-12 23:21:29 发布
阅读量628 收藏
点赞数
分类专栏： JQuery
  • 变量查找优化
  • 核心语法优化
  • 脚本装载优化
  • DOM操作优化
  • 事件优化
  • 动画优化

    变量查找优化

    变量声明带上var

    1. 如果声明变量忘记了var，那么js引擎将会遍历整个作用域查找这个变量，结果不管找到与否，都是悲剧。

    • 如果在上级作用域找到了这个变量，上级作用域变量的内容将被无声的改写，导致莫名奇妙的错误发生。
    • 如果在上级作用域没有找到该变量，这个变量将自动被声明为全局变量，然而却都找不到这个全局变量的定义。

    2. 基于上面逻辑，性能方面不带var声明变量自然要比带var速度慢

    具体可以参考http://jsperf.com/withvar-withoutvar。下面是个简单的结果截图，蓝色为带var的情况，越长说明 速度越快。

    image

    慎用全局变量

    1. 全局变量需要搜索更长的作用域链。

    2. 全局变量的生命周期比局部变量长，不利于内存释放。

    3. 过多的全局变量容易造成混淆，增大产生bug的可能性。

    全局变量与局部变量的测试可以参考http://jsperf.com/local-global-var

    以上两条还可以得出一条JavaScript常用的编程风格，具有相同作用域变量通过一个var声明 。

    这样方便查看该作用域所有的变量，JQuery源代码中就是用了这种风格。例如下面源代码

    https://github.com/jquery/jquery/blob/master/src/core.js

    ?
    1
    2
    3
    4
    jQuery.extend = jQuery.fn.extend = function () {
    var options, name, src, copy, copyIsArray, clone,target = arguments[0] || {},i = 1,length =
    arguments.length,deep = false ;

    缓存重复使用的全局变量

    1. 全局变量要比局部变量需要搜索的作用域长

    2. 重复调用的方法也可以通过局部缓存来提速

    3. 该项优化在IE上体现比较明显

    缓存与不缓存变量的测试可以参考http://jsperf.com/localvarcache

    JQuery源代码中也是用了类似的方法，https://github.com/jquery/jquery/blob/master/src/selector-native.js

    ?
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    var docElem = window.document.documentElement, selector_hasDuplicate,
    matches = docElem.webkitMatchesSelector || docElem.mozMatchesSelector || docElem.oMatchesSelector ||
    docElem.msMatchesSelector,
    selector_sortOrder = function ( a, b ) {
    // Flag for duplicate removal
    if ( a === b ) {
        selector_hasDuplicate = true ;
        return 0;
    }

    避免使用with

    with语句将一个新的可变对象推入作用域链的头部，函数的所有局部变量现在处于第二个作用域链对象中，从而使局部变 量的访问代价提高。

    ?
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    var person = {
        name: “Nicholas",
        age: 30
    }
    function displayInfo() {
        var count = 5;
        with (person) {
            alert(name + ' is ' + age);
            alert( 'count is ' + count);
        }
    }

    以上代码的结果将name和age两个变量推入第一个作用域，如下图所示，

    image

    使用with与不使用with的测试可以参考http://jsperf.com/with-with

    核心语法优化

    通过原型优化方法定义

    1. 如果一个方法类型将被频繁构造，通过方法原型从外面定义附加方法，从而避免方法的重复定义。
    2. 可以通过外 部原型的构造方式初始化值类型的变量定义。（这里强调值类型的原因是，引用类型如果在原型中定义， 一个实例对引用类型的更改会影响到其他实例。）

    这条规则中涉及到JavaScript中原型的概念，

    • 构造函数都有一个prototype属性，指向另一个对象。这个对象的所有属性和方法，都会被构造函数的实例继承。我们可 以把那些不变的属性和方法，直接定义在prototype对象上。
    • 可以通过对象实例访问保存在原型中的值，不能通过对象实例重写原型中的值。
    • 在实例中添加一个与实例原型同名属性，那该属性就会屏蔽原型中的属性。
    • 通过delete操作符可以删除实例中的属性。

    例如以下代码以及相应的内存中原型表示如下，

    ?
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    function Person(){}
    Person.prototype.name = "Nicholas" ;
    Person.prototype.age = 29;
    Person.prototype.job = "Software Engineer" ;
    Person.prototype.sayName = function (){
        alert( this .name);
    };
    var person1 = new Person();
    person1.sayName(); //”Nicholas”
    var person2 = new Person();
    person2.sayName(); //”Nicholas”

    image

    原型附加方法测试可以参考http://jsperf.com/func-constructor

    原型附加值类型变量测试可以参考http://jsperf.com/prototype2

    避开闭包陷阱

    1. 闭包是个强大的工具，但同时也是性能问题的主要诱因之一。不合理的使用闭包会导致内存泄漏。

    2. 闭包的性能不如使用内部方法，更不如重用外部方法。

    由于IE浏览器的DOM是用COM来实现的， COM的内存管理是通过引用计数的方式，引用计数有个难题就是循环引用，一旦DOM 引用了闭包(例如event handler)，闭包的上层元素又引用了这个DOM，就会造成循环引用从而导致内存泄漏。

    Figure 2 Circular References with Closures

    关于Js内存泄漏可以参考

    http://www.crockford.com/javascript/memory/leak.html

    http://msdn.microsoft.com/en-us/library/bb250448%28v=vs.85%29.aspx

    闭包与非闭包的测试http://jsperf.com/closure2

    避免使用属性访问方法

    1. JavaScript不需要属性访问方法，因为所有的属性都是外部可见的。
    2. 添加属性访问方法只是增加了一层重定向 ，对于访问控制没有意义。

    使用属性访问方法示例

    ?
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    function Car() {    
      this .m_tireSize = 17;    
      this .m_maxSpeed = 250;
      this .GetTireSize = Car_get_tireSize;    
      this .SetTireSize = Car_put_tireSize;
    }
    function Car_get_tireSize() {    
      return this .m_tireSize;
    }
    function Car_put_tireSize(value) {    
      this .m_tireSize = value;
    }
    var ooCar = new Car();
    var iTireSize = ooCar.GetTireSize();
    ooCar.SetTireSize(iTireSize + 1);

    直接访问属性示例

    ?
    1
    2
    3
    4
    5
    6
    7
    function Car() {    
      this .m_tireSize = 17;    
      this .m_maxSpeed = 250;
    }
    var perfCar = new Car();
    var iTireSize = perfCar.m_tireSize;
    perfCar.m_tireSize = iTireSize + 1;

    使用属性访问与不使用属性访问的测试http://jsperf.com/property-accessor

    避免在循环中使用try-catch

    1. try-catch-finally语句在catch语句被执行的过程中会动态构造变量插入到当前域中，对性能有一定影响。
    2. 如 果需要异常处理机制，可以将其放在循环外层使用。

    循环中使用try-catch

    ?
    1
    2
    3
    for ( var i = 0; i < 200; i++) {
    try {} catch (e) {}
    }

    循环外使用try-catch

    ?
    1
    2
    3
    try {
    for ( var i = 0; i < 200; i++) {}
    } catch (e) {}

    循环内与循环外使用try-catch的测试http://jsperf.com/try-catch

    使用for代替for…in…遍历数组

    for…in…内部实现是构造一个所有元素的列表，包括array继承的属性，然后再开始循环。相对for循环性能要慢。

    StackOverflow上对这个for和for in的问题有个经典的回答，直接原文引用，

    Q: I've been told not to use "for...in" with arrays in JavaScript. Why not?

    A: The reason is that one construct...

    ?
    1
    2
    3
    4
    5
    6
    <code> var a = [];
    a[5] = 5; // Perfectly legal JavaScript that resizes the array.
    for ( var i=0; i<a.length; i++) {
        // Iterates over numeric indexes from 0 to 5, as everyone expects.
    }</code>

    can sometimes be totally different from the other...

    ?
    1
    2
    3
    4
    5
    <code> var a = [];
    a[5] = 5;
    for ( var x in a) {
        // Shows only the explicitly set index of "5", and ignores 0-4
    }</code>

    Also consider that JavaScript libraries might do things like this, which will affect any array you create:

    ?
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    <code> // Somewhere deep in
    your JavaScript library...
    Array.prototype.foo = 1;
    // Now you have no idea what the below code will do.
    var a = [1,2,3,4,5];
    for ( var x in a){
        // Now foo is a part of EVERY array and
        // will show up here as a value of 'x'.
    }</code>

    关于for和for…in…的测试可以看http://jsperf.com/forin

    使用原始操作代替方法调用

    方法调用一般封装了原始操作，在性能要求高的逻辑中，可以使用原始操作代替方法调用来提高性能。

    原始操作

    ?
    1
    var min = a < b ? a : b;

    方法实例

    ?
    1
    var min = Math.min(a, b);

    关于方法调用和原始操作的测试参考http://jsperf.com/operator-function

    传递方法取代方法字符串

    一些方法例如setTimeout()/setInterval()，接受字符串或者方法实例作为参数。直接传递方法对象作为参数来避免对字 符串的二次解析。

    传递方法

    ?
    1
    setTimeout(test, 1);

    传递方法字符串

    ?
    1
    setTimeout( 'test()' , 1);

    对应的测试可以参考http://jsperf.com/string-function

    脚本装载优化

    使用工具精简脚本

    精简代码就是将代码中的空格和注释去除，也有更进一步的会对变量名称混淆+精简。

    根据统计精简后文件大小平均减少21%，即使Gzip之后文件也会减少5%。

    常用的工具如下，

    例如Closure Compiler效果如下，

    image

    启用Gzip压缩

    Gzip通常可以减少70%网页内容的大小，包括脚本、样式表、图片等文件。Gzip比deflate更高效，主流服务器都有相应的 压缩支持模块。

    Gzip的工作流程为

    • 客户端在请求Accept-Encoding中声明可以支持gzip
    • 服务器将请求文档压缩，并在Content-Encoding中声明该回复为gzip格式
    • 客户端收到之后按照gzip解压缩

    image

    设置Cache-Control和Expires头

    通过Cache-Control和Expires头可以将脚本文件缓存在客户端或者代理服务器上，可以减少脚本下载的时间。

    ?
    1
    2
    3
    4
    5
    6
    7
    8
    9
    Expires格式:
    Expires = "Expires" ":" HTTP-date
    Expires: Thu, 01 Dec 1994 16:00:00 GMT
    Note: if a response includes a Cache-Control field with the max-age directive that directive overrides the
    Expires field.
    Cache-Control格式：
    Cache-Control   = "Cache-Control" ":" 1#cache-directive
    Cache-Control: public

    具体的标准定义可以参考http1.1中的定义，简单来说Expires控制过期时间是多久，Cache-Control控制什么地方可以缓存 。

    http://www.w3.org/Protocols/rfc2616/rfc2616-sec14.html#sec14.21

    http://www.w3.org/Protocols/rfc2616/rfc2616-sec14.html#sec14.9

    异步加载脚本

    脚本加载与解析会阻塞HTML渲染，可以通过异步加载方式来避免渲染阻塞。

    异步加载的方式很多，比较通用的方法是通过类似下面的代码实现，

    ?
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    function loadjs
    (script_filename){
        var script = document.createElement( 'script' );
        script.setAttribute( 'type' , 'text/javascript' );
        script.setAttribute( 'src' , script_filename);
        script.setAttribute( 'id' , 'script-id' );
        scriptElement = document.getElementById( 'script-id' );
        if (scriptElement){
            document.getElementsByTagName( 'head' )[0].removeChild(scriptElement);
        }
        document.getElementsByTagName( 'head' )[0].appendChild(script);
    }
    var script = 'scripts/alert.js' ;
    loadjs(script);

    DOM操作优化

    DOM操作性能问题主要有以下原因，

    • DOM元素过多导致元素定位缓慢
    • 大量的DOM接口调用
    • DOM操作触发频繁的reflow(layout)和repaint

    关于reflow(layout)和repaint可以参考下图，可以看到layout发生在repaint之前，所以layout相对来说会造成更多性能 损耗。

    • reflow(layout)就是计算页面元素的几何信息
    • repaint就是绘制页面元素

    image

    以下是一个wikipedia网站reflow的过程录像，

    减少DOM元素数量

    1. 在console中执行命令查看DOM元素数量

    ?
    1
        document.getElementsByTagName( '*' ).length

    2. Yahoo首页DOM元素数量在1200左右。正常页面大小一般不应该超过 1000。
    3. DOM元素过多会使DOM元素查询效率，样式表匹配效率降低，是页面性能最主要的瓶颈之一。

    优化CSS样式转换

    如果需要动态更改CSS样式，尽量采用触发reflow次数较少的方式。

    例如以下代码逐条更改元素的几何属性，理论上会触发多次reflow

    ?
    1
    2
    3
    element.style.fontWeight = 'bold' ;
    element.style.marginLeft= '30px' ;
    element.style.marginRight = '30px' ;

    可以通过直接设置元素的className直接设置，只会触发一次reflow

    ?
    1
    2
    3
    element.className =
    'selectedAnchor' ;

    具体的测试结果如下，

    image

    测试用例可以参考http://jsperf.com/css-class

    优化节点添加

    多个节点插入操作，即使在外面设置节点的元素和风格再插入，由于多个节点还是会引发多次reflow。优化的方法是创建 DocumentFragment，在其中插入节点后再添加到页面。

    例如JQuery中所有的添加节点的操作如append，都是最终调用documentFragment来实现的，

    http://code.jquery.com/jquery-1.10.2.js

    ?
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    function
    createSafeFragment( document ) {
        var list = nodeNames.split( "|" ),
            safeFrag = document.createDocumentFragment();
        if ( safeFrag.createElement ) {
            while ( list.length ) {
                safeFrag.createElement(
                    list.pop()
                );
            }
        }
        return safeFrag;
    }

    关于documentFragment对比直接添加节点的测试http://jsperf.com/fragment2

    优化节点修改

    对于节点的修改，可以考虑使用cloneNode在外部更新节点然后再通过replace与原始节点互换。

    ?
    1
    2
    3
    4
    5
    6
    7
    8
    9
    var orig = document.getElementById( 'container' );
    var clone = orig.cloneNode( true );
    var list = [ 'foo' , 'bar' , 'baz' ];
    var contents;
    for ( var i = 0; i < list.length; i++) {
      content = document.createTextNode(list[i]);
      clone.appendChild(content);
    }
    orig.parentNode.replaceChild(clone, orig);

    对应的测试可以参考http://jsperf.com/clone-node2

    减少使用元素位置操作

    一般浏览器都会使用增量reflow的方式将需要reflow的操作积累到一定程度然后再一起触发，但是如果脚本中要获取以下 属性，那么积累的reflow将会马上执行，已得到准确的位置信息。

    • offsetLeft
    • offsetTop
    • offsetHeight
    • offsetWidth
    • scrollTop/Left/Width/Height
    • clientTop/Left/Width/Height
    • getComputedStyle()

    具体讨论可以参考这个链接http://www.stubbornella.org/content/2009/03/27/reflows-repaints-css- performance-making-your-javascript-slow/#comment-13157

    避免遍历大量元素

    避免对全局DOM元素进行遍历，如果parent已知可以指定parent在特定范围查询。

    例如以下示例，

    ?
    1
    2
    3
    4
    var elements = document.getElementsByTagName( '*' );
    for (i = 0; i < elements.length; i++) {
      if (elements[i].hasAttribute( 'selected' )) {}
    }

    如果已知元素存在于一个较小的范围内，

    ?
    1
    2
    3
    4
    5
    6
    var elements = document.getElementById
    ( 'canvas' ).getElementsByTagName( '*' );
    for (i = 0; i < elements.length; i++) {
      if (elements[i].hasAttribute( 'selected' )) {}
    }
    ?
    1

    相关测试可以参考http://jsperf.com/ranged-loop

    事件优化

    使用事件代理

    1. 当存在多个元素需要注册事件时，在每个元素上绑定事件本身就会对性能有一定损耗。
    2. 由于DOM Level2事件模 型中所有事件默认会传播到上层文档对象，可以借助这个机制在上层元素注册一个统一事件对不同子元素进行相应处理。

    捕获型事件先发生。两种事件流会触发DOM中的所有对象，从document对象开始，也在document对象结束。

    http://www.w3.org/TR/2003/NOTE-DOM-Level-3-Events-20031107/events.html

    image

    示例代码如下

    <ul id="parent-list">
	<li id="post-1">Item 1
	<li id="post-2">Item 2
	<li id="post-3">Item 3
	<li id="post-4">Item 4
	<li id="post-5">Item 5
	<li id="post-6">Item 6
</li></ul>

    // Get the element, add a click listener...
document.getElementById("parent-list").addEventListener("click",function(e) {
	// e.target is the clicked element!
	// If it was a list item
	if(e.target && e.target.nodeName == "LI") {
		// List item found!  Output the ID!
		console.log("List item ",e.target.id.replace("post-")," was clicked!");
	}
});

    对应的测试可以参考http://jsperf.com/event- delegate

    动画优化

    动画效果在缺少硬件加速支持的情况下反应缓慢，例如手机客户端

    特效应该只在确实能改善用户体验时才使用，而不应用于炫耀或者弥补功能与可用性上的缺陷

    至少要给用户一个选择可以禁用动画效果

    设置动画元素为absolute或fixed

    position: static 或position: relative元素应用动画效果会造成频繁的reflow

    position: absolute或position: fixed 的元素应用动画效果只需要repaint

    关于position的具体介绍可以参考

    http://css- tricks.com/almanac/properties/p/position/

    使用一个timer完成多个元素动画

    setInterval和setTimeout是两个常用的实现动画的接口，用以间隔更新元素的风格与布局。

    动画效果的帧率最优化的情况是使用一个timer完成多个对象的动画效果，其原因在于多个timer的调用本身就会损耗一定 性能。

    setInterval(function() {
  animateFirst('');
}, 10);
setInterval(function() {
  animateSecond('');
}, 10);

    使用同一个timer，

    setInterval(function() {
  animateFirst('');
  animateSecond('');
}, 10);

    以上是JavaScript性能提高的技巧总结，基本上都能够通过测试验证，但是限于篇幅没有把所有的测试结果都 贴出来。

     

    原文链接：http://www.cnblogs.com/developersupport/p/3491370.html

bbl_bbg
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
javascript性能优化
05-25
javascript性能优化javascript性能优化
Javascript 性能优化
weixin_33866037的博客
05-06 137
Javascript最初是解释型语言，现在，主流浏览器内置的Javascript引擎基本上都实现了Javascript的编译执行，即使如此，我们仍需要优化自己写的Javascript代码，以获得最佳性能。 注意作用域 避免全局作用域 在之前的文章Javascript 变量、作用域和内存问题提到过，由于访问变量需要在作用域链上进行查找，相比...
javaScript的性能优化
weixin_33774883的博客
12-15 49
随着网络的发展，网速和机器速度的提高，越来越多的网站用到了丰富客户端技术。而现在Ajax则是最为流行的一种方式。JavaScript是一种解释型语言，所以能无法达到和C/Java之类的水平，限制了它能在客户端所做的事情，为了能改进他的性能，我想基于我以前给JavaScript做过的很多测试来谈谈自己的经验，希望能帮助大家改进自己的JavaScript脚本性能。语言层次方面 循环 循环是...
JavaScript性能优化的小知识总结共23页.pdf
最新发布
11-21
以下是一些关于JavaScript性能优化的关键知识点： 1. **延迟加载（Lazy Loading）**：为了提高页面加载速度，可以使用延迟加载策略，如图片懒加载，只在用户滚动到可视区域时才加载资源。 2. **代码分割（Code ...
JavaScript性能优化技巧分享共8页.pdf.zip
10-30
本文将深入探讨JavaScript性能优化的若干关键技巧，帮助你提升应用的运行效率和用户体验。 1. **代码结构优化** - **减少DOM操作**：DOM（Document Object Model）操作是JavaScript性能的主要瓶颈之一。尽量通过...
JavaScript 性能优化
wwb0517的博客
07-12 148
性能优化是不可避免的 哪些内容可以看做是性能优化 无处不在的前端性能优化 JavaScript 语言的优化：内存管理、垃圾回收与常见的GC算法、v8引擎的垃圾回收、performance工具、代码优化事例 1、JavaScript 内存管理 内存：由可读写单元组成，表示一片可操作空间 管理：人为的去操作一片空间的申请、使用和释放 内存管理：开发者主动申请空间、使用空间、释放空间 管理流程：申请—使用—释放 JavaScript 中的内存管理：申请内存空间、使用内存空间、释放内存空间 2、
JavaScript之性能优化
张鹏~IT~少年人的博客
12-23 1938
一、脚本应该放在页面元素代码之后 页面的下载和渲染都必须停下来等待脚本执行完成。JavaScript 执行过程耗时越久，浏览器等待响应用户输入的时间就越长。浏览器在下载和执行脚本时出现阻塞的原因在于，脚本可能会改变页面或JavaScript的命名空间，它们会对后面页面内容造成影响。 二、避免全局查找 function search() { //当我要使用当前页面地址和主机域名 ale...
Javascript性能优化
fish_04818的博客
02-03 81
Javascript性能优化内存优化的必要性内存管理介绍JavaScript 中的内存管理JavaScript 中的垃圾回收JavaScript 中的可达对象GC 定义与作用GC 里的垃圾是什么GC 算法是什么 内存优化的必要性 function fn(): void { const arrList = []; arrList[100000] = 'lg is a coder'; } fn(); 内存管理介绍 内存：由可读写单元组成，表示一片可操作空间 管理：人为地操作一片空间的申请、使用和释放
Web前端性能优化的实用技巧汇总
qf2019的博客
05-08 620
今天小编要跟大家分享关于Web前端性能优化的实用技巧汇总。 javascript在浏览器中运行的性能，可以认为是开发者所面临的最严重的可用性问题。这个问题因为javascript的阻塞性而变得复杂，事实上，多数浏览器使用单一进程来处理用户界面和js脚本执行，所以同一时刻只能做一件事。js执行过程耗时越久，浏览器等待响应的时间越长。 一.提高加载性能 1.IE8,FF,3.5,Safari 4和Chrome都允许并行下载js文件，当script下载资源时不会阻塞其他script的下载。但是js下载仍然会阻塞其
js优化1
08-08
JavaScript的加载和执行在浏览器中的性能是开发者所要...通过将JavaScript代码放在页面底部、使用defer和async属性、进行代码拆分和懒加载等方法，可以有效地优化JavaScript的加载和执行，从而提升页面的性能和可用性。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值