# 1. 知识体系

# 1.1 从 URL 输入到页面加载

打开浏览器从输入网址到网页呈现在大家面前，背后到底发生了什么？经历怎么样的一个过程？现在带大家来看看流程。

首先我们需要通过 DNS（域名解析系统）将 URL 解析为对应的 IP 地址，然后与这个 IP 地址确定的那台服务器建立起 TCP 网络连接，随后我们向服务端抛出我们的 HTTP 请求，服务端处理完我们的请求之后，把目标数据放在 HTTP 响应里返回给客户端，拿到响应数据的浏览器就可以开始走一个渲染的流程。渲染完毕，页面便呈现给了用户

总体来说分为以下几个过程:

• DNS 解析：将域名解析成 IP 地址
• TCP 连接：TCP 三次握手
• 发送 HTTP 请求
• 服务器处理请求并返回 HTTP 报文
• 浏览器拿到响应数据，解析响应内容，把解析的结果展示给用户
• 断开连接：TCP 四次挥手

# 工具

# Lighthouse

lighthouse 是一个用于诊断网页的工具，包括 性能、无障碍、渐进式、SEO 等方面，通过得分的方式来报告网页的质量。

使用方法：

• Dev Tools : 直接在 Dev Tools 中 lighthouse panel 勾选 Mode 、 Device 、Categories 之后点击 Analyze page load 即可
• lighthouse 扩展程序
• npm 包

npm install -g lighthouse

lighthouse <url>

• PageSpeed Insights : pagespeed.web.dev

转载：https://juejin.cn/post/7359077652445806642

# 需求背景

1. 从第三方采购的 vue2 + ElementUI 实现的云管平台，乙方说 2011 年左右就开始有这个项目了（那时候有 Vue 了吗，思考.jpg）。十几年的项目，我何德何能可以担此责任。里面的代码经过多人多年迭代可以用惨不忍睹来形容，吐槽归吐槽，混口饭吃，多烂的代码都得啃下去。
2. 有一天领导找到我，问我怎么回事，打开页面需要十几秒时间也太慢了，后台管理系统不要求首屏加载时间都没有这么慢，这个对外的系统超过 1 秒打开时间，都会流失很多客户，不优化好年终自己看着办吧。
3. 什么？影响年终？好的领导，我马上抽时间解决（🐂🐴）。

# 一、浏览器概述

目前的主流浏览器有 5 个：Internet Explorer、Firefox、Safari、Chrome 和 Opera 浏览器。根据 StatCounter 浏览器统计数据，目前（截止 2019 年 5 月）Firefox、Safari 和 Chrome 浏览器的总市场占有率将近 83.66%。由此可见，如今开放源代码浏览器在浏览器市场中占据了非常坚实的部分。
以上 5 种浏览器由于有着不同的浏览器内核，造成同样的 html 页面有着不同呈现。Internet Explorer 的内核是 Trident；Firefox 的内核是 Gecko；Chrome、Safari 内核是 Webkit；Opera 的内核则是 Presto。

# 前言

# 思考 1：“从输入 URL 到加载完成”，经历了哪些过程？

这个问题，相信大多数前端开发面试常被问到。我们在探索性能优化方案前，必须先弄清楚这个问题，了解页面加载到渲染的完整机制，才能找到有效的优化策略及方案。页面初始化时，从加载到渲染大致经历了 8 大过程，具体如下图所示：

1. 构建请求：根据 url 构建请求
2. 重定向：永久重定向、临时重定向
3. 查询缓存：浏览器缓存、系统缓存、路由缓存、DNS 缓存查找
4. DNS 解析：根域名、顶级域名、权威域名递归查找对应的 ip 地址
5. TCP 连接：传输层 TCP 三次握手建立连接
6. HTTP 请求：应用层 client 端向 server 端发起 HTTP 请求报文，server 端收到请求处理后，响应 client 端返回响应报文（html、js、css 等资源）
7. 浏览器解析资源：解析 HTML 生成 DOM Tree -> 解析 CSS 生成 CSSOM Tree -> render Tree -> layout -> compositing -> painting
8. 页面呈现

对浏览器工作原理，有兴趣的可以学习下李兵大佬的：《浏览器工作原理与实践》

# 什么是 Web Worker

15 年前，也就是 2008 年， html 第五版 html5 发布，这一版的发布，提供了不少新的好用的功能，如：

• Canvas 绘图
• 拖拽 drag
• websocket
• Geolocation
• webworker
• 等...

笔者之前说过： 一项新技术新的技术方案的提出，一定是为了解决某个问题的，或者是对某种方案的优化

那么 Web Worker 这个新技术解决了什么问题？有哪些优化价值呢？

让我们继续往下看...

# 项目背景

中小项目，Vue-cli3 + vue2 + webpack4

# 目标

缩短白屏时间，用户能够更快的看到我的页面！

白屏时间：从打开页面到看到页面，中间白屏停留的时间。

# 方向

1. 减少资源体积，从而缩短请求时间

2. 减少资源请求个数，从而缩短等待时间

# 前言

前面篇章我们分析了 “从输入 URL 到页面加载完成” 的完整链路，主要经历 “网络请求、浏览器渲染” 两大过程，那么优化方案我们可以围绕这两方面展开探索，此篇我们先来看 “网络层面” 的优化方案。正文开始前，我们先思考如下问题：

1. “网络层面” 可以从哪些方面着手做性能优化？
2. 前端开发可以介入 “网络请求” 哪些环节的性能优化？

如果一个网页中包含比较多的图片，在页面加载时，会严重拖慢整个页面的加载速度，这就是我们今天要解决的问题.

这篇文章聊一下如何去优化图片，提高页面的加载速度。文章中演示的例子，只是将几张大图片简单的展示出来，通过这个例子去展示如何优化.

例子的源码在 github.com/XYShaoKang/… 中，可以克隆到本地进行调试，在线预览地址 xyshaokang.github.io/image-optim…

# 前言

上一篇我们已经围绕 “网络层面” 探索页面性能优化的方案，接下来本篇围绕 “浏览器渲染层面” 继续开展探索。正文开始前，我们思考如下问题：

1. 浏览器渲染页面会经过哪几个关键环节？“渲染层面” 的优化从哪几方面着手？
2. “渲染层面” 的性能优化方案会有哪些？