有关性能优化（包含防抖节流）

有关性能优化（包含防抖节流）

一.性能优化的原则：

二.性能优化的方案：
1》资源合并：

2》缓存：


3》使用CDN（Content Delivery Network）内容分发网络：

1. 传统访问
   ①.用户在浏览器输入域名发起请求
   ②.DNS 服务器解析域名获取服务器 IP 地址
   ③.根据 IP 地址找到对应的服务器
   ④.服务器响应并返回数据

2. CDN 访问
   ①.用户在浏览器输入域名发起请求
   ②.智能 DNS 解析（根据 IP 判断地理位置和网络运营商，选择路由最短和负载最轻的服务器）
   ③.获取缓存服务器 IP 地址
   ④.根据 IP 地址找到对应的缓存服务器
   ⑤.如果缓存命中，则响应并返回数据；如果缓存未命中，则向源站点发起请求
   ⑥.源站点返回数据，并在缓存服务器缓存一份数据

3. CDN 优势
   ①,本地缓存加速，提高企业站点的访问速度
   ②.跨运营商的网络加速，保证不同网络的用户都能得到良好的访问质量
   ③.广泛分布的 CDN 节点加上节点之间的智能冗余机制，可以有效的预防黑客入侵

4. 实际应用
   ①.我们在引入bootstrap等框架时，也会引入CDN地址
   
   ②.百度的好多js文件，都用的是static静态服务，都是用CDN做的
   

4》使用SSR（server side render）服务器渲染：

5》懒加载：

preview.png 为预览图片，体积小，很容易加载，真正的图片放在’data-realsrc‘里，当图片漏出屏幕，把’data-realsrc‘给img的src

6》缓存DOM查询：

7》多个DOM操作一起插入到DOM结构：

8》尽早开始JS执行：

选择 DOMContentLoaded，图片视频没加载完不用管

三.优化方案之防抖节流：
1》防抖（debounce）：

①.什么是防抖：

②.例子：

const input1 = document.getElementById

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！