- 性能优化篇
- 一、CDN
- 1. CDN的概念
- 2. CDN的作用
- 3. CDN的原理
- 4. CDN的使用场景
- 二、懒加载
- 1. 懒加载的概念
- 2. 懒加载的特点
- 3. 懒加载的实现原理
- 4. 懒加载与预加载的区别
- 三、回流与重绘
- 1. 回流与重绘的概念及触发条件
- （1）回流
- （2）重绘
- 2. 如何避免回流与重绘？
- 3. 如何优化动画？
- 4. documentFragment 是什么？用它跟直接操作 DOM 的区别是什么？
- 四、节流与防抖
- 1. 对节流与防抖的理解
- 2. 实现节流函数和防抖函数
- 五、图片优化
- 1. 如何对项目中的图片进行优化？
- 2. 常见的图片格式及使用场景
- 六、Webpack优化
- 1. 如何提⾼webpack的打包速度?
- （1）优化 Loader
- （2）HappyPack
- （3）DllPlugin
- （4）代码压缩
- （5）其他
- 2. 如何减少 Webpack 打包体积
- （1）按需加载
- （2）Scope Hoisting
- （3）Tree Shaking
性能优化篇
性能优化篇
一、CDN
1. CDN的概念
CDN（Content Delivery Network，内容分发网络）是指一种通过互联网互相连接的电脑网络系统，利用最靠近每位用户的服务器，更快、更可靠地将音乐、图片、视频、应用程序及其他文件发送给用户，来提供高性能、可扩展性及低成本的网络内容传递给用户。
典型的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（Internet Service Provider），全链路 HTTPS 通信
除此之外，CDN作为一种基础的云服务，同样具有资源托管、按需扩展（能够应对流量高峰）等方面的优势。
3. CDN的原理