广州蓝景分享—遇到网页慢，我们该怎么办？

前言

移动互联网时代，用户对于网页的打开速度要求越来越高。首屏作为直面用户的第一屏，其重要性不言而喻。优化用户体验更是我们前端开发非常需要 focus 的东西之一。

从用户的角度而言，当打开一个网页，往往关心的是从输入完网页地址后到最后展现完整页面这个过程需要的时间，这个时间越短，用户体验越好。所以作为网页的开发者，就从输入url到页面渲染呈现这个过程中去提升网页的性能。

所以输入URL后发生了什么呢？在浏览器中输入url会经历域名解析、建立TCP连接、发送http请求、资源解析等步骤。

http缓存优化是网页性能优化的重要一环。本文主要从网页渲染过程、性能指标的解读以及CDN应用优化三个角度，并对性能定位和性能优化做一个小结。

关键词：

1. 通过工具（如何使用工具，怎么去看）定位问题

2. 发现问题，对应的措施（提升页面）

3. 监控（优化的东西 是持续性，不像bug一次性解决）

本质：两大范畴：加载 和 渲染

网页渲染过程

首先谈谈拿到服务端资源后浏览器渲染的流程：

1. 解析 HTML 文件，构建 DOM 树，同时浏览器主进程负责下载 CSS 文件

2. CSS 文件下载完成，解析 CSS 文件成树形的数据结构，然后结合 DOM 树合并成 RenderObject 树

3. 布局 RenderObject 树 （Layout/reflow），负责 RenderObject 树