从输入URL到页面加载完成的过程：首先通过DNS（域名解析）把URL解析为对应的IP地址，然后与该IP地址确定的服务器建立起TCP网络连接。随后向服务器发送HTTP请求，服务器处理完HTTP请求后把目标数据放在HTTP响应里面呈现给客户端，拿到目标数据的浏览器开始渲染把页面呈现给用户，并且时时等待响应用户的操作。
归纳为：1、DNS解析
2、TCP连接
3、HTTP请求
4、服务端处理，HTTP响应返回
5、拿到目标数据，解析数据并渲染结果，向用户展示结果
还有浏览器端的性能优化，涉及到资源加载优化、服务端渲染、浏览器缓存机制的利用、DOM的构建，网页排版和渲染过程、回流和重绘、DOM合理操作规避。
其中DNS解析和TCP网络连接，前端能做的非常有限。所以HTTP请求优化就成为我们优化的核心了。
前端优化主要有：
1、webpack性能调优与Gzip原理优化
2、浏览器的缓存机制和缓存策略
3、图片优化——质量和性能的平衡点
4、本地存储——Cookie、Web Storage、IndexDB
5、CDN的缓存和回源机制
6、服务端渲染
7、浏览器运行机制
8、DOM优化原理与实践
9、Event Loop与异步更新策略
10、回流和重绘
11、首屏优化
图片优化
针对图片优化，与其说是优化不如说是在‘权衡’。我们平常图片优化都是压缩图片或是选择体积较小的图片格式，这个压缩过程是以牺牲图片质量为代价的，就会导致页面显示时图片失真。因此我们应该尽量寻找一个在质量和性能之间的平衡点。
不同业务场景下的图片选择方案
使用较为广泛的web图片格式有：JPEG/JPG、PNG、WEBP、Base64、SVG。
在计算中，像素是采用二进制数来表示，不同的图片格式像素与二进制数的对应关系不同。像素对应的二进制位数越多，则表示的颜色种类越多，成像的效果越细腻，但是文件体积也越大。一个二进制表示两种颜色（0|1对应黑白），一种图片格式对应的二进制位数有N个，那就可以呈现2的N次方种颜色。
JPEG/JPG：特点是有损压缩，体积小，加载快，不支持透明。
使用场景：JPG适合用于呈现热菜丰富的图片，在日常的开发中，JPG图片经常作为大的背景图、轮播图或是Banner图。比如两大电商网站对大图片的处理，就是对JPG图片应用场景的最佳写照。用JPG来呈现大图片，既可以保留图片的质量，又不会担心图片的体积，是一种比较广泛使用的方案。
缺点：在处理一些矢量图形和logo等这些线条感很强、颜色对比强烈的图片时，认为压缩就导致图片模糊非常明显。另外，JPG图像不知此透明度处理，透明图片只能用PNG来呈现了。
PNG-8和PNG-24：无损压缩、质量高、体积大、支持透明
优点：无损压缩的高保真图片格式。8和24都是二进制数的位数，8位的PNG支持256中颜色，24位的PNG可以支持1600万种颜色。在不考虑文件大小只在乎最佳的显示效果时，推荐使用PNG-24。但是在适合使用PNG时会优先选择PNG-8
应用场景：主要用PNG来呈现小的LOGO、颜色简单对比强烈的图片或是背景。
SVG：文本文件，体积小，不失真，兼容性好。
SVG是一种基于XML语法的图像格式。SVG对图像的处理不是基于像素，而是基于对图像的形状描述。
和JPG、PNG相比较，SVG文件体积更小，可压缩性更强。SVG作为矢量图最大的优点在于图片可以无限放大还不失真，一张SVG图片可以适配多种分辨率。另外SVG是文本文件，可以像写代码一样定义SVG，放在HTML中称为DOM的一部分。也可以把对图像的描述写入以.svg为后缀的文件中，在img标签中引入即可。
把SVG直接写入HTMl中
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200">
<circle cx="50" cy="50" r="50" />
</svg>
</body>
</html>
把SVG写入独立文件再引入HTML中：
<img src="文件名.svg" alt="">
base64：文本文件、依赖编码、小图标解决方案
base64不是图片格式，是一种编码方式，和雪碧图一样。
雪碧图（CSS Sprites）：把小图标和背景图像合并到一张图片上，再使用css定位来显示其中的每一部分，就是把多个小图标合成一个图像文件，相对于一个图标一个图像文件来说，单独的一张图片需要的HTTP请求次数更少。如下图：
而base64是为了减少加载网页图片时对服务器的请求次数，提升网页性能。base64是一种用于传输8Bit字节的编码方式，通过对图片进行Base64编码，可以直接把编码结果写入HTML中或者是CSS中，减少HTTP请求次数。如：
data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAOMAAADdCAYAAABJ/sWRAAAgAElEQVR4nO29B7gkVZk3/na8cXIehhlmiAIyIChBJauLiN+j64ooouhnWFddZdcVd10X9VnTKgpmV/8oBoy7EvyviwoiBlBAsqSJMIEJ987Nnes7v7fq7XvumVPVVdXVfe8d+jdPT3ffrjp10nvOe96YGhsbc…
这样浏览器直接把这段字符串解码为一张图片，就不用发送HTTP请求了。但是Base64编码后，图片文件体积变为原来的4/3，文件体积变大，浏览器解析Base64的时间开销。这些因素在使用Base64时必须考虑的。所以在一张图片满足以下条件时 可以大胆的使用Base64编码：
1、图片实际尺寸很小
2、图片无法像雪碧图一样和其他小图标结合（雪碧图是主要的减少HTTP请求途径）
3、图片更新频率低（不需要重复编码和修改文件内容，维护成本很低）
WEBP：2010年被提出，是Google专为WEB开发的一种旨在加快图片加载速度的图片格式，支持有损压缩和无损压缩。
WEBP受到最大的限制就是浏览器的兼容性。