- Published on
趣说web资源加载
- Authors
- Name
- noodles
- 每个人的花期不同，不必在乎别人比你提前拥有
在加载web资源的时候,资源(数据/js/css/图片等)会主要经历三个阶段:- 服务端组装阶段
- 传输阶段
- 客户端处理阶段
在讨论资源加载优化的时候其实在讨论如何能快速的把用户需要的资源尽快的给到用户,这个过程就很像货车运输货物的过程。下面我们就以卡车司机的视角去看货物如何能更好的运输。
--- 以下是故事视角叙述 ---
作为一个资深老司机,我驾驶着我的货车已经在这个熟悉的路线上跑了20多年了,虽然货物运输的活一直有,但是运输方对我拉货的要求确越来越多。车多货少,以前是货找车,现在是车找货。在年前去时常合作的老板家拜访(送礼不是)的时候,老板语重心长的跟我说: 跟你合作了这么久,还是你最靠谱,不过我听老王说他家拉货的好像降价了而且还换了大车。咱们合作这么久我是信得过你的,年后咱们在聚聚,聊聊今年咱们怎么干。我拿起来酒倒满了一杯敬了老板,老板笑了笑喝了一口,说: 最近开始养生了。我苦笑。 开车回家的路上,我就在思考今年的活我应该怎么干。我以往的干活方式可以简化成下面所示: 
- 在配货站等待不同的货物装上车 这个阶段我偶尔也会参与搬货,因为我想快点能出发
- 跑长途 是个比较无聊的过程
- 卸货站卸货 想起我在开货车之前干过两年前端工程师,所以我把我想到的今年拉货的方式跟大家求求建议,我会用一些之前还记着的一些词汇来描述我的一些想法,等大家给我出主意,希望过完年我跟老板的聚餐能让老板喝一杯。
资源(货物)运输方式
说到货物的运输方式,我首先想到的是换掉我的老伙计-陪伴我20多年的老卡车,换一个你们熟悉的说法应该切换下传输协议。比如
- http2 有了多路复用 报头压缩 二进制帧的结构 传输数据上更加高效
- websocket 对二级制支持更好在双向链路上能更好的传输数据
- 服务端预渲染技术SSR(server-side rendering)/SSG(static site generation)/ISR（Incremental Static Generation)
- api网关聚合服务 利用内网优势去拼接请求返回给用户
- 资源可选下发 对不同浏览器环境下发不同的资源,减少不必要的传输资源
- 资源优先级区分 动态加载/图片懒加载/非首屏资源懒(异步)加载等
上面说的感觉好拗口,还是换成我拉货的话来说,这样跟我一起拉货的车友也能听懂我的意思
- 我想在买一辆车,这样能两辆车跑拉货如果每趟我都能赚钱,那么老板也满意,我的钱包也越来越鼓,我需要考虑好这个成本问题
- 我是不是可以在开发出一条新的路线,说不定这条路线上回来的时候也能配到货,那么我至少不会空跑,肯定是多赚的
- 以前一些货物需要到卸货站进行打包,可以跟老板商量在发车的时候就提前打包好,方便我装货和卸货,也能提高我拉货的效率
- 有时候会存在运输方对目的地要货需求的理解不一致的情况,结果拉过去好多货都堆积了,老板钱赚少了,也不愿意给我货款。我可以多跟朋友打听好哪些是紧俏货,把这个信息给老板让老板给我配货
- 想要做到区分优先级我就要做到更加详细的要货需求,车里面只拉需要的货,到了那边都卖出来,老板高兴,我也高兴(钱包鼓了当然高兴)
资源缓存(货物存储)
说到资源缓存,其实在上面的预渲染技术中就可以用到。可以有如下的思路
- 服务端资源缓存 服务端动态生成的资源缓存/计算数据缓存
- 资源缓存设置 区分不同资源做不同的缓存时间设置
- CDN 多点部署资源/CDN资源预热
- 客户端缓存
换成我拉货的视角就是:
- 提前备货 我车到装货站就装货走人,不用等一天等待货品的进货组装
- 紧俏的货就多备一些,多拉一些。要货就有
- 跟老板商量在目的地附近在建几个存货处,我先往存货处拉,这样要货的时候也快
- 卸货站要是没货的时候,那边有车的话,就跑来这边拉一下货或者进行一些存货,到时候卖库存就行
资源体积(货物体积)
说到资源体积,思考的是在一次的资源展示中怎么能尽可能少尽可能快的展示给用户信息。这个少和快是一个综合取舍的过程。有的时候我们会放弃文件的大小的考量,只为了达到更好的效果。因为给用户一个频繁抖动的页面不如让用户稍微等待那200 300ms.这里其实也有一些可以想到的点:
- 资源加载方式的改变 图片相关资源的内联/webp的使用/react的server component
- 兼容性 不在兼容低老版本,减少兼容代码
- tree shaking 防止无用代码的打包
- split chunk 公用代码的提取
换成我拉货的视角就是:
- 一次能多拉货就多拉一些/更换更好的卸货或者装货方式
- 人家不要的货咱不拉
- 都要的货,咱标记出来,保证都要的货在卸货的时候够用
--- 结束号--- 之前在web性能优化总结中对一些性能优化相关的点做了一次总结,当前文章是在之前的基础上新增了一些最近的思考,在想这个事情的时候刚好想到拉货这件事,所以就通过这种方式做了一次尝试,跟之前图说React渲染流程的风格有些像,算是一种尝试,希望通过风趣的方式能把事情讲明白,在尝试风趣化的过程中也加深了自己的理解和思考,不失为一种尝试。