web前端性能优化

web前端性能优化

加载资源优化

1. 尽量使用缓存，减少网络请求
2. 静态资源（html/css/js）的合并和压缩。
3. 静态资源缓存（浏览器缓存策略）。
4. 使用CDN让静态资源加载更快。

** 渲染优化**
5. CSS放head中，JS放body后
6. 2.图片懒加载
7. 减少DOM操作，对DOM操作做缓存
8. 减少DOM操作，多个操作尽量合并在一起执行

资源合并

懒加载

合并dom插入

10次dom插入 —> 1次dom插入

事件节流
事件节流主要用于触发频率较高的事件，设定一个缓冲触发事件。

异步加载
非核心代码异步加载 – 异步加载的方式 – 区别

1.动态脚本加载 用js创建
2.defer
3.async

浏览器缓存

浏览器缓存 – 缓存的分类 – 缓存的原理

缓存就是html文件在本地存在的副本，

强缓存

DNS预解析

<meta http-equiv="x-dns-prefetch-control" content="on">
<link rel="dns-prefetch" href="//www.zhix.net">