前端优化
最近前端群里的小伙伴问我,老板喊我做前端优化我该怎么去优化呢?。我思考了了一下,提出了以下几点建议…
文章目录
- 一、思考
- 二、可读性优化(不细讲)
- 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体积或不去使用它,因为每次请求
- …
2.渲染方向的优化
-
图片使用更高效的CDN策略,加载展示策略,根据网络状况加载图片、图片格式优化、图片展示位置优化,清晰度,大小格式等
-
使用GPU渲染动画
-
尽量减少大量动画的同时调用
-
尽量减少重排重绘的操作(频繁的重排重绘+cpu渲染,用户体验真的会尿)
-
减少一次性的渲染dom量
-
减少渲染阻塞,合理的安排文件加载顺序和加载时机
-
注意页面大小的控制,canvas,svg,base64等文件的堆叠
-
对用户操作频繁抖动进行防抖和节流的限制
-
合理运用缓存(强缓存协商缓存)对页面文件进行定期缓存
-
…
3.打包方向的优化
总的来说,打包有几个点,模块按需引入,静态资源切换cdn,gzip,style抽离,tree shaking,chunkhash,CommonChunkPlugin等等。
可以参考我的这篇文章:webpack打包优化
四、用户体验优化
- 制定弱网/断网的页面展示策略和页面丢失的404/500等策略
- 制定hover、active等公共交互策略
- 对ui的一些稿件进行通用化处理,方便前端代码组件化,防止用户ui视觉逆差
更多推荐
前端优化
发布评论