页面

分类

Javascript性能标注

2014/3/13, by wingfire ; 分类: 计算机技术; 0 comments
  1. 加载javascript时会阻塞页面渲染,且某些旧浏览器载入js文件也不是并行载入。所以,应该将js放到html的body结束前。这样,可以尽快显示出页面。

  2. 通过js合并下载服务,可以只下载一个js。

  3. script的defer属性可阻止脚本立即执行。但只有IE4+和FireFox 3.5+支持。

  4. 动态脚本代码:

     var script = document.createElement("script");
     script.type = "text/javascript";
     script.src = "file1.js";
     document.getElementByTagName("head")[0].appendChild(script);  
    

    在FF,Opera,Chrome和Safari 3以上会在<script>接收完时出发一个load事件:

     script.onload = function(){
         alert("Script loaded!");
     };  
    
    IE 则触发readystatechange事件。script元素提供readyState属性,该属性在在下载过程中变化:
    • unintialized
    • loading
    • loaded
    • interactive 数据下载完散尚不可用
    • complete
  5. 通过XMLHttpRequest下载js,再创建script元素,设置script.text = xhr.responseText;相当于创建一个内联的<script>标签。优点是兼容性极好,缺点是不能跨域。

  6. 访问直接量和局部变量最快。数组元素和对象成员较慢。用var创建局部变量。避免使用with。跨域变量,嵌套对象成员、深的原型链都会更慢

  7. DOM天生就慢。减少调用DOM的次数,合并DOM调用。如,可以先在js中生成结果html,一次性插入DOM,而不是一个插入一个元素。

  8. DOM的集合具有实时性。比如向document插入element,其length属性会不断增加。遍历数组快于遍历集合。

  9. IE中nextSibling比childNodes快1~2个数量级。优先使用children,childElementCount, firstElementChild, lastElementChild, nextElementSibling, previousElementSibling

  10. 优先使用选择器API,document.querySelectorAll("#menu a")。

  11. 减少重绘和重排。获取布局信息科导致任务队列刷新或强制出发重排以获得最新布局信息。使用style.cssText可以一次性修改多个css属性。

  12. 可以通过el.style.display="none",使其脱离文档流,然后批量修改。再el.style.display="block"插回文档流。也可以通过绝对定位脱离文档流。

  13. 把一个文档片段附加到一个节点时,实际上附加的是该片段的子阶段,而不是片段本身。文档片段:

    var fragment = document.createDocumentFragment();
    appendDataToElement(fragment, data);
    document.getElementById("mylist").appendChild(fragment);
    
  14. 安装事件处理器有代价。可以利用冒泡,只给外层的元素添加一个监听器。

    document.getElementById('menu').onclick = function(e){
        e = e ||window.event;
        var target = e.target || e.srcElement;
    
        if (target.nodeName !== 'A'{
            return;
        }
    
        var hrefparts = target.href.split('/');
        var pagid = hrefparts[hrefparts.length - 1];
    
        ajaxRequest('xhr.php?page=' + id, updatePageConetnts);
    
        if (typeof e.preventDefault === 'function'){
            e.preventDefault();
            e.stopPropagation();
        } else {
            e.returnValue = false;
            e.cancelBubble = true;
        }
    }
    
  15. JS的for循环用var定义变量是函数级的而不是循环级的。FT。for-in很慢,是其他循环性能的1/7。

  16. 悲催的Duff's Device循环展开技术。

  17. 一项有效的计算加速技术是memoization。通过缓存以前的计算结果实现。

  18. 正则表达式:避免回溯失控。尝试简单字符串运算函数。

  19. 交互界面响应时间不应超过100ms。该数字源于Robert Miller于1968年的研究。Jacob Nielsen在其著作《可用性工程》(1944)中也有提到。Xerox-PARC于1991年的研究再次重申该数据。

  20. Web Worker的环境包括:

    1. 一个navigator对象,有四个属性:appName, appVersion, userAgent, 和platform。
    2. 一个location,同window.location,但所有属性都只读。
    3. 一个self对象,指向全局worker对象。
    4. 一个importScripts方法,用来加载Worker所用到的外部JS文件。
    5. 所有ECMAScript对象。如Object,Array,Date等。
    6. XMLHttpRequest构造器。
    7. setTimeout()和setInterval()方法。
    8. 一个close方法,他能立刻停止Worker运行。
    9. 必须提供一个JS文件名来创建Worker: var worker = new Worker("code.js");
  21. Worker通过postMessage和onmessage通信,这是唯一的方法:

    var worker = new Worker("code.js");
    worker.onmessage = function(event){
        alert(event.data);
    }
    worker.postMessage("Finger");
    

    在code.js内的代码:
    self.onmessage = function(event){ self.postMessage("Hello, " + event.data); };

    只有原始值,或Object、Array实例可以传递。有效数据会被序列化,传入或传出Worker。

  22. Multipart XHR(MXHR)可以一次一次获取多个资源。

  23. XHR发送少量数据时,GET方式会更快。因为GET只需发送一个数据包。

  24. Beacons图像信标:(new Image()).src = url + '?' + param;

  25. 正确设置过期时间。

  26. Runtime缓存。(可能适用于移动设备)

  27. 使用CDN分发JS。

  28. YUI Profiler,FireBug, Page Speed,Fiddler,YSlow, dynaTrace做性能分析。

添加评论:

 
 the email would not displayed
 

您可以使用 Markdown 语法。

您必须启用浏览器的 JavaScript 功能才能发表评论。