• 让javascript飞听技术分享会总结


      首先,必须熟悉的是雅虎的那一套http://developer.yahoo.com/performance/rules.html英文原版,很详细,当然也可以去网上so中文版的。

      下面列出在技术分享会上的一些需要注意的点:

      1、引入js最好在文档的底部,当然也要根据具体情况而定。

      2、合并脚本,减少HTTP请求数量,我们一般有两种解决方案:

        ①.在发布之前,就把多个脚本合并成一个脚本。

        ②.在请求的时候,src="1.js,2.js……",这样通过一次http请求,就能加载多个js文件

      3、无阻塞的脚本

        ①.defer属性,但是有兼容性的问题,只有IE支持此属性。

        ②.动态脚本:loadscript 一般来说,在 HTML 页面中应该只加载基本的 JS 文件,以使得页面能够尽快地显示出来,然后在页面载入完毕之后,利用 onload 事件再载入其它 JS 文件,动态加载 JS 文件的方法很简单,可以用下面的函数来实现:

    var loadScript = function(url) {
      var script = document.createElement("script");
      script.type = "text/javascript";
      script.src = url;
      document.body.appendChild(script);
    };

        这样增加的 script 元素,它的内容不一定是立即下载并执行的。如果我们想知道这个 JS 文件何时已经下载并执行完毕,然后运行后面的依赖代码,可以用下面的方法来判断(下面例子来自《高性能 JavaScript 编程》):

    var loadScript = function(url, callback) {
      var script = document.createElement("script");
      script.type = "text/javascript";
      script.src = url;
      if (script.readyState) {
        script.onreadystatechange = function() {
          if (script.readyState == "loaded" || script.readyState == "complete") { 
            script.onreadystatechange = null;
            callback(); 
          }
        };
      } else {
        script.onload = function() { callback(); }; 
      }
      document.body.appendChild(script);
    };

        其中 IE 浏览器不支持 script 元素的 onload 事件,因此我们改用 onreadystatechange 事件

        ③.XHR脚本注入:分离了下载和执行,但不能跨域,意味着不能从CDN下载文件。

      4、理解作用域链、理解闭包,注意IE闭包内存泄漏等。

           http://www.ibm.com/developerworks/web/library/wa-memleak/?S_TACT=105AGX52&S_CMP=cn-a-wa

           http://msdn.microsoft.com/en-us/library/bb250448.aspx

        尽量减少with和eval的使用,try catch也会改变作用域。

      5、访问DOM需要注意,HTML集合是一个非常昂贵的东西,每一次访问HTML集合都需要重新计算一次,所以我们在使用html集合的一些属性的时候,最后把他用变量保存下来,而不是每次都去访问。

      6、重绘重排:dom树、渲染树。每次页面布局和几何属性改变时都需要重排

        ①.合并dom和样式的修改

        ②.离线操作dom

        ③.缓存布局信息

      7、UI线程

        ①.使用定时器让出时间片

        ②.web workers,实现多线程,独立于UI线程,专注于处理数据。

      

  • 相关阅读:
    DOM笔记(二):Node接口
    DOM笔记(一):HTMLDocument接口
    mysql_connect v/s mysql_pconnect
    HTML 5:绘制旋转的太极图
    HTML 5:你必须知道的data属性
    CSS:7个你可能不认识的单位
    CSS 3的display:盒类型详解
    PHP:6种GET和POST请求发送方法
    asp.net mvc生命周期学习
    关于sql row_number,rank,dense_rank,ntile函数
  • 原文地址:https://www.cnblogs.com/yingsmirk/p/2591383.html
Copyright © 2020-2023  润新知