从一道经典的前端面试题---谈前端性能优化

国服第一摸鱼选手

在浏览器中输入一个网址后，发生了什么？

这是一道非常经典的面试题，包含前端大部分的基础知识点。

第一步浏览器通过DNS查找该域名的 IP 地址
第二步浏览器根据解析得到的IP地址向 web 服务器发送一个 HTTP 请求
第三步服务器收到请求并进行处理
第四步服务器返回一个响应
第五步浏览器对该响应进行解码，解析html为dom、解析css 为css-tree、dom+ css 生成render-tree 绘图
第六步页面显示完成后，浏览器发送异步请求。
第七步整个过程结束之后，浏览器关闭TCP连接。

我们先总结一下这些步骤中，有哪些性能优化的点：

dns预加载
减少加载的文件

一、DNS 预解析

DNS 解析也是需要时间的，可以通过预解析的方式来预先获得域名所对应的 IP。这样就能节省第一步通过域名查找ip的时间。

<link rel="dns-prefetch" href="//www.zhihu.com"> 
复制代码

二、减少加载文件，浏览器缓存

通常浏览器缓存策略分为两种：强缓存和协商缓存，并且缓存策略都是通过设置 HTTP Header 来实现的

强缓存

强缓存不需要请求接口，每次发起http请求资源时，直接用浏览器的缓存

强缓存可以通过设置两种 HTTP Header 实现：Expires 和 Cache-Control 。强缓存表示在缓存期间不需要请求，state code为 200

协商缓存

协商缓存需要请求接口，询问后端缓存的文件是否更改，更改了就只能重新请求，没有改变就直接用缓存

如果缓存过期了，就需要发起请求验证资源是否有更新。协商缓存可以通过设置两种 HTTP Header 实现：Last-Modified 和 ETag
当浏览器发起请求验证资源时，如果资源没有做改变，那么服务端就会返回 304 状态码，并且更新浏览器缓存有效期。

从index.js的加载来看待这个问题

1.首次加载，http请求，server正常返回

返回响应头加上强缓存的说明
expires：web 11 Aug 2019 20:50:00 (过期时间)
cache-control : max-age=3000000 (时间戳，http1.1 精准，优先级高)
两个header都是后端告诉浏览器，这个文件多少时间内不过期
浏览器接受到上面两个header 就会把文件保存起来

2.1个小时内再请求这个文件

浏览器识别到强缓存命中，请求不发出，直接用本地的缓存文件，状态码是200 from cache

2个小时后，再次请求这个文件，强缓存失效，使用协商缓存

浏览器不会直接发出请求，而是问一下后端，header带上请求头
if-modified-since:日期 , 询问后端这个日期之后，这个文件有没有修改过
后端告诉没有修改过，使用缓存状态码是304 not modified
优先级更高的是etag（文件的指纹），内容不变指纹不变

4.如果后端告诉你改过了，就只能重新加载了

如何高效利用缓存

1.缓存时间过长

发布上线了，用户端还用缓存，会有bug

2.缓存时间过短

重复加载文件太多，浪费带宽

解决：

1.模板（html）不能有缓存

强缓是针对静态资源使用，动态资源需要慎用。除了服务端页面可以看作动态资源外，那些引用静态资源的html也可以看作是动态资源，如果这种html也被缓存，当这些html更新之后，可能就没有机制能够通知浏览器这些html有更新，尤其是前后端分离的应用里，页面都是纯html页面，每个访问地址可能都是直接访问html页面，这些页面通常不加强缓存，以保证浏览器访问这些页面时始终请求服务器最新的资源

2.文件名+hash值

利用webpack打包，当文件内容有改变的时候。生成文件名的hash值也会改变，这样文件名就变了，浏览自然会重新请求，而不是用缓存中的文件。

当文件内容没有改变的时，hash值不变、文件名不变，浏览使用缓存的文件，不发送请求

三、减少加载的文件，图片懒加载

什么是图片懒加载

当访问一个页面的时候，先把img元素或是其他元素的背景图片路径替换成一张大小为1*1px图片的路径（这样就只需请求一次），当图片出现在浏览器的可视区域内时，才设置图片真正的路径，让图片显示出来。这就是图片懒加载。

如何加载图片

    <div class="img-container">
        <img  data-src="./01.jpeg" alt="">
    </div>
    <div class="img-container">
        <img  data-src="./02.jpg" alt="">
    </div>
    <div class="img-container">
        <img  data-src="./03.jpeg" alt="">
    </div>
复制代码

只需要把data-src中的地址放到src的里面就好了

imgs[i].src = imgs[i].getAttribute('data-src')
复制代码

如何判断一个元素出现在视野中？

元素相对顶点的距离(文字) <= 窗口高度 + 滚动的距离

附完整代码

<script>
    const imgs = document.querySelectorAll('img')
    // 获取可视区域高度
    const viewHeight = window.innerHeight || window.documentElement.clientHeight
    console.log(viewHeight,imgs)
    function loadImg(){
      for(let i=0; i<imgs.length;i++){
        console.log(imgs[i].getBoundingClientRect().top)
        let dis = viewHeight - imgs[i].getBoundingClientRect().top
        if(dis>0){
          imgs[i].src = imgs[i].getAttribute('data-src')
        }
      }
    }
    loadImg()
    window.addEventListener('scroll',loadImg)
  </script>
复制代码

后记：

这道题目中还涉及到很多知识点，像TCP/UDP、浏览的渲染过程、重绘和回流（重排）等，如果大家感兴趣，下次再和大家谈谈这些内容。

作者：国服第一摸鱼选手
链接：juejin.cn/post/712967… 来源：稀土掘金
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。