快快快,快—快——-快,谈谈性能优化

传输快:

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/

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
余 倩倩的头像余 倩倩前端大师
上一篇 2018年2月9日
下一篇 2018年3月29日

相关推荐

发表回复

登录后才能评论
微信公众号
微信公众号
edgesensor_high 小程序
小程序
分享本页
返回顶部