Web性能优化

一、性能优化涉及点

CDN	CDN的概念
	CDN的作用
	CDN的原理
	CDN的使用场景
懒加载	懒加载的概念
	懒加载的特点
	懒加载的实现原理
	懒加载与预加载的区别
防抖与节流	对节流与防抖的理解
	实现节流防抖函数
回流与重绘	回流与重绘的概念及触发条件
	如何避免回流与重绘
	如何优化动画
	documentFragment是什么？用它与直接操作DOM的区别是什么
图片优化	如何对项目中的图片进行优化
	常见的图片格式及使用场景
webpack优化	如何减少webpack打包时间
	如何减少webpack打包体积
	如何用webpack来优化前端性能
	如何提高webpack的构建速度

二、 CDN

1、CDN的概念

      内容分发网络（Content Delivery Network，CDN）是一种网络架构，旨在提高用户对互联网上内容的访问速度和性能。CDN通过在全球各地部署大量的服务器节点，将内容缓存到离用户更近的服务器上，从而减少内容传输的距离，提高访问速度和响应时间。当用户请求访问某个网站或应用程序时，CDN会自动选择距离用户最近的服务器节点，从该节点提供内容，而不是直接从原始服务器获取内容。

2、CDN的作用

减少网络延迟和不稳定性
用户与业务服务器之间的物理距离可能很远，导致数据传输需要经过多次网络转发，从而增加了延迟和不稳定性。CDN通过在全球范围内部署服务器节点，使用户能够从距离更近的服务器获取内容，从而显著减少了传输延迟和提高了稳定性。

跨运营商转发优化
当用户与业务服务器所在的运营商不同时，请求需要在运营商之间进行互联转发，这可能会增加延迟和不稳定性。CDN提供了跨多个运营商的覆盖，使得用户可以从与其运营商更接近的CDN边缘节点获取内容，从而减少了跨运营商转发带来的问题。

提高服务器响应速度和可用性
业务服务器面对海量用户请求时，可能会面临网络带宽和处理能力的限制，导致响应速度下降和可用性降低。CDN通过缓存静态内容、负载均衡和智能路由等技术，可以将用户请求分发到最优的服务器节点上，从而分担了原始服务器的压力，提高了响应速度和可用性

3、CDN的原理

客户端请求资源： 用户在浏览器中输入网址或点击链接请求某个网页或资源。
DNS解析： 浏览器首先会进行DNS解析，将域名解析成对应的IP地址。如果该域名的DNS记录中包含了CDN服务商提供的DNS服务器信息，DNS解析可能会返回一个与用户位置最接近的CDN节点的IP地址。
请求路由： 用户的请求被发送到最近的CDN节点。
节点服务器处理请求： CDN节点服务器接收到用户请求后，会检查是否有缓存该资源的副本。如果有，它会直接从缓存中返回资源；如果没有，它会向源服务器请求资源。
资源获取： 如果资源存在于CDN节点的缓存中，则CDN节点会直接返回资源给用户；如果资源不在缓存中，则CDN节点会向源服务器请求资源。
数据传输： 源服务器将所请求的资源传输给CDN节点服务器。
数据返回： CDN节点服务器将获取到的资源返回给用户的浏览器。
内容传输完成： 用户在浏览器中收到并加载所请求的资源，完成访问过程。

4、CDN的使用场景

          静态加速：静态网页：CDN可以缓存静态网页（如HTML、CSS、JavaScript文件），并将其分发到全球各地的边缘节点，从而加速网页加载速度。
图片和视频：CDN能够存储和传送图片、视频等静态媒体文件，通过在用户附近的服务器上提供这些资源，减少了加载时间和带宽消耗。

        动态加速：动态内容：尽管动态内容通常不适合缓存，但CDN可以通过一些技术手段来加速动态内容的传输，比如动态页面的负载均衡、内容压缩和路由优化等。

        流媒体加速： 视频直播和点播：CDN能够提供高效的流媒体分发，将视频内容快速传输给全球观众，减少了视频卡顿和加载时间，提升了用户体验。音频流媒体：类似于视频，CDN也可以用于加速音频流的传输，如音乐流服务、网络广播等。

三、懒加载

1、懒加载的概念

懒加载是一种将资源标识为非阻塞（非关键）资源并仅在需要时加载它们的策略。这是一种缩短关键渲染路径长度的方法，可以缩短页面加载时间。

懒加载可以在应用程序的不同时刻发生，但通常会在某些用户交互（例如滚动和导航）上发生。

2、懒加载的特点

• 减少无用资源的加载：懒加载可以明显减少服务器的压力和流量，避免加载用户不需要的资源。
• 提升用户体验：通过延迟加载，避免了同时加载大量资源导致的长时间等待，提高了用户体验。‌13
• 防止加载过多资源影响其他资源：懒加载可以防止加载过多图片而影响其他资源文件的加载，确保网站应用的正常使用。

3、懒加载的实现方式

• 页面懒加载    使用打包工具见页面切分成多个模块，当页面即将展示时再加载对应文件

• 图片懒加载 提升性能 减少对图片资源的请求，减少了对网络资源的占用，使得加载其他资源变得更快。与没有使用图片懒加载的页面相比，页面会更快。（图片数量越多、体积越大差异越明显） 2、降低成本 网络资源一般根据传输字节数收费，减少对图片资源的请求，减少了传输字节数，从而降低成本。 

  4、懒加载与预加载的区别

（1)概念：
        懒加载也叫延迟加载：JS图片延迟加载,延迟加载图片或符合某些条件时才加载某些图片。
        预加载：提前加载图片，当用户需要查看时可直接从本地缓存中渲染。

（2)区别：
        两种技术的本质：两者的行为是相反的，一个是提前加载，一个是迟缓甚至不加载。懒加载            对服务器前端有一定的缓解压力作用，预加载则会增加服务器前端压力。

（3)懒加载的意义及实现方式有：
      意义：
懒加载的主要目的是作为服务器前端的优化，减少请求数或延迟请求数。
实现方式：
1.第一种是纯粹的延迟加载，使用setTimeOut或setInterval进行加载延迟.
2.第二种是条件加载，符合某些条件，或触发了某些事件才开始异步下载。
3.第三种是可视区加载，即仅加载用户可以看到的区域，这个主要由监控滚动条来实现，一般会在距用户看到某图片前一定距离遍开始加载，这样能保证用户拉下时正好能看到图片。

（4)预加载的意义及实现方式有：
意义:
预加载可以说是牺牲服务器前端性能，换取更好的用户体验，这样可以使用户的操作得到最快的反映。
实现方式：
实现预载的方法非常多，比如：用CSS和JavaScript实现预加载；仅使用JavaScript实现预加载；使用Ajax实现预加载。
常用的是new Image();设置其src来实现预载，再使用onload方法回调预载完成事件。只要浏览器把图片下载到本地，同样的src就会使用缓存，这是最基本也是最实用的预载方法。当Image下载完图片头后，会得到宽和高，因此可以在预载前得到图片的大小(方法是用记时器轮循宽高变化)。

四、对节流与防抖的理解

1、节流

 节流函数会确保在指定的时间间隔内只执行一次函数，从而避免不必要的性能开销

function throttleFactory(t = 1000) {
  let samp = 0
  return function (fn) {
    let samp2 = new Date().getTime()
    if(samp2 - samp < t) return
    if(samp) {
      samp +=  Math.floor((samp2 - samp) / t) * t
    } else {
      samp = samp2
    }
    fn && fn()
  }
}

2、防抖

防抖函数会限制指定的时间间隔内函数已调用，再次调用防抖函数，则会重置先前的计时器，并为此函数调用启动一个新的计时器，直到规定时间内无重复调用，才执行函数

function debounceFactory(t = 1000) {
  let timer = null
  return function (fn) {
    if(!timer) {
      fn && fn()
    } else {
      clearTimeout(timer)
    }
    timer = setTimeout(()=> {
      timer = null
    }, t)
    
  }
}