性能提升-前端开发必修课

发布时间:2022-07-05 发布网站:脚本宝典
脚本宝典收集整理的这篇文章主要介绍了性能提升-前端开发必修课脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。

      在大前端生态日益繁荣的今天,前端在软件开发中可谓是举足轻重,每一款互联网产品的最终呈现都离不开前端的实现。可能在2015年之前前端这个词还很陌生,那个时候也许有部分从事着工资极低的网页开发工作,其内容也及其简单,就是今天所说的切图仔的工作,搞点htML+csS写个静态页面,整个开发工作都是以后台为主,前后端不分离的项目都是以jsp的形式存在于代码中。这样一来就有着极大的局限性,这种局限性有以下几点。

前后端不分离的局限性:

1.开发周期相对较长,网页开发人员和后台开发人员共同使用一个项目,前端代码嵌套后台逻辑,发生冲突的几率很高。

2.维护成本更高,开发人员离职,接受的维护人员熟悉代码的成本将变得很高,一变需要熟悉业务实现,一边又要前后台都学

3.后期的拓展性不强,由于是后台为主导,所以想要在网页上增加特效和提升用户体验变得天方夜谭

以上几点就是前辈们要前后端分离的理由

前后端分离之后,一个完整的项目由前台工程和后台工程共同组成,前台人员使用MVVM框架构建项目,现在主流的就是Vue,React,Angular,其中国内企业还是以前两种居多,那么对于前台的展示需求就越来越多,各种特效,动画,渐变就充斥在前台,这就致使前台工程变得很大,那作为一个前台开发人员应该何在所有需求实现的同时且尽可能的提升项目的响应速度呢。

优化思路

1.项目中占用的静态资应该越轻越好,诸如img,fonts等静态资源,能压缩就尽量压缩体积;

2.代码的体积也越小越好,公用的function能公用就公用;

3.不要写一大堆的if,else,多使用return,break语句,减少运算次数;

4.对于递归等很占内存的写法使用时应该谨慎;

5.对于图片资源的使用推荐雪碧图这种,配合定位实现,这样就不用了网页加载几十张图片,一张图片就可以;

6.请求数量应该尽可能的少,一切公共数据的加载应该放在组件加载最初的生命周期中,而不是用一次请求一次;

7.多使用组件传值和组件拆分;

8.相对妙用浏览器的缓存,注意缓存也是有体积限制的;

9.开发模式的学习和使用,好的模式选择可以事功倍,减小代码量实现更多功能;

10.切记不要滥用全局变量,多使用局部变量,提前考虑好作用域

目前想到的代码层面的就是这些,后续想到了再补上

对于打包构建的优化思路见于另一篇博客https://www.cnblogs.COM/wk-66/p/15261884.html

脚本宝典总结

以上是脚本宝典为你收集整理的性能提升-前端开发必修课全部内容,希望文章能够帮你解决性能提升-前端开发必修课所遇到的问题。

如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。