前端优化方案整理
一、（http请求）关键渲染路径优化
-
@1 尽可能使用HTTP2.0
-
@2 开启TCP通道的长连接
Connection:keep-alive -
@3 开启服务器端的GZIP压缩：「让每一次返回的资源大小压缩40%+」
-
@4 对不经常更新的数据做数据缓存
-
@5 对于静态资源文件设置强缓存和协商缓存:目的是保证第二次及以后加载页面更快
-
@6 合理使用图片base64：
-
需要基于webpack自己编译BASE64「不要自己手动写BASE64，因为代码太恶了」
-
零散的小图片一般可以base64
-
如果这个图片很大，并且还很重要（不能延迟加载），如果想尽各种办法加载还是慢，不妨使用BASE64
-
-
@7 不同的资源分服务器部署:
- 将原本放在一个服务器上的项目资源，分给多个服务器：web服务器、数据服务器、图片/音视频服务器、第三方服务器...
- ==优势==：资源合理利用、减轻服务器压力、提高服务器处理能力、提高HTTP请求的并发数(每个服务器HTTP请求并发上限是5-7个)
- ==弊端==：增加了DNS解析的次数，所以在这个基础上，我们使用DNS Prefetch预解析
- ==DNS Prefetch的原理==：利用link的异步性，让GUI渲染的同时，也去预先解析DNS(dns-prefetch)，后面再获取资源的时候，直接把DNS缓存的信息拿出来用即可...
-
@8减少因操作DOM而产生的重排和重绘:
-
==放弃直接操作DOM==：我们主攻操作数据，把操作DOM的事情交给vue/react框架来完成「框架内部做了很多操作DOM的优化」：虚拟DOM->DOM DIFF->渲染差异内容
-
==读写分离，利用浏览器的渲染队列机制==:我们操作DOM的样式进行“「集中修改样式」”
-
==动态创建多个DOM节点时==：我们基于文档碎片或者模板字符串，实现批量增加
-
==基于transform修改元素的样式==：不会引发重排
-
==尽量操作脱离普通文档流的节点==:这样节点位置或大小改变，只会把这一层中的节点重新Layout，虽然也引发了重排，但是总比所有节点都重新计算位置强...
-
-
关于html/CSS的优化
- @9 link导入样式放在HEAD中：让GUI渲染DOM TREE的同时，也去请求CSS资源，这样等到DOM TREE完成，可能CSS资源已经拿回来了
- @10 script标签尽可能放到最后：
- 对于script标签来讲，尽可能放在页面末尾导入，如果非要放在前面导入，需要加async/defer，避免对GUI阻塞
- @11 合理使用css样式引入方式：
- 如果样式资源比较少，直接内嵌式即可，减少一次HTTP请求；如果内容多，则合并到一个css中，使用外链式link导入；坚决不用@import导入式，因为他会阻塞GUI渲染！！
- @12 减少HTML嵌套的层级、使用语义化标签
- @13CSS选择器前缀不要过长「CSS选择器的渲染方向：右->左」
- @14 避免使用CSS的表达式{expression}
二、页面打开速度优化
- @1 图片懒加载：
- 第一次渲染页面不去加载真实图片(页面中基于默认图占位)：减少了HTTP请求次数、不占用HTTP并发资源、第一次加载页面也无需渲染图片... 让页面第一次加载更快
- @2 音视频资源一定要做延迟加载和播放！！！
- @3 骨架屏：
-
==服务器骨架屏(SSR渲染)==：页面首屏需要展示的结构、样式、数据等都由服务器处理好，第一次加载页面，只要获取到内容，直接渲染即可(真实数据也有了) -> 前提服务器抗压能力需要好
-
==前端骨架屏==：渲染之前的Loading效果；在真实内容没有渲染出来之前，先把架子搭起来，用一些灰色的框框占位，给用户正在加载的友好效果...
- @4 减少HTTP的请求次数和大小：「因为HTTP的并发性、TCP的三握四挥、网络通道可能会被阻塞等众多原因，决定了HTTP请求次数越少越好」
-
==CSS和JS资源各合并为一个==：「如果一个文件过大，第一次加载页面不需要这么多东西，我们也可以切割成多个，但是第一次只加载一个必须用到的，其余的都动态异步加载」
-
==使用CSS Sprite(精灵图)技术==：，多张图片合并为一个
-
==文件要压缩==：图片资源在保证清晰度的前提下，尽可能压缩
-
==使用字体图标/SVG(矢量图)代替位图(jpg/png/gif...)==
-
- @5 做数据的分页加载、异步加载、下拉加载...
三、运行时代码优化
-
@1 事件委托：
- 「优势：减少堆栈内存的开辟、可以给动态创建的元素做事件绑定...提高了整体性能」
-
@2 合理使用闭包：「闭包会产生不释放的栈内存」
-
@3 避免内存泄漏： -> javascript高级程序设计第三版
-
@4 禁止出现死递归、死循环：（因为会导致栈溢出）、禁止出现死循环（因为会阻塞JS引擎线程的渲染）
-
@5 减少cookie的使用：
- 「因为每一次向服务器发送请求，都会在请求头中把cookie传递给服务器，不论服务器是否想要，如果本地cookie存储信息多，则每次传输都会携带一些没必要的内容...」
-
@6 对于一些操作使用函数的节流和防抖
-
@7 动画处理的原则：能用CSS搞定的不用JS，能用requestAnimationFrame搞定的不用定时器，如果最后定时器动画都搞不定的，换需求...
四、webpack层面优化
-
@1、对小图片进行base64压缩
-
@2、html、js、css文件压缩
-
@3、关闭SourceMap
-
@4、开启gzip压缩
五、vue层面优化
- @1、v-if和v-show合理使用
- @2、v-for遍历添加key，且避免同时使用v-if
- @3、图片懒加载
- @4、路由懒加载/分类打包
- @5、第三方插件按需导入
- @6、服务端渲染SSR 或 预渲染(骨架屏)
- @7、用vuex做缓存
