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