转载：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。

# 前言

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

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

# 项目背景

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

# 目标

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

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

# 方向

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

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

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

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

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

# 前言

# 什么是 Web Worker

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

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

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

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

让我们继续往下看...

# 前言

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

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

# 前言

# 思考 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. 页面呈现

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

# 性能优化的意义

# 1. 性能是留住用户很重要的一环

• pinterest 重建了他们的页面以实现性能，使感知等待时间减少了 40％，从而将搜索引擎流量和注册量提高了 15％。
• 通过将平均页面加载时间减少 850 毫秒，COOK 发现他们能够将转化率提高 7％，将跳出率降低 7％，并将每个页面的页面数量增加 10％。
• BBC 发现，他们在网站加载的每一秒钟内就会损失 10％ 的用户。
• DoubleClick by Google 发现，如果网页加载时间超过 3 秒，则会有 53％ 的用户放弃移动网站的访问。