前端优化-前端性能优化

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

一、思考

我们为什么要优化呢，从哪几个方向去优化呢
我们常见的一些问题是不是 页面卡顿？首屏加载很慢？图片渲染很久？断网弱网页面崩溃？代码需要回滚才知道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 }

1
2
3
4
5
6
7
8

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>

1
2
3
4
5
6
7
8
9
10
11
12
13
14

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体积或不去使用它，因为每次请求
• …

2.渲染方向的优化

• 图片使用更高效的CDN策略，加载展示策略，根据网络状况加载图片、图片格式优化、图片展示位置优化，清晰度，大小格式等

• 使用GPU渲染动画

• 尽量减少大量动画的同时调用

• 尽量减少重排重绘的操作（频繁的重排重绘+cpu渲染，用户体验真的会尿）

• 减少一次性的渲染dom量

• 减少渲染阻塞，合理的安排文件加载顺序和加载时机

• 注意页面大小的控制，canvas，svg，base64等文件的堆叠

• 对用户操作频繁抖动进行防抖和节流的限制

• 合理运用缓存(强缓存协商缓存)对页面文件进行定期缓存

• …

3.打包方向的优化

总的来说，打包有几个点，模块按需引入，静态资源切换cdn，gzip，style抽离，tree shaking，chunkhash，CommonChunkPlugin等等。
可以参考我的这篇文章：webpack打包优化

四、用户体验优化

• 制定弱网/断网的页面展示策略和页面丢失的404/500等策略
• 制定hover、active等公共交互策略
• 对ui的一些稿件进行通用化处理，方便前端代码组件化，防止用户ui视觉逆差