前端性能优化，自是老生常谈的一个还算靠谱的fe

前端性能优化，自是老生常谈的一个话题，作为一个还算靠谱的fe，如果谈性能优化色变，那自然是要羞羞脸了，如果没有一个比较系统的认知的话呢，那么这篇文章就送给你当遮羞布喽！

前端性能优化可以从三个方面来着手：静态资源优化、页面渲染速度优化（代码逻辑优化）、SSR服务器渲染。在操控门槛上依次递增，优化效果上依次越发没有那么明显，很多团队只做了第一个优化。下面从这三个方面分别话一话前端性能优化。

Step 1：静态资源优化

合并css、js文件，制作雪碧图：减少http请求次数，节省网络请求时间；

静态资源cdn分发：静态资源可以通过最佳的网络链路来访问静态资源；

css、js文件压缩，图片压缩、gzip压缩：减少请求返回的数据量；

静态资源缓存机制（历史文章已有详细讲述）。

诚然，当前是个各大框架横行的时代，react、vue、angular等个大框架都可以依托于webpack完成css、js文件的合并以及压缩，如果普通压缩合并不能够满意，还可以再使用gzip来压缩。

图片也可以以一个大小为上限，小于上限的图片被转化成base64图片（并不是base64格式的图片比较小，而是base64格式的图片可以被编码到css/js中，可以被缓存，一般建议较小的图片采用base64编码，因为base64格式图片会比原图大三分之一左右）的格式，较大的图片可将其上传至CDN。

Step 2 ：页面渲染速度优化

在页面不复杂，dom层级不深的情况下，如果没有考虑使用SSR服务端渲染的方案，静态资源得到优化看起来似乎也并无不足，然而在复杂页面上还是有很大优化空间的。页面渲染速度的优化这时候就很大程度上取决于程序员的个人编程素质。以下着重讲述一些良好的编程习惯，以优化代码逻辑，仅供参考：

Js添加到页面上的页面处理程序都会占用内存，因此，为了提高网页性能，要尽可能少的添加。一般事件委托在传统项目（比如使用jQuery的）上比较有优势，但在vue、react框架上并无太多可用武之地前端网站优化seo，或者说没有必要使用事件委托，vue官方也并不推荐使用事件委托。

二者皆是为了限制函数执行频率，以优化函数执行频率过高而引起的延迟、假死、卡顿现象。比如onresize、onscroll、mousemove、文字输入自动完成的keyup事件。

二者的区别：

节流：类比水龙头被拧住，控制水的下滴的频次，即事件发生的时间超过预设时间以后再执行。

防抖：类比被压住的弹簧，直到松手事件才发生，即事件发生的时间超过预设时间以后再发生，若中间再次被调用，则重新计算时间。

浏览器解析完页面以后会生成dom树，根据dom树创建一个渲染树，渲染树和dom树并不是一一对应的，渲染树的创建是基于css样式的。一旦渲染树被创建成功，浏览器就在可以在屏幕上绘制渲染树节点。在第一次页面初始化布局以后，以后每一次改变用于构建渲染树的信息都会至少导致重绘或者重排的一种。

自然，重绘的代价比较小前端网站优化seo，只是改变了元素的部分展示属性，比如background、outline、visibility；当dom的变化影响了元素的几何属性，就会导致重新绘制渲染树，即至少会有一次重新初始化页面布局。

避免重绘重排的方案在往期文章也已经有过详细描述，在这里我着重说一下虚拟dom在避免重绘重排上的优点，优点如下：

1、虚拟DOM只在计算最终结束后再进行重绘重排；

2、虚拟DOM进行频繁修改，然后一次性比较并修改真实DOM中需要改的部分（注意！），最后并在真实DOM中进行排版与重绘，减少过多DOM节点排版与重绘损耗；

3、真实DOM频繁排版与重绘的效率是相当低的；

4、虚拟DOM有效降低大面积（真实DOM节点）的重绘与排版，因为最终与真实DOM比较差异，可以只渲染局部。

在开发过程中有时候需要对兼容性进行检测，有很多的if判断，但是常规的方法有点累赘了，会检测很多遍，但是浏览器环境是固定不变的，检测只需要进行一次，这样就会造成每次调用这个函数的时候都会浪费很多时间再检测一次，这个时候就应该用到惰性函数来解决这个问题。

惰性载入表示函数的分支只会在函数第一次调用的时候执行，在第一次调用过程中，该函数会被覆盖为按照合适方式执行的函数，这样对原函数的调用就不用在经过原来的分支了。

Step 3： SSR服务端渲染

如果第一步已经做得非常好的情况下，静态资源均已加载完成，可是页面仍然还在转菊花，用户仍然需要等待接口返回数据，但是那一朵一直旋转的菊花是不是你的痛点？

试想，如果页面的初始化数据在后端完成渲染，其他的用户交互使用ajax来完成，也就是传统意义上的首屏直出，就可以得到很好的解决。这种介于完全后端渲染和完全ajax渲染之间的一种解决方案看起来是一个不错的思路，但是在node出现之前，很多人宁愿强忍菊花痛，也不愿去做，那是因为后端和前端要维护两套模板。

Node出现之后，前后端都可以使用js语言，前后端同构（前端渲染和服务端渲染逻辑使用一种语言进行构建，无缝衔接）使得首屏直出（服务端渲染，直接渲染并拼接好字符串返回）有了新的生命力，所以现在同构直出经常相提并论。

同构直出实现的最好的是react，vue-ssr的实现方案也被得到了越来越多的应用。所以，笔者建议，在项目允许的情况下，项目可以尝试同构直出的方案来尝试一下，相信会有不一样的体验。

关于性能优化的文章，在往期也已经有过讲解，本文着重讲述的是关于代码逻辑方面的优化，并引出了SSR服务端渲染，后期文章将会详细讲述关于SSR服务端渲染的文章。Darling们，敬请期待吧！！！