前公司创业公司创业还没成功,新制度倒是层出不穷,纷纷扰扰。心里不快,干脆裸辞跑回广州。面试了两天就确定了新公司,从小程序又转战Vue。
许久没碰Vue,手生得很啊!很感谢新公司CTO杰哥给我机会让我快速了解公司业务,上手项目。虽然刚进公司不到一个月,但是得到机会见识了架构好的代码,一个月内多次刷新对前端的认知。难得本月业务写完大半,遂抽空开始学JavaScript性能相关,于是有此文。
本文是我学习Web性能所整理的文章。主要读物:《高性能JavaScript》、《你不知道的JS》、MDN网站以及网络上一些解读文章。
页面加载与运行过程
1、DNS解析:将URL解析为IP地址
2、TCP连接:三次握手与四次分手
3、各种HTTP请求:接口请求、JavaScript加载等
4、服务端的响应:服务端响应请求并返回数据
5、浏览器解析:浏览器对数据进行解析
6、页面渲染:解析的数据通过DOM树、CSS树与JavaScript生命周期渲染过程生成最终的页面
7、定时任务与后置JavaScript加载:JavaScript会在特定生命周期/业务期间被调用,影响页面
通过上面的过程我们了解了 从发送URL请求到页面渲染完成/事件触发 期间发生的事情,而 1-4 是涉及服务端和客户端双方合作部分,我们先关注 5-7 ,也就是我们前端工程师能独立优化性能的部分
首先,我们在加载页面到渲染页面之前,页面呈现出来的是一片空白。我们要做的第一件事,就是尽可能压缩这段空白页面出现的时间。而我们知道浏览器读取页面代码是自顶向下按顺序执行的。那么我们就得先搞清楚一件事。