前端面试准备--11.js页面性能类

字数 1153阅读 434

JS页面性能类
1.提升页面性能的方法有哪些?

  • 资源压缩合并,减少HTTP请求(资源传输的过程变小);

  • 非核心的代码异步加载—异步加载的方式—异步加载的区别;

    • 异步加载的方式:
      1.动态脚本加载
      —js创建了一个标签,把标签最后加到body上去或者head(加到文档当中实现加载)
      document.createElement(“*”);
      2.defer
      3.async
      2.3怎么用:在加载js时候在script标签上加这两个属性完成异步加载;
      • 异步加载的区别:
        1.defer是在HTML解析完之后才会执行,如果是多个,按照加载顺序依次执行;
        2.async是在加载完之后立即执行,如果是多个,执行顺序和加载顺序无关;
      • 异步加载原理:(任何一个时刻都只能做一件事)
        1.defer:新加载的,在HTML解析完之前,是不会执行的;
        defer能保证按你的加载顺序依次执行;
        2.async:
        哪个先回来,哪个先执行,和加载顺序无关;
    • 示例:
      1.defer
      两个文件:
      defer1.js console.log(‘defer1’);
      defer2.js console.log(‘defer2’);
      head头部插入:
      <script src=“./defer1.js” charset=“utf-8” defer></script>
      <script src=“./defer2.js” charset=“utf-8” defer></script>
      body:
      //内联到DOM中的是做同步执行的
      <div class=“div”>
      test
      <script type=“text/javascript”>
      document.write(‘<span>write</span>’);
      </script>
      <script type=“text/javascript”>
      for(var i=0; i<2000000; i++){
      if(i%2000000===0){
      console.log(i);
      }
      }
      </script>
      </div>
      执行顺序:先执行write,再执行for循环,最后执行异步加载js
      (defer1,defer2—在这异步加载是等到同步加载之后执行的)

    2.async
    两个文件:
    async1.js console.log(‘async1’);
    async2.js console.log(‘async2’);
    head头部插入:
    <script src=“./async1.js” charset=“utf-8” defer></script>
    <script src=“./async2.js” charset=“utf-8” defer></script>
    body:
    //内联到DOM中的是做同步执行的
    <div class=“div”>
    test
    <script type=“text/javascript”>
    document.write(‘<span>write</span>’);
    </script>
    <script type=“text/javascript”>
    for(var i=0; i<2000000; i++){
    if(i%2000000===0){
    console.log(i);
    }
    }
    </script>
    </div>
    执行顺序:先执行write,再执行for循环,最后执行异步加载js(因为是本地文件,加载速度比较快,所以执行顺序是按顺序的)
    如果把async1.js换成大的js文件,async2.js文件小,加载快,就有可能会在前面执行

  • 利用浏览器缓存—缓存的分类—缓存的原理;
    1.缓存的分类:

缓存:对应文件在浏览器中存在的备份(副本),把请求的东西缓存到本地了(是放在电脑磁盘中的),浏览器下次请求相当于是从这个磁盘直接读了,而不会再去请求这个文件的地址。

1.强缓存:

http协议头:
Expires       Expires:Thu,21 Jan 2017 23:39:02 GMT
Cache-Control      Cahe-Control : Max-age=3600 

强缓存:问都不问,不直接请求,直接拿过来就用了; 不管是绝对时间还是相对时间,这个时间过期之前不会和服务器通信了,直接从浏览器副本拿出来给页面用;

HTTP协议头:
 在请求一个文件的时候,http头上(响应头上)会带两个东西(有可能是2个,也有可能是1个,根据服务器配置);

 响应头中会有key,value 
 Expires  过期时间; value值表示的是绝对时间(服务器的绝对时间,这个时间是服务器下发的)
          判断客户端当前的时候是不是这个时间,比较的时候是按浏览器本地的时间做比较,下发的是服务器端的时间,会有偏差;
 缺点:有可能客户端和服务器的时间不一致。

Cache-Control   value值   Max-age=3600(相对时间)
         不管客户端和服务器时间是否一致,它最后是以客户端相对时间为止,时间单位是秒(拿到资源之后再3600s之内不会再去请求服务器,在这个时间之内直接去浏览器拿缓存)

*如果服务器两个时间都下发了,依哪个时间为准呢?
以后者相对时间为准(这个规定)

2.协商缓存:

Last-Modified If-Modified-Since   Last-Modified:Wed,26 Jan 2017 00:35:11 GMT
Etag   If-None-Match        

协商缓存:浏览器发现本地有这个副本,但是又不确定用不用它,去服务器问一个这个文件要不要用(和服务器协商这个文件能不能用,过期没有)

Last-Modified(服务器下发的上次修改的时间)
        在拿到这个文件的时候,浏览器会给这个资源文件的http响应头中加一个Last-Modified,value值就是时间;
If-Modified-Since:(请求中给服务器带的,服务器要对比,所以一来一回,两个东西)
        当强缓存失效(过期了),浏览器在这个时间之外又开始请求了,不确定这个东西有没有变化,要携带上次给的时间
        是哪一个,请求的时候会以携带这个字段的时间。(拿到新资源文件,会通过Last-Modified下发一个时间,当下次请求问服务器这个资源有没有发生变化,是用http请求
        头中加If-Modified-Since(key值),他们两个值是一个)
*缺点:虽然hash值变了,内容并没有变化,完全可以从副本拿,Etag就是解决这个问题的。
Etag(哈希值):
    服务器给你这个资源的时候会给一个Etag值,当过了强缓存的时间,浏览器在问服务器请求问它这个资源可不可以在用的时候,
    会通过这个http中加一个key值(If-None-Math)一个value,那么value就是发的那个Etag值。
If-None-Match

和缓存相关的http头有哪些?能写出来几个?

Expires
Cache-Control
Last-Modified
Etag
If-None-Match
缓存可以提升性能;

  • 使用CDN(网络优化,CDN加载资源非常快);
    CDN可以让客户以最快的时间把资源请求过来;
    (让网络快速到达服务器端把文件下载下来;)
    当页面第一次打开的时候,浏览器缓存是起不了作用的,使用CDN效果是非常明显的;
    预解析DNS
    <meta http-equiv=“x-dns-prefetch-control” content=“on”>
    -页面中所有的a标签,在一些高级浏览器中默认打开了DNS预解析的;(不加这句话,a标签也是可以做到DNS预解析的,这是浏览器的一个功能;)但是如果你的页面是https协议头的,很多浏览器是默认关闭DNS预解析的。这句话是强制打开a标签的DNS预解析。

    • 怎么使用预解析DNS呢?就是使用下面的语句:
      <link rel=“dns-prefetch” href=“//host_name_to_prefetch.com”>

    • 从浏览器输入一个url到页面真正渲染完中间发生了哪些环节?
      -第一步就是DNS解析,当你的页面涉及多个域名的时候,DNS解析效果是非常明显的;

推荐阅读更多精彩内容