我对前端如何优化的回答

项目的前端优化,我的角度是从项目一步步搭建到完成到打包上线来说的,根据自己在项目中的感慨来的。

至于项目的项目的搭建,比如一般是vue脚手架生成的,优化留到打包过程。接下来是项目的书写,css,html,JS对应的位置应该从上到下,JS文件采用就近加载,防止堵塞。样式写前,防止样式晚生效,用户体验度不高,对于css,少用复杂的选择符以及css3等效果类样式,渲染执行或者重绘时耗费性能较高,图片可以采用svg,或者雪碧图(现在估计用的很少),瀑布流式的页面图片采用懒加载方式,来减少资源请求,图片这块占用时间比较长的,network中就可以观察的到。html标签应该语义化,且合理嵌套,这样用力于浏览器内核对它的解析来构建dom树及元素节点等,对于JS首先应该封装(闭包),提升可阅读行和复用性,注意减少作用域链的查找,不可嵌套太多,采用异步请求防止同步等待,另外很重要的一点是尽量少操作dom,dom的变化是相当耗费性能的(所以现在框架更加流行,用虚拟dom去映射dom,根据虚拟dom的变化利用最佳算法得出结果去更新dom,比dom自身要快捷很多),用到的第三方库等可以采用cdn方式,避免引入太大的JS导致后面打包时候的vendor文件过大。尽量减少http。

项目打包,代码压缩,vue项目应该再更改配置,可以生成gzip超级或者去掉map文件(貌似用来调试报错啥的,用于生产环境较适合,至于如何实现可以自行查阅,更改webpack配置)

前端的项目与浏览器是离不开的,所以如上面提到的http请求,可以设置缓存,对于页面也可以设置缓存,cookie的前后端传输也是很耗费性能和时间的,所以应该尽量减少。最后想到了nginx代理,让页面更快的展示到用户面前。

猜你喜欢

转载自www.cnblogs.com/hjj2ldq/p/9154168.html
今日推荐