• 让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线程,专注于处理数据。

      

  • 相关阅读:
    【Nginx 快速入门】反向代理、负载均衡、动静分离
    【Redis】缓存穿透、缓存击穿、缓存雪崩(面试必备)
    【Redis】特殊数据类型
    【Redis】特殊数据类型
    【Redis】特殊数据类型
    typescript 技巧学习
    angular9的学习(十九)
    angular11源码探索二十六[Router整体路由配置]
    angular11源码探索二十五[Router路由事件]
    angular11源码探索二十四[路由检测变更策略]
  • 原文地址:https://www.cnblogs.com/yingsmirk/p/2591383.html
Copyright © 2020-2023  润新知