前言##
对于页面速度上的优化展开可以有太多太多要讲,如 淘宝首页性能优化实践
本文不会对这些具体的优化手段做补充,而是通过一个层次的区分,划分出需要优化或是完善的点,让所有的点能联动起来。
简介##
执行后端--网络传输--生成模版--渲染视图
然后可以基于几个角色考虑,作出权衡
1.页面速度(user)
2.开发效率(developer)
3.资源费用(boss)
执行后端##
页面速度:
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),并不非得性能走向极致(其实是太菜做不到吧:),所以懒加载图片,按需加载等手段层出不穷,或是缓存层存储的是非实时数据(兜底数据),等等。
说起来这一层面反而是很大的优化点,写的好点效果奇大,毕竟技术菜,体验凑。
问题##
强行把这些优化的问题分层处于不同的层次感觉有点牵强,算是抛砖引玉吧。有谁给个意见啥的?
结尾##
严格来说,并不完全算首屏的优化,一些优化点可以推广到全页面。
后续还需要针对问题补充些具体的方案,以及其他非主场景的折中方案(因为要考虑针对小场景快速优化)。