前端优化

编程入门行业动态更新时间:2024-10-28 08:30:00

前端优化

最近前端群里的小伙伴问我，老板喊我做前端优化我该怎么去优化呢？。我思考了了一下，提出了以下几点建议…

文章目录

一、思考
二、可读性优化（不细讲）
- 1、模块化
- 2、组件化
- 3、文件规范
- 4、commit规范
- 5、书写规范
- 6、代码细节优化
三、性能优化
- 1.请求方向的优化
- 2.渲染方向的优化
- 3.打包方向的优化
四、用户体验优化

一、思考

我们为什么要优化呢，从哪几个方向去优化呢
我们常见的一些问题是不是页面卡顿？首屏加载很慢？图片渲染很久？断网弱网页面崩溃？代码需要回滚才知道commit代码包的体积很大？文件很乱找不到？重复代码很多？变量都是a1,a2,a3，动画很卡顿玩多了手机烫或者崩溃？用户加载网页报错我们却不知道？等等等等很多需要去思考的问题，
我认为可以从这三个大方向去讨论

可读性优化
性能优化
用户体验优化

二、可读性优化（不细讲）

代码可读性优化，可以分为几个方向（模块化，组件化，文件规范，commit规范，书写规范）

1、模块化

利用AMD规范-RequireJs/curlJs、CMD规范-Exports/Module将js颗粒化拆分，模块化能更好提升代码的复用性/可维护性/可阅读

const getnName = () = {console.log('何华');
}
const getAge = () = {console.log('18岁');
}
export { getnName, getAge }

2、组件化

每个组件都是独立的个体，都只负责一块功能。组件之间互相独立，通过特定的方式进行沟通，抽取公共组件，大文件抽离拆分业务，化为多个组件再导入进行合并渲染。

//组件A.vue
<template><div>i'm template A</div>
</template>
//组件B.vue
<template><div>i'm template B</div>
</template>
//father.vue
<template><A /><B />
</template>

3、文件规范

就是各个文件都要放在对应的位置，别乱放

4、commit规范

请搭建公司的git flow体系按照规范提交，拉取，合并，打包，rebase是个不错的选择 commit规范这篇文章也有规范化commit规范

5、书写规范

这个要看公司规范，和个人习惯。规范不做多讲可以看看这篇：讲讲团队工程化内的规范化

6、代码细节优化

对于一些代码的小优化技巧不做多讲，可以看这篇文章：18 个你需要知道的 JavaScript优化技巧

三、性能优化

其实性能优化可以从三个方向考虑（请求，渲染，打包）

1.请求方向的优化

图片处理：1.雪碧图，2.base64（不代表绝对的性能优化，使用 Base64 的好处是能够减少一个图片的 HTTP请求，然而，与之同时付出的代价则是 CSS 文件体积的增大，要慎重取舍使用），3.使用字体图标来代替图片
减小http请求耗时或请求数量，http内容多可以拆分走异步，内容少可以合并，合并公共资源、使用雪碧图、合并代码块、按需加载资源
使用高性能传输方式或方法，http2,gzip…
使用更有效的缓存策略强缓存、协商缓存、本地缓存
合理的运用CDN或dns预解析
减少cookie体积或不去使用它，因为每次请求
…