程序员面试题库分享
1、前端面试题库 （面试必备） 推荐：★★★★★
地址：前端面试题库
2、前端技术导航大全 推荐：★★★★★
地址：前端技术导航大全
3、开发者颜色值转换工具 推荐：★★★★★
地址 ：开发者颜色值转换工具
从一道经典的前端面试题---谈前端性能优化
在浏览器中输入一个网址后，发生了什么？
这是一道非常经典的面试题，包含前端大部分的基础知识点。
- 第一步 浏览器通过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、浏览的渲染过程、重绘和回流（重排）等，如果大家感兴趣，下次再和大家谈谈这些内容。
程序员面试题库分享
1、前端面试题库 （面试必备） 推荐：★★★★★
地址：前端面试题库
2、前端技术导航大全 推荐：★★★★★
地址：前端技术导航大全
3、开发者颜色值转换工具 推荐：★★★★★
地址 ：开发者颜色值转换工具
