黑马程序员技术交流社区
标题: 前端性能优化 [打印本页]
作者: 小小K 时间: 2020-11-27 16:50
标题: 前端性能优化
前言：
前端性能优化是面试中，常问的问题，那接下来就来分析一下。
网络层
减少不必要的网络请求造成的延迟，等待等问题
1. 静态资源部署到 CDN (Content Delivery Network)2. DNS Prefetch由于浏览器对单个域名的最大并发连接数有一定的限制（HTTP/1.0 和 HTTP/1.1）所以有的网站会对资源的域名做拆分以达到最大的请求数优化，这就导致需要对这些不同的域名需要做多次 DNS 解析。DNS 请求需要的带宽非常小，但是延迟却有点高，这点在手机网络上特别明显。预读取 DNS 能让延迟明显减少一些，例如用户点击链接时。在某些情况下，延迟能减少一秒钟。
dns-prefetch 可以让浏览器对相应的域名做预解析处理，提升加载速度。
- <meta http-equiv="x-dns-prefetch-control" content="on">
- <meta http-equiv="x-dns-prefetch-control" content="off">
- <link rel="dns-prefetch" href="//www.example.com">
同类的标签属性还有 Preload, Prefetch
3. 合理设置缓存4. 减少 HTTP 请求- 合并 js/css
- base 64 图片
- iconfont
- 延时加载
- 避免空 href 和 src
5. 减少资源体积- gzip 压缩
- html/css/js 压缩
- 图片压缩
- 图片服务器动态响应
6. 减少页面重定向
浏览器解析渲染
1. 合理的 HTML 结构- css 头部加载，js放在尾部
- 避免内联样式
- 避免使用 @import 加载 css
2. 合理使用异步脚本加载和动态脚本加载3. 触发 GPU 渲染加速
代码方面
1. DOM 操作优化（访问 DOM 时耗性能以及避免重排）- 避免频繁操作 DOM
- 用 className 代替内联样式修改
- 先设置元素为 display：none； 然后进行页面布局等操作；设置完成后将元素设置为 display：block； 这样的话就只引发两次重绘和重排
- 不要经常访问浏览器的 flush 队列属性；如果一定要访问，可以利用缓存。将访问的值存储起来，接下来使用就不会再引发回流
- 将需要多次重排的元素 position 属性设为 absolute 或 fixed，元素脱离了文档流，它的变化不会影响到其他元素
- 如果需要创建多个 DOM 节点，可以使用 DocumentFragment 创建完后一次性的加入 document
- 避免强制同步布局和布局抖动
- 尽量不要使用 table 布局
- 尽量使用 css 动画
- 使用 requestAnimationFrame 代替 setInterval、setTimeout 操作
- 适当使用 canvas
- 尽量减少 css 表达式的使用
2. 使用事件委托3. 使用局部变量4. 避免长作用域链5. 高效存储数据
| 欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/) |
黑马程序员IT技术论坛 X3.2 |