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

2017-10-07 本文已影响212人飞菲fly

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解析效果是非常明显的；

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

猜你喜欢

热点阅读