近来接到一个使命，首页机能优化。
目的：95分位值下
看到页面框架主体内容6s（优化前10s摆布），优化提拔40%
看到操纵细致内容9s（优化前12s摆布），优化提拔25%。
正面看出我们体系的巨大水平吧，这个不值得自满，项目比较悠长，汗青包袱比较极重，背面设计node同构体式格局去重构，然则现阶段须要一个低本钱，短时候的计划去进步现有机能作为过渡。
95分位值诠释
95分位值现在是我们看机能指标的一个主要参考点。
举例：收集用户翻开的时候，从快到慢分列，比如是100个用户数据，95分位值就是掏出第95个用户的数据做统计。 50分位值就是第50个人的数据。
为何是95%，因为跟进高T的优化履历，95分位值的数据取点最能放大题目。50,80的取点暴露的题目不显著。
当我把最慢的那一批人的机能优化好了，哪些快的天然就处理了。
优化难点
口试常常问到的页面优化点，比方图片兼并，js兼并，css兼并，js紧缩等等都已做了。通例优化点没有什么空间能够优化。
代码比较老。解释上面都是12-13年的代码。
修正须要只管的少，功用点不能改，时候比较慌张，QA没有人力增援，所以须要代码修正比较小的状况下（修正必需可控），不重构的状况下发掘优化点。
使命拆分
优化机能这类使命实在比较难制订设计，除非履历迥殊雄厚。
第一步：是梳理代码
固然也不是看一切的老营业代码，看的重点是看各个模块的加载逻辑，展现逻辑，看进口即可。
第二部：删遗留代码
也许相识全部首页的初始化流程后，梳理了简朴的逻辑后，发明第一个使命，删代码。
梳理也许构造后，目测有大批下线功用的代码任然遗留在体系中，之前的下线逻辑应当是仅仅屏障了进口，而没有清算代码。
所以我第一个详细的事情就是找出下线的营业代码并将他清算，不完整统计，清算代码量开辟环境下最少5W行。
清算代码优点许多：
削减无用代码的初始化斲丧
削减静态资本
让代码越发清楚，削减无用代码的滋扰
删除无用代码实际上是个脏活，吃力不讨好，删除的代码假如另有处所援用，那末删除了就是引入了一个bug。
删除代码这个事情又没有什么显性的收益，还费工费时。实在就是一个里子的事情，把人人看不到的处所做好。
第三部：优化初始化逻辑
只管让不是完整依靠的ajax并行，削减串行。当前体系有两个展现模块有串行关联。梳理营业后，找出首页加载的默许逻辑，将串行调解成为并行。
这里是修正代码的处所之一，修正越少越好，因为一旦修正多了，就不好掌握了，就须要QA参与，那末全部项目的周期就会大大延伸。
第四部：ajax预取
这个是上一个项目履历积聚，在加载模块静态资本前，能够并行的要求这些模块的ajax内容。底本逻辑是，加载终了各个模块的静态资本，然后模块内部最先加载静态资本须要的ajax。如许就避免不了静态资本的要求和静态资本内里ajax的要求形成了一个串行关联。
预取的一个显著上风是，ajax能够提早
节约的时候 = min(ajax要求时候，静态资本加载时候)。
这里是修正的别的一个处所：同理，这个处所没有营业逻辑，所以须要和营业完整解耦着做。
第五部：优化打包兼并
打包这部份难度比较大，优化空间也相对较多。
这里分了两部份：
一：首屏不展现部份按需加载
现在看许多应当按需加载的内容全部都兼并到了一同，放在首屏加载了。比方点击一个按钮出来一个操纵页面弹框。实在这个弹框的代码首屏展现是完整不须要。
当时解释：
代码加起来紧缩完也许200kb摆布，没必要拆的太细,假如代码到达500KB以上，再进一步斟酌细拆
实际状况是，这个部份的代码紧缩殽杂后到达了1.1MB（坑爹啊）。
这类状况就是当初开辟人员想象是优美的，后续营业开辟人员没有认识或许相识到当初的划定，营业越来越多，代码也就越来越多。
这类状况实在比较罕见，因为打包兼并这类实际上是只管对营业人员通明的，这类兼并后的内容，实在在开辟环境表现不出来，只要锐意的紧缩代码和优化时才注意到。
轻易无视的部份就是轻易涌现题目的处所。
二： 打包兼并反复的部份删除
照样上面的缘由，打包兼并关于开辟人员和开辟环境通明，很长一段时候后，会发明大批打包反复，比较显著的就是底层依靠库个个文件反复援用。这类不会激发bug，然则会影响首屏静态资本的加载和静态资本的剖析。
一和二的结果很显著：静态资本收集紧缩后（gz），1.9mb优化到了1.1mb，团体提拔了42%。
三： 疑问散文件清算
之前优化过频频散文件，因为本钱比较大，遗留了一些散文件。此次就是集合处理了一下，散文件实际上是比较严重的，一个散文件就会糟蹋一个要求。95分位值下，一个散文件能够就是100ms的影响。所以不要小视散文件关于机能的影响。
结果是削减5个js静态资本要求，2个css要求。
优化觉得
这些优化本周会上线，期待数据会比较悦目。假如本周结果不是很显著，背面的优化空间实在就异常小了，暂时不斟酌cdn，依靠后端这些要领，仅仅从静态资本动身。
优化实在就是一个没有那末明白设计的使命，每每有能够对着页面一遍一遍看加载流程或许把源代码挨个扫一遍找找觉得，一个突发奇想，一个奇淫技能，一个营业展现结果的调解就可以到达。
后续看看是不是达标，机能不达标的话，还会有《我是怎样优化网站首页机能的（番外篇）》。/(ㄒoㄒ)/~~
优化觉得2
优化就是细节完美，举个例子：
偶然一个js散文件能够多斲丧50ms，然则一旦涌现10个，20个影响就叠加起来了。
一个底层库被反复打包了，能够多了几千行，静态资本增加了几k，加载上能够就是几ms，加上与剖析几ms。然则一旦反复的静态资本多了，题目就来了。上万行，上百K的资本都是拖慢体系的泉源。不可思议我此次粗滤的清算了一下，清算了0.6MB的资本。
优化没有止境，这一版上线后，一定另有许多遗留的处所，后续看看结果，继承优化。
ps:末了发明本身整理完这么多，也没有做什么，觉得背面还需勤奋
博客地址
http://tangguangyao.github.io/
微信民众号
