页面性能
1、提升页面性能都方法有哪些
1）资源压缩合并，减少http请求 2）非核心代码异步加载 － 异步加载的方式 － 异步加载的区别 3）利用浏览器缓存 － 缓存的分类 － 缓存的原理 4）使用CDN 5）预解析 <meta http-equiv="x-dns-prefetch-control" content='on'> 强制打开a标签的预解析，因为https的a标签的预解析默认是关闭的 <link rel='dns-prefetch' href='//host_name_to_prefetch.com'> dns预解析
异步加载的方式
1）动态脚本加载：一个script标签加载文本中，动态创建节点
2）defer：加载js的时候加上这个属性
3) async：加载js的时候加上这个属性
异步加载的区别
1）defer是在HTML解析完之后才会执行，如果是多个，按照加载的顺序依次执行
2）async是在加载完之后立即执行，如果是多个，执行顺序和加载顺序无关
https://www.growingwiththeweb.com/2014/02/async-vs-defer-attributes.html
defer dom
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title>
<script src="./defer1.js" charset="utf-8" defer></script>
<script src="./defer2.js" charset="utf-8" defer></script>
</head> <body> <div class=""> test <script type="text/javascript"> console.log('write'); document.write('<span>write</span>') </script> <script type="text/javascript"> for(var i=0; i<20000; i++){ if(i%20000 === 0) { console.log(i); } } </script> </div> </body> </html>
执行顺序:
write
index.html:21 0
defer1.js:1 defer1
defer2.js:1 defer2
缓存的分类：文件在浏览器里面的备份，放在磁盘里面，下次先去磁盘请求
1）强缓存：这段时间内，磁盘里面的直接拿来用
Expires Expires:Thu,21 Jan 2017 23:39:02 GMT（过期时间，绝对时间，比对的是客户端时间，下发的是服务器时间）
Cache-Control Cache-Control:max-age=3600 （相对时间，不管跟客户端的时间是不是一致，在这个时间内都会在磁盘里面拿文件）
＊：两个缓存都下发了，以后者为准
2）协商缓存：不确定磁盘里面的文件能不能用，是否过期了
Last-Modified If-Modified-Since Last-Modified:Wed,26 Jan 2017 00:35:11 GMT（时间）
Etag If-None-Match（解决修改时间变了，内容没有变，要不要请求本地）
性能优化的原则
1、多使用内存、缓存或者其他方法
2、减少cpu计算，减少网络请求
加载资源优化
1、静态资源的压缩合并（3个js合并成1个js，只需要请求一次）
2、静态资源缓存（同样一个文件，不需要再次请求）
3、使用CDN让资源加载更快（请求离的最近的机房）
https://cdn.bootccss.com/xxxx
4、使用ssr(server send render)后端渲染，数据直接输出到html中
vue，react提出的概念（jsp,php,asp都属于后端渲染）
渲染优化
1、css放前面，js放后面
2、懒加载（图片懒加载，下拉加载更多）
先默认一个小图片，后面再加载大图片
3、减少dom查询，对dom查询做缓存
4、减少dom操作，多个操作尽量合并在一起执行
5、事件节流
输入很快的时候，没有必要不断的触犯change操作
6、尽早执行操作（DOMContentloaded）
