前端八股文（性能优化篇）-Toy模板网

这篇具有很好参考价值的文章主要介绍了前端八股文（性能优化篇）。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

1.CDN的概念

2.CDN的作用

3.CDN的原理

4.CDN的使用场景

5.懒加载的概念

6.懒加载的特点

7.懒加载的实现原理

8.懒加载与预加载的区别

9.回流与重绘的概念及触发条件

（1）回流

（2）重绘

10. 如何避免回流与重绘？

1.CDN的概念

CDN（内容分发网络）是指一种通过互联网互相连接的电脑网络系统，利用最靠近每位用户的服务器，更快，更可靠地将音乐，图片，视频，应用程序及其他文件发送给用户，来提供高性能，可扩展性及低成本的网络内容传递给用户。

典型的CDN系统由下面三个部分组成：

分发服务系统：最基本的工作单元就是Cache设备，cache（边缘cache）负责直接响应最终用户的访问请求，把缓存在本地的内容快速地提供给用户。同时cache还负责与源站点进行内容同步，把更新的内容以及本地没有的内容从源站点获取并保存在本地。Cache设备的数量、规模、总服务能力是衡量一个CDN系统服务能力的最基本的指标。
负载均衡系统：主要功能是负责对所有发起服务请求的用户进行访问调度，确定提供给用户的最终实际访问地址。两级调度体系分为全局负载均衡（GSLB）和本地负载均衡（SLB）。全局负载均衡主要根据用户就近性原则，通过对每个服务节点进行“最优”判断，确定向用户提供服务的cache的物理位置。本地负载均衡主要负责节点内部的设备负载均衡。
运营管理系统：运营管理系统分为运营管理和网络管理子系统，负责处理业务层面的与外界系统交互所必须的收集、整理、交付工作，包含客户管理、产品管理、计费管理、统计分析等功能。

2.CDN的作用

CDN一般会用来托管Web资源（包括文本，图片和脚本等），可供下载的资源（媒体文件，软件，文档等），应用程序（门户网络）。使用CDN来加速这些资源的访问。

（1）在性能方面，引入CDN的作用在于：

用户收到的内容来自最近的数据中心，延迟更低，内容加载更快
部分资源请求分配给了CDN，减少了服务器的负载

（2）在安全方面，CDN有助于防御DDos，MITM等网络攻击：

针对DDoS攻击：通过监控分析异常流量，限制其请求频率
针对MITM：从源服务器到CDN节点到ISP全链路HTTPS通信

除此之外，CDN作为一种基础的云服务，同样具有资源托管，按需扩展（能够应对流量高峰）等方面的优势。

3.CDN的原理

CDN和DNS有着密不可分的联系，看一下DNS的解析域名过程，在浏览器输入www.test.com的解析过程如下：

（1）检查浏览器缓存

（2）检查操作系统缓存，常见的如hosts文件

（3）检查路由器缓存

（4）如果前几步都没找到，会向ISP（网络服务提供商）的LDNS服务器查询

（5）如果LDNS服务器没找到，会向根域名服务器请求解析，分为以下几步：

根服务器返回顶级域名（TLD）服务器如：.com，.cn，.org等的地址，该例子中会返回.com的地址
接着向顶级域名服务器发起请求，然后会返回次级域名（SLD）服务器的地址，本例子会返回.test的地址
接着向次级域名服务器发送请求，然后会返回通过域名查询到目标IP，本例子会返回www.test.com的地址
Local DNS Server会缓存结果，并返回给用户，缓存在系统中

CDN的工作原理：

（1）用户未使用CDN的缓存资源的过程：

1.浏览器通过DNS对域名进行解析（就是上面的DNS解析过程），依次得到此域名对应的IP地址

2.浏览器根据得到的IP地址，向域名的服务主机发送数据请求

3.服务器向浏览器返回响应数据

（2）用户使用CDN缓存资源的过程：

1.对于点击的数据的URL，经过本地DNS系统的解析，发现该URL对应的是一个CDN专用的DNS服务器，DNS系统就会将域名解析权交给CNANE指向的CDN专用的DNS服务器

2.CDN专用DNS服务器将CND的全局负载均衡设备IP地址返回给用户

3.用户向CDN的全局负载均衡设备发起数据请求

4.CDN的全局负载均衡设备根据用户的IP地址，以及用户请求的内容URL，选择一台用户所属区域的区域负载均衡设备，告诉用户向这台设备发起请求

5.区域负载均衡设备选择一台合适的缓存服务器来提供服务，将该缓存服务器的IP地址返回给全局负载均衡设备

6.全局负载均衡设备把服务器的IP地址返回给用户

7.用户向该缓存服务器发起请求，缓存服务器响应用户的请求，将用户所需内容发送至用户终端

如果缓存服务器没有用户想要的内容，那么缓存服务器就会向它的上一级缓存服务器请求内容，以此类推，直到获取到资源。最后如果还是没有，就会回到自己的服务器去获取资源。

前端八股文（性能优化篇）,八股文,前端,网络,性能优化

CNAME（意为：别名）：在域名解析中，实际上解析出来的指定域名对应的IP地址，或者该域名的一个CNAME，然后再根据这个CNAME来查找对应的IP地址。

4.CDN的使用场景

使用第三方的CDN服务：如果想要开源一些项目，可以使用第三方的CDNfw
使用CDN进行静态资源的缓存：将自己网站的静态资源放在CDN上，比如就是，css，图片等。可以将整个项目放在CDN上，完成一键部署。
直播传送：
**直播本质上是使用流媒体进行传送，CDN也是支持流媒体传送的，所以直播完全可以使用CDN来提高访问速度。CDN在处理流媒体的时候与处理普通静态文件有所不同，普通文件如果在边缘节点没有找到的话，就会去上一层接着寻找，但是流媒体本身数据量就非常大，如果使用回源的方式，必然会带来性能问题，所以流媒体一般采用的都是主动推送的方式来进行。

5.懒加载的概念

懒加载也叫做延迟加载，按需加载，指得是长网页中延迟加载图片数据，是一种较好的网页性能优化的方式。在比较长的网页或应用中，如果图片很多，所有的图片都被加载出来，而用户只能看到可视窗口的那一部分图片数据，这样就浪费了性能。

如果使用图片的懒加载就可以解决以上问题。在滚动屏幕之前，可视化区域之外的图片不会进行加载，在滚动屏幕时才加载。这样使得网页的加载速度更快，减少了服务器的负载。懒加载适用于图片较多，页面列表较长（长列表）的场景中。

6.懒加载的特点

减少无用资源的加载：使用懒加载明显减少了服务器的压力和流量，同时也减小了浏览器的负担。
提升用户体验：如果同时加载较多图片，可能需要等待的时间较长，这样影响了用户体验，而使用懒加载就能大大的提高用户体验。
防止加载过多图片而影响其他资源文件的加载：会影响网站应用的正常使用。

7.懒加载的实现原理

图片的加载是由src引起的，当对src赋值时，浏览器就会请求图片资源。根据这个原理，我们使用HTML5的data-xxx属性来储存图片的路径，在需要加载图片的时候，将data-xxx中图片的路径赋值给src，这样就是实现了图片的按需加载，即懒加载。

注意：data-xxx 中的xxx可以自定义，这里我们使用data-src来定义。

懒加载的实现重点在于确定用户需要加载哪些图片，在浏览器中，可视区域的资源就是用户需要的资源。所以当图片出现在可视区域，获取图片的真实地址并赋值给图片即可。

使用原生JavaScript实现懒加载：

前端八股文（性能优化篇）,八股文,前端,网络,性能优化

window.innerHeight是浏览器可视区的高度
document.body.scrollTop||document.documentElement.scrollTop是浏览器滚动过的的距离
imgs.offsetTop是元素底部距离文档顶部的高度（包括滚动条的距离）
图片加载条件:img.offsetTop<window.innerHeight+document.body.scrollTop

<div class="container">
     <img src="loading.gif"  data-src="pic.png">
     <img src="loading.gif"  data-src="pic.png">
     <img src="loading.gif"  data-src="pic.png">
     <img src="loading.gif"  data-src="pic.png">
     <img src="loading.gif"  data-src="pic.png">
     <img src="loading.gif"  data-src="pic.png">
</div>

<script>
var imgs=document.querySelectorAll('img')
function lozyLoad(){
        var scrollTop=document.body.scrollTop||document.documentElement.scrollTop;
        var winHeight=window.innerHeight;
        for(var i=0;i <imgs.length;i++){
            if(imgs[i].offsetTop<scrollTop+winHeight){
                imgs[i].src =imgs[i].getAttribute('data-src');
            }
        }
window.onscroll=lozyLoad();
</script>

8.懒加载与预加载的区别

这两种方式都是提高网页性能的方式，两者主要区别是一个提前加载，一个迟缓甚至不加载。懒加载对服务器前端有一定的缓解压力作用，预加载则会增加服务器前端压力。

懒加载也叫延迟加载，指的是在长网页中延迟加载图片的时机，当用户需要访问时，再去加载，这样可以提高网站的首屏加载速度，提升用户的体验，并且可以减少服务器的压力。它适用于图片很多，页面很长的电商网站的场景。懒加载的实现原理是，将页面上的图片的 src 属性设置为空字符串，将图片的真实路径保存在一个自定义属性中，当页面滚动的时候，进行判断，如果图片进入页面可视区域内，则从自定义属性中取出真实路径赋值给图片的 src 属性，以此来实现图片的延迟加载。
预加载指的是将所需的资源提前请求加载到本地，这样后面在需要用到时就直接从缓存取资源。 通过预加载能够减少用户的等待时间，提高用户的体验。我了解的预加载的最常用的方式是使用 js 中的 image 对象，通过为 image 对象来设置 scr 属性，来实现图片的预加载。

9.回流与重绘的概念及触发条件