从输入URL到页面加载显示完成都发生了什么
Browser Process
- UI Thread：搜索 or URL => 搜索引擎or请求的站点
- Network Thread
- DNS查找IP => （https会建立TLS连接） => （收到301流程会重新再来）
- 设置UA等信息，发送GET请求
- Web server上的应用处理请求
- 读取Response，分析数据类型
- 安全检查
- 通知UI数据准备就绪
Renderer Process
-
Main Thread
- 解析文本构建DOM
- 边解析DOM边加载子资源
- JS阻塞解析async/defer
-
Main Thread
- 解析CSS，计算computed styles
- 构造布局树位置&大小
-
Raster Thread&Compositor Thread
- 创建绘制记录确定绘制的顺序
- 将页面拆分图层构建图层树
- 复合线程像素化图层创建一个复合帧
- 将复合帧通过ICP传回给Browser Process，再传到GPU进行渲染
首屏加载优化
首屏 - 用户加载体验的3个关键时刻
-
测量指标 - First Contentful Paint（FCP）
- 优：0 - 2秒
- 良：2 - 4秒
- 差：>4秒
-
测量指标 - Largest Contentful Paint（LCP）
- 优：0 - 2.5秒
- 良：2.5 - 4秒
- 差：>4秒
-
测量指标 - Time to Interactive（TTI）
- 优：0 - 3.8秒
- 良：3.8 - 7.3秒
- 差：>7.3秒
不同方面
-
资源体积太大
- 资源压缩、传输压缩、代码拆分、Tree shaking、HTTP/2、缓存
-
首页内容太多
- 路由/组件/内容、lazy loading、预渲染/SSR、Inline CSS
-
加载顺序不合适
- prefetch、preload
JS怎样管理内存，什么情况造成内存泄露
内存管理
-
变量创建时自动分配内存，不使用时“自动”释放内存 - GC
-
内存释放的主要问题是如何确定不再需要使用的内存
-
所有的GC都是近似实现，只能通过判断变量是否还能再次访问到
-
局部变量，函数执行完，没有闭包引用，就会被标记回收
-
全局变量，直至浏览器卸载页面时释放
-
引用计数 - 无法解决循环引用的问题
-
标记清除 - Mark and sweep
避免内存泄露
- 避免意外的全局变量产生
- 避免反复运行引发大量闭包
- 避免脱离的DOM元素
