前言##

对于页面速度上的优化展开可以有太多太多要讲，如 淘宝首页性能优化实践

本文不会对这些具体的优化手段做补充，而是通过一个层次的区分，划分出需要优化或是完善的点，让所有的点能联动起来。

简介##

执行后端--网络传输--生成模版--渲染视图

然后可以基于几个角色考虑，作出权衡
1.页面速度（user）
2.开发效率（developer）
3.资源费用（boss）

未命名文件.png

执行后端##

页面速度：
1.执行业务逻辑，获取数据，常见手段于sql优化，数据结构优化，这些优化手段交给后端，他们会保证接口稳定以及速度。

开发效率：
1.controller逻辑推到前端，专注业务逻辑，减少沟通成本

资源费用：
后端不详，需要补充。

小结：后端专注后端

网络传输##

页面速度：
1.资源大小：文件压缩，gzip等
2.连接数量：COMBO ，BigPipe，多路复用等
3.网络延迟：CDN

开发效率：
对于开发透明，所以是无影响

资源费用：
减小网络开销，费用嘛，当然是会少滴

小结：花钱上CDN得到速度上提高;BigPipe,多路复用需要额外的代码降级处理;又要写代码又要花钱伺候用户，好累~

生成模版##

页面速度：
1.根据路由以及状态生成模版

开发效率：
1.生成模版推到前端（但处于server），增大工作量，减少沟通成本，提高效率

资源费用：
1.对于server压力增大，老板加配置！

小结：这里主要一点，将后端的MVC中的C还给前端，满足前端的控制欲，还能减少沟通成本，增加开发效率，不过SSR就要在技术实现上就要多下功夫了。

渲染视图##

页面速度：
1.减少reflow

开发效率：
1.避免HTML，CSS一些用法
2.图片固定大小

资源费用：
1.对图片的处理需要记录信息。

小结：
渲染上除去前面几个步骤的影响，其实基本上是考验HTML，CSS的功底了。

一些小花招##

其实主要在于一点，只要体(dan）验（che）够（de）好（hao），并不非得性能走向极致（其实是太菜做不到吧：），所以懒加载图片，按需加载等手段层出不穷，或是缓存层存储的是非实时数据(兜底数据)，等等。
说起来这一层面反而是很大的优化点，写的好点效果奇大，毕竟技术菜，体验凑。

问题##

强行把这些优化的问题分层处于不同的层次感觉有点牵强，算是抛砖引玉吧。有谁给个意见啥的？

结尾##

严格来说，并不完全算首屏的优化，一些优化点可以推广到全页面。
后续还需要针对问题补充些具体的方案，以及其他非主场景的折中方案（因为要考虑针对小场景快速优化）。