从前端开始的全链路优化

[zhaoxiaohai]

前言

本文写作时，作者任职于普华永道GTS（Global Technology Support）部门。这个部门以前是为了支持公司内部员工数字化办公所设立，现在正逐步涉足对外服务。相比于其他互联网公司，这里前端的开发模式仍然相对落后，使用的是.net一套通吃。再者，作者之前也没有大型互联网前端开发经验，所以本文只涉及在传统开发模式下，前端优化的一些经验，不会考虑后台服务以及数据库的优化。由于涉及到公司数据，所以不会添加相应截图。

正文

背景：

1、在我进入这家公司之前，没有专门的前端岗位，所以前端开发属于奔放型开发模式，所有前端代码基本上都是裸奔到浏览器，更不用提模块化或者组件化开发了。

2、同时，这里的前端技术栈比较简单，老旧项目是jquery/easyui/jstemplate/Razor，而目前新项目中又混入了Angular/Vue。前端代码的混乱，使得想对性能做优化却有心无力。

3、现在接手的项目是内部使用，所以用户量较少，但是仍会出现访问慢的情况。

遇到的问题：

1、页面初始加载较慢。

2、ajax请求比较慢。

3、部分资源后台更新后页面没有及时更新。

优化思路：

首先简单梳理浏览器工作流程：

1、用户在使用浏览器访问页面时，浏览器首先请求服务器。

2、服务器响应请求，返回页面。

3、浏览器解析html并加载相关资源并根据缓存规则缓存以及执行脚本。

4、用户与页面交互，浏览器执行相应动作。

分析问题：

将遇到的问题放在浏览器的工作流程中，可以很容易得出：

a）对于问题1，可能是页面过大，或者页面引用的资源较多，网络开销较大

b）对于问题2，可能服务器查询数据慢，或者前端处理数据慢

c)对于问题3，应该是浏览器缓存导致。

使用Chrome devtools调试，可以清楚的看到时间线上到底哪些地方耗时较长。

分析结果：

1、发现出现首次加载慢的问题的页面，首屏大概会加载20个js，耗时8-10s左右。

2、发现ajax请求缓慢的问题，这部分耗时主要后台service查询的问题。

3、发现资源更新的问题是由于静态文件获取时iis默认加上了缓存策略。

解决方案：

1、由于历史原因，前端开发方式相当奔放。所以对于资源没有管理。因此为了解决问题1、3，以及时间并不允许，提出了渐进式模块化解决方案：

第一阶段：使用requirejs以及gulp对资源文件打包压缩合并，但是由于后台是.net，不能像node那样一键部署，前期只能靠人工填进项目。

第二阶段：对相关业务代码进行模块化改造，以适应模块化开发的需要。

第三阶段：前后端分离。

2、对于问题2，属于后台问题，移交给后台处理。

总结

其实本文算不上全链路优化的文章，只是工作中的一些经验，行文仓促，有许多不足之处，日后还需改进！！！