-
优化的思路:4W
- Why 为什么要优化(优化的目的)?
- When 什么时候优化(优化的基本原则)?
- Where 哪方面需要优化(明确瓶颈所在)?
- What 怎样优化(针对性能瓶颈对症下药)?
-
为什么要做性能优化?
- 加快页面展示和运行速度
- 节约服务器带宽流量
- 减少服务器压力
-
什么时候做性能优化?
- 基本原则:避免过早优化
- 首先,保证基本功能完成,再考虑优化
- 其次,在没有找到性能瓶颈之前,不要优化
- 基本原则:避免过早优化
-
哪方面需要做性能优化?
- 分析一个页面从发起请求到展示到用户大概流程
- DNS 查询
- 发送 HTTP 请求
- 等待服务器响应
- 下载服务器响应内容
- 解析 HTML、CSS、JS
- 渲染 HTML、CSS、JS 和图片
- 响应用户事件
- 使用性能评级工具(PageSpeed 或 YSlow)进行定位
- 分析一个页面从发起请求到展示到用户大概流程
- 怎么做性能优化(对应从发起请求到展示到用户的各环节优化)?
- 针对
DNS 查询
优化- 减少网站所用的域名个数(现代浏览器基本都具备并行下载能),减少 DNS 查询时间
- 建议一个网站使用至少 2 个域,但不多于 4 个域来提供资源
- 针对
发送请求
优化- localStorage(本地存储)
- 静态资源打包,开启 Gzip 压缩(节省响应流量)
- Cookie 隔离(节省请求流量)
- 使用 CDN 加速(访问最近服务器)
- 针对
等待服务器响应
优化- 合理设置 HTTP 缓存:Etag 与 Cache-control
- 启用 HTTP/2(多路复用,并行加载)
- 优化数据库查询
- 部署负载均衡
- 针对
下载服务器响应内容
优化- 用 CSS3 实现图片,对小图标进行 base64(降低请求数)
- 延迟(defer)加载/异步(async)加载依赖
- 针对
解析 HTML、CSS、JS
优化- 去掉无用的 HTML、CSS 和 JS
- 优化首屏时间:脚本后位置、图片压缩、懒加载
- 针对
渲染 HTML、CSS、JS 和图片
优化- 最小化重绘(repaint)和回流(reflow):批量修改元素样式、避免 table 布局等
- 针对
响应用户事件
优化- 尽量不在前端做复杂的运算
- 针对
点击查看更多内容
6人点赞
评论
共同学习,写下你的评论
评论加载中...
作者其他优质文章
正在加载中
感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦