不是正文

前端优化的重要性？

1、更好的把控项目，二次开发不反胃

工作了刚好一年，在第一家公司的时候，做项目那叫一个赶，创下了连续加班二十几天，更是晚上十点多才下班的记录。

但是以前做的项目，我愣是不想看第二遍，为什么？根本没有时间去想优化的事情，整个项目，现在想起来乱糟糟的，甚至有点反胃，可见优化是多么重要，如果你要维护，要二次开发…..除非你跳槽，但是相信你会一天被别人问候好几天。

自从现在跟了腾讯大佬unclexiao，极致探索前端优化，力求把项目做精致，利于自己对项目的把控。

2、利于面试啊，找工作啊

面试过很多次，都问会不会前端优化
面试官：说说你对优化有什么了解的。
我：emmmm，压缩？合并？减少请求？懒加载？
面试官：呵呵呵呵呵，可以可以。

这是正文

附：当然了，下面的优化建议，只是本人通过=问问人啊+搜搜资料啊+个人意见啊，憋出来的东西，有什么不对的地方，尽管骂我啊，反正也没人看到

IMG 优化

Base64

使用打包工具进行 base64 转换
相关功能网站直接转换

使用字体

使用 iconfont，引入字体文件，font-family !!!!

图片懒加载

屏幕下方的图片暂时不请求，等到用户滑动到屏幕显示区域再请求

图片压缩

推荐工具 pngcrush

HTML 优化

标签嵌套不要太深

减少嵌套层次，提升网页加载速度

页面总标签数尽量少

语义化标签，便于SEO

易于阅读和维护

CSS 优化

常用属性样式提取

比如 flex，font-size，color 一些简单的设置

1
2
3

flex{ display:flex }
.ag-center{ align-items:center }
.fz-16{ font-size:16px }

有的人觉得没有必要，但是我觉得这样写很方便啊

优点

样式变化灵活，写页面快得一批，不用另起特殊类名写样式
减少了css 体积
易维护，不会因为页面变化，导致写很多次样式

缺点

增加了 html 体积，因为一个标签可能增加了很多类名
显得零碎

常用组件样式提取

需要对整个项目浏览一遍，看哪些样式是一样的，提取出一个公共类，方便重用，不需要见一个写一个

比如：项目中常见的移动端的链接

最外层 .hoho-cell
左边文字 .hoho-cell-text
右边附属文字 .hoho-cell-value
箭头 .hoho-cell-arrow

之后，就可以直接用了，完全不用再写一遍，省心省力啊喂

CSS 命名类名

命名 CSS 类名的时候，无非是两种，一种是前缀限定，一种是层级限定

前缀限定

例如评论的内容，类名是 .comment-content
缺点是：类名会比较长，增加了 html 体积
优点是：样式不容易被覆盖

层级限定

同样是评论内容，类名变成 .comment .content
缺点是：
- 多人合作导致样式名容易重名（content）
- css文件比使用前缀限定要大一些，因为多了空格

CSS 属性不要拆开写

比如 border ，不要写成 border-left，border-right 。
比如 background，像我以前傻逼，就喜欢分开写成
background-repeat
background-size
background-position
的确你直接用一个 background 就可以减少很多代码量啊喂

公共样式和其他样式不要都打包成一个 css 文件

因为在打包工具中，我们习惯把整个项目的 css 打包成一个文件
这样导致首屏加载速度变慢，加载了首页外多余的样式。

声明：个人意见啊喂

CSS去除不必要浏览器前缀

添加浏览器前缀，要考虑实际情况，如果是移动端，就不用添加微软等前缀了。
比如一般会用 postcss 会帮我们自动添加前缀，这时就要认真思考你项目生产环境，通过配置postcss 不配置多余的前缀

JS异步加载，包括路由，功能函数，插件等。
JS异步加载，包括路由，功能函数，插件等。

JavaScript 优化

JS异步加载，包括路由，功能函数，插件等。

不需要一开始就加载全部文件，异步加载，减少首屏时间

减少全局（变量，方法）的定义。

避免多人合作造成的变量污染

减少 DOM 的重复获取，用局部变量保存获取的 DOM。

访问DOM 次数越多，代码运行越慢

减少作用域链的查找，用局部变量缓存。

比如如果多次用到 a.b.c ，就声明一个变量保存 var z = a.b.c，之后就用 z 去操作

循环优化。

循环数组，保存数组长度 len=arr.length
forEach 比普通循环慢 8倍，倒序比正序要快

避免重复判断。

比如在写绑定事件的兼容代码时，需要判断当前是什么浏览器，最好是判断一次之后，就保存下来，而不是每次绑定事件都重复判断

查找表代替多重判断 if-else。

设计模式中的——–状态模式

事件委托。

如果需要给多个子元素绑定相同事件，可以利用冒泡来给父元素绑定事件

减少重排重绘。

重排：元素位置，尺寸，浏览器窗口尺寸，添加删除可见DOM
重绘：元素颜色，背景色

Ajax 优化

尽量使用 GET 请求。

POST 是通过一个两步的过程来实现的，先发送 HTTP 头，再发送数据

减少请求的发送。

自定义请求缓存 Cache。

在 JavaScript 中声明一个对象 var cache，每次请求前，先查找这个对象，是否存在这个借口的数据，（Yes）使用 cache 中的数据，（No）保存请求回来的数据
设计模式中的——备忘录模式

其他优化

CDN

请求等待的时间，也会跟地理位置有关，离你越近，获取越快

JS，CSS文件压缩

使用打包工具压缩，能减少一半体积以上啊！

Gzip 服务端压缩

可以压缩三分之二的体积啊！

文章结束，给个赞玩玩，虽然好像没什么用，好了，今天就到这里，我们下期再见！！！

声明：尬图，尬排版，请看过的盆友不要介意

log