前端知识体系-编程基础_01前端性能优化之白屏时间

编程基础-01URL从输入URL到页面展示都经历哪些过程(白屏是一个怎样的过程呢)?

一、收录原因

1. 前端性能化的重要base知识
2. 高频面试题

二、白屏四部曲

DNS Lookup 即浏览器从DNS服务器中进行域名查询

• 浏览器先对页面进行域名解析、获取到服务器的IP地址后，进而和服务器进行通信
• 跟Event Loop一样 页面加载的过程中，浏览器会多次进行DNS域名解析，包含页面本身域名及其页面所需要的各种资源

建立TCP请求链接 TCP->基于字节流的传输层通信协议

基于TCP/IP 浏览器和服务端TCP请求建立
都知道但是都说不清楚的『三次握手』在这里就建立连接，并提供可靠的数据传输服务

服务端请求处理响应

• 与TCP连接建立后，Web服务器接受请求，开始处理、同事浏览器端开始等待服务器的处理响应
• Web服务器根据不同的资源类型，进行对应的处理

处理原则

• 静态资源(图片、CSS文件、HTML)直接进行响应
• 其他注册的请求转发给相应的应用服务器，进行数据处理、缓存中取数据、将数据按照约定的格式返回给浏览器

客户端下载、解析、渲染显示页面

在服务器返回数据后，客户端浏览器接受数据、进行HTML下载、解析、渲染显示

解析、渲染过程

1. 如果是Gzip包，就先解压为HTML
2. 解析HTML头部、下载头部代码中的样式资源文件和脚本资源文件
3. 解析HTML代码和样式文件代码，构建HTML的DOM树与CSS相关的CSSOM树
4. 通过遍历DOM树和CSSOM树，浏览器开始计算节点的大小，坐标等样式，构造渲染树
5. 根据渲染树完成绘制过程

    /**
        *learning 拓展面试知识点 -> 浏览器的安全解析策略对解析HTML造成的影响
        * 当解析HTML时遇到内联JS代码，会阻塞DOM树的构建
        * 极端情况下：当CSS样式文件没有下载完成时，浏览器解析HTML遇到了内联JS代码，此时!!!根据浏览器的安全解析策略，浏览器暂停JS脚本执行，暂定HTML解析。直到CSS文件下载完成，完成CSSOM树构建，再重新恢复到原来的解析
        * 一定要合理放置JS代码
    */
复制代码

三、白屏-性能优化

DNS解析

• DNS缓存优化
• DNS预加载策略
• 稳定可靠的DNS服务

TCP网络链路优化

• 针对网络链路的优化，好像除了花钱没啥好的办法

服务端处理优化

• Redis缓存
• 数据库存储优化
• 系统的中间件优化….

浏览器下载、解析、渲染页面优化

• 尽可能精简、结构化HTML代码
• 尽可能的优化CSS文件和结构
• 定要合理的放置JS代码，尽量不要使用内联的JS代码