传输快：
1.传输的内容体积要小：图片压缩。图片根据支持情况选择体积更小的格式（如webp）。css、js内容压缩。服务端开启Gzip,在传输数据之前再次压缩
2.传输的内容数量要少：图片图标合并、svg图标合并、css和js文件打包合并
3.网速要足够快：服务器出口宽带要够。考虑到南北差异、运营商差异，在不同地区部署服务器。静态资源放CDN
4.服务器响应要及时：接口响应速度要快（数据库优化，查询优化，算法优化）。cpu、内存、硬盘读写不要成为瓶颈，多加几台机器。重要页面（首页）静态化，服务端提前渲染后首页生成静态页面，用户访问首页直接返回静态页面，不需要像其他页面那样还需要加载css、js再获取数据渲染展示
5.能重复利用的资源要利用好：服务器设置合适的静态资源缓存时间。前端文件打包时做合理的分块，让公共的资源缓存后能被多个页面复用
6.暂时不需要的资源先不要：图片懒加载。功能、模块、组件按需加载
7.将来需要的资源抽空先拿到：DNS预解析<link rel=”dns-prefetch” href=”//jirengu.com”>。
预连接：<link rel=”preconnect” href=”//jirengu.com”>
预获取：<link rel=”prefetch” href=”image.png”>
预渲染：<link rel=”prerender” href=”//xiedaimala.com”>
体验快：
1.滚动页面不要有迟滞感：对于短时连续大量触发的操作要做节流
2.一些常见操作不要感觉拖泥带水：DOM的操作不要过于频繁。不要出现内存泄露。优化复杂运算
3.动画不要卡顿：多用css动画，少用js动画。开启硬件加速。不要用setTimeout/setInterval 去模拟动画。动画或者过渡的执行时间不要太久
原创文章，作者：余 倩倩，如若转载，请注明出处：https://www.pmtemple.com/flyingfish/1100/
微信扫一扫 
支付宝扫一扫 
