前端性能优化
2020-04-02 18:50:37 44 举报AI智能生成
前端性能优化
作者其他创作
大纲/内容
页面渲染架构优化
浏览器渲染过程
页面静态化
前后端分离
SPA
SSR
PWA
页面加载优化
懒加载
预加载
预渲染
按需加载
楼层式加载
接口优化
合并
接口上CDN
接口域名上CDN
接口缓存
本地缓存
多次请求
ajax\fetch缓存
静态资源优化
图片
jpg、png、gif、webp
压缩
如何加载更快？
逐步加载
占位符
Lqip
sqip
响应式图片
js检测窗口
@media
img-srcset
服务器端自动优化
根据参数不同自动生成不同尺寸、大小的图片
处理方式
压缩
裁切
格式转换
cdn
替代方案
web font
data uri
css sprite
html
减少HTML嵌套
减少DOM节点数
减少无语义代码
删除HTTP或HTTPS协议头
删除多余的空格、换行符、缩进、不必要的注释
省略冗余的标签和属性
使用相对路径的url
文件放在合适的位置
css链接放在页面头部
JS放在页面底部
增强用户体验
设置favicon.ico
增加首屏必要的css和JS
css
提升CSS渲染性能
谨慎使用expensive属性
尽量减少样式层级数
尽量避免使用占用过多CPU和内存的属性
尽量避免使用耗电量大的属性
合理使用css选择器
尽量避免css表达式
尽量避免使用通配符选择器
尽量避免类正则的属性选择器 ^= $= |=
提升css文件加载性能
使用外链的css
尽量避免使用@import
精简css代码
使用缩写语句
删除不必要的0
删除不必要的单位 如px
删除过多的分号
删除空格和注释
尽量减少样式表的大小
合理使用web fonts
将字体部署在CND上
将字体以base64形式保存在css中并通过localStorage进行缓存
Google字体库应该使用国内托管服务
css动画优化
尽量避免同时动画
延迟动画初始化
结合SVG
JS
JS优化总体原则
当需要时再优化
考虑可维护性
提升js文件加载性能
JS放在body底部 配合async defer
JS变量和函数优化
尽量使用id选择器
尽量避免使用eval
JS函数尽可能保持简洁
使用事件节流函数
使用事件委托
JS动画优化
避免添加大量JS动画
尽量使用css3动画
尽量使用canvas动画
合理使用requestAnimationFrame动画代替setTimeout、setInerval
合理使用缓存
合理缓存DOM对象
缓存列表长度
使用可缓存的Ajax
JS模块化加载方案和选型
CommonJS
AMD
CMD
ES6 import
如何避开重排、重绘？
最小化重排
控制绘制过程和绘制区域
css
避免过多样式嵌套
避免使用css表达式
使用绝对定位，可以让动画元素脱离文档流
尽量不适用float
图片最好设置width和height
尽量简化浏览器不必要的任务，减少页面重新布局
使用viewport设置屏幕缩放级别
避免频繁设置样式，最好把新的style属性设置完成后，进行一次性更改
避免使用引起回流、重绘的属性，最好把响应的变量缓存起来
控制DOM大小
合理的业务逻辑
延迟加载即将呈现的内容
静态文件
静态文件压缩
HTML压缩 html-minifier
css压缩 clean-css
JS压缩 uglify-js
静态文件打包
公共组件拆分
压缩 JS、css、图片
合并 JS、css文件合并 css sprite
静态文件缓存
构建工具
grunt
glup
webpack
fis
webpack打包优化
定位大体积模块
删除没有使用的依赖
生产模式镜像公共依赖包抽离
开发模式DLL
服务端和网络优化
CDN
DNS
减少HTTP请求
减小cookie
Gzip
https
http2
0 条评论
下一页
