前端性能的优化方式
前端页面性能对用户体验非常重要。
从小的讲,如果你花了好几个月辛辛苦苦做了一个精美的个人网站,满眼泡泡地等待用户去访问,结果别人用户家连的网是天翼3G,连打开网站都花了好几秒钟,等了十秒图片都没刷出来,pia一下就把网站给你关了,你气不气?
从大的讲,淘宝、拼多多和京东这样的电商网站,用户日活上亿,特别是遇到6.18和双十一这些挤爆服务器的日子,要是你的平台卡了,用户就把钱花到其他平台去了,你老板气不气?
总而言之,前端性能优化十分重要,有下面一些方法可以优化前端性能。
http
合理设置缓存,减少http请求,减少DNS请求
强缓存使用catch-control替代expires,协商缓存用Etag替换last-modify
TODO:缓存文章链接
html
懒加载
TODO:懒加载文章链接
css
雪碧图
TODO:雪碧图文章链接
js
css和js标签放在合适位置,或者使用async await
统一操作DOM,或者用cssText
用absolute布局和transform:translateXY减少重排
TODO:重排重绘文章链接
Vue
diff算法操作虚拟DOM
TODO:Vue diff算法文章链接