1、资源压缩合并，减少HTTP请求

2、**非核心代码异步加载→异步加载的方式→异步加载的区别

异步加载的方式：
    1.动态脚本加载 2.defer(只有ie可用) 3.async
异步加载的区别
    1）defer是在html解析完之后才会执行，如果是多个，按照加载的顺序依次执行，可以将代码写到内部<script defer> xxx; </script>
    2）async是在加载完之后立即执行，如果是多个，执行顺序和加载顺序无关;只能加载外部脚本<script src="a.js" async></script>
    3）创建script，插入到DOM中，加载完毕后callBack
    function loadScript(url, callback){
        var script = document.createElement_x("script")
        script.type = "text/javascript";
        if (script.readyState){ //IE
            script.onreadystatechange = function(){
                if (script.readyState == "loaded" ||
                script.readyState == "complete"){
                    script.onreadystatechange = null;
                    callback();
                }
            };
        } else { 
        //Others: Firefox, Safari, Chrome, and Opera
            script.onload = function(){
                callback();
            };
        }
        script.src = url;
        document.body.appendChild(script);
    }

3、**利用浏览器缓存→缓存的分类→缓存的原理

缓存的分类(另一种考法：http请求头都包括什么)
    1）强缓存(从磁盘中直接读，不请求，直接读数据)
    直接从本地副本比对读取，不去请求服务器，返回的状态码是 200。

    请求头中的key value（如果两个同时存在，应用最后的设置）
        Expires :(时间戳/格林尼治时间)
        Expires:Thu,21 Jan 2020 19:34:00 GMT;
        (过期时间，绝对时间，服务器的时间，
         缺点：客户端与服务端的时间可能不一致)
        Coche-Control 
        Coche-Control:max-age=3600 (单位是秒) 
        （相对时间，不管客户端与服务端的时间是否一致，以客户端的相对时间为准，在这个时间内直接拿缓存数据）该字段是一个时间长度，单位秒，表示该资源过了多少秒后失效。当客户端请求资源的时候，发现该资源还在有效时间内则使用该缓存，它不依赖客户端时间
    2）协商缓存（和服务器协商再读数据）
      会去服务器比对，若没改变才直接读取本地缓存，返回的状态码是 304。

        Last-Modified 记录资源最后修改的时间。
    两个缺点：
        只要编辑了，不管内容是否真的有改变，都会以这最后修改的时间作为判断依据，当成新资源返回，从而导致了没必要的请求响应，而这正是缓存本来的作用即避免没必要的请求。
        时间的精确度只能到秒，如果在一秒内的修改是检测不到更新的，仍会告知浏览器使用旧的缓存。
        If-Modified-Since 
        If-Modified:Wed,26 Jan 2020 00:35:11 GMT 
    当再次请求该资源时，请求头中会带有 if-modified-since 字段，值是之前返回的 last-modified 的值,服务端会对比该字段和资源的最后修改时间，若一致则证明没有被修改，告知浏览器可直接使用缓存并返回 304；若不一致则直接返回修改后的资源，并修改 last-modified 为新的值。

        etag: "FllOiaIvA1f-ftHGziLgMIMVkVw_"
        Etag If-None-Match 
        etag 会基于资源的内容编码生成一串唯一的标识字符串，只要内容不同，就会生成不同的 etag
        当再次请求该资源时，请求头会带有 if-no-match 字段，值是之前返回的 etag, 值服务端会根据该资源当前的内容生成对应的标识字符串和该字段进行对比，若一致则代表未改变可直接使用本地缓存并返回 304；若不一致则返回新的资源（状态码200）并修改返回的 etag 字段为新的值。
    - 缓存的原理：直接从硬盘中读取数据

5、**使用CDN

  • 不同区域的网络优化，转化到就近的网络区域

6、预解析DNS（涉及多个域名）

<meta http-equiv= "x-dns-prefetch-control" content= ="on">
<link rel="dns-prefetch" href="//host_ name_ _to_ prefetch.com">
- 从浏览器输入一个url开始到页面真的渲染完，中间发生了哪些环节
- 第一步：DNS预解析
  • a标签在浏览器中默认DNS预解析是开启的，但是如果是https协议，很多都是关闭的状态
  • 通过第一句话就是强制打开DNS预解析

7、使用SSR后端渲染，数据直接输出到html

  • Vue React提出的概念
  • 其实jsp、php、asp都属于后端渲染

8、渲染优化

1.css在前，js在后
2.懒加载（图片懒加载，下拉加载更多）
3.减少dom查询，对dom查询做缓存
4.减少dom操作，多个dom操作尽量合在一起（dom消耗非常大）
5.事件节流
6.尽早执行操作（domcontentloaded和onload）

  • 防抖（debounce）：任务频繁触发情况下，只有任务触发的间隔超过指定间隔的时候，任务才会执行。

  • 节流（throttle）：指定时间间隔内只会执行一次任务。
    防抖与节流的原理：使用setTimeout来存放将要执行的函数。其中函数节流就是利用标记符来控制本次执行完毕。函数防抖就是利用clearTimeout来清楚执行的函数。目的为了节约计算机资源，从而达到一个更好的运行效果。
    事件节流

  • 原理：例如打字，输入的快，事件就会多次触发