嘉飞博客

当用户在浏览器中输入域名，到用户看到完整的页面，这个过程发生了一系列的事情，开发者就可以在这个过程中做一些优化，给用户一个快速和良好的访问体验。

浏览器输入域名后发生了什么

1.DNS域名解析

2.建立TCP连接

3.发送HTTP请求

4.服务器处理请求

5.返回响应结果

6.关闭TCP连接

7.浏览器解析HTML

8.浏览器布局渲染

DNS域名解析-建立TCP连接-发送HTTP请求

浏览器拿到域名后，会进行DNS域名解析的操作，本文就不详细讲述这个过程了。

DNS域名解析过后，浏览器会拿到一个IP地址（如果网站套了CDN，就会拿到一个离自己最近的IP地址，这也是CDN快的原因，拉近物理距离进行加速），然后浏览器就会用IP+端口（默认80）去请求服务器的资源。

优化方案：这个阶段，开发者能做的优化手段就是给网站域名套上CDN，用钱来优化网站，剩下的就看用户的网速快不快了。

服务器处理请求

这个阶段需要区分一些情况，比如：网站是一个单页应用，这个时候服务器一般是Nginx代理HTML静态文件；或者网站是动态的，比如使用了PHP、Vue-ssr、React-ssr这些动态渲染技术。

动态网站本文就不介绍了，这已经不是单纯的前端了，还需要懂后端技术。

静态-单页网站优化方案：

1、压缩网站的静态文件为gzip。两种方式，一是在代码打包阶段，直接生成gzip文件，然后开启Nginx加载gzip的功能；二是启用Ngxin的主动压缩功能，在请求到达Ngxin的回收主动把静态文件压缩gzip，这方式比较消耗服务器的性能，不建议使用。

2、减少静态文件的体积。在代码打包阶段，将js、css等代码进行压缩，webpack、rollup这些工具都能做到，上面说的gzip也是一种减少体积的方式。

3、增加服务器带宽，用钱来优化

返回响应结果-关闭TCP连接-浏览器解析HTML

返回响应结果、关闭TCP连接没啥说的，在浏览器拿到HTML文本之后，开始解析，这个阶段有一些优化手段。

1、减少dns查找次数。这里的减少次数是针对首屏加载的，如果首页的资源使用了CDN，尽量不要使用太多的域名，避免多次查询dns，但是也不要太极端，把所有的资源都集中在一个CDN域名上，浏览器对同一个域名的并发加载数是有限制的，2-3个CDN域名也差不多了

2、合理的dns预加载。这里的dns预解析就是为了后面加载资源使用的，类似淘宝这样的网站，页面很多，资源很多，资源的域名指向也是不同的（下面的那段代码是从淘宝首页复制的），它会对指定的域名进行dns查找，然后就可以缓存起来，后面在加载对应资源的时候就能更快的

这是从淘宝首页复制出来的一部分  在head中的
<link rel="dns-prefetch" href="//g.alicdn.com" /> 
<link rel="dns-prefetch" href="//img.alicdn.com" /> 
<link rel="dns-prefetch" href="//tce.alicdn.com" /> 
<link rel="dns-prefetch" href="//gm.mmstat.com" />

3、单页面网站一般都会有首页白屏的问题，可以采用预渲染的方案，在代码打包阶段（要么使用服务端渲染也能避免首页白屏问题）。有两种方思路，一是构建一个完整的HTML静态页面；二是采用骨架组件，渲染一个骨架屏，给用户提供一个缓冲时间，避免白屏时间长给用户困惑。

4、减少HTTP请求

在http1.0协议的时代，因为协议不支持 keep-alive ，每一次的资源请求都会重复的开启连接和关闭连接，会浪费很多时间，所以人为的减少HTTP请求次数尤为重要。在http1.1之后，协议支持 keep-alive ，多次资源请求可以共用一个TCP连接，不需要再频繁的开启和关闭了，不过下面的那些操作还是建议使用上，毕竟也是一点优化。

必要的内联css，首页关键的样式需要直接放在 style 标签中（比如说首页的整体布局的样式或者骨架屏的样式），随着首页的html返回，让用户能在第一时间看到页面的大概内容，避免再次去加载css增加白屏时间

<style> body {xxxxxx} </style>

必要的内联js，减少额外的HTTP请求（同上一条）

CSS Sprite，俗称雪碧图，多张小图片拼接成一张图片

内联图片，使用 base64 将图片嵌入到 img 中，主要是对一些小图片做处理

5、合理利用浏览器并行加载

现代浏览器早就可以并行加载了（http1.1后），貌似chrome可以并行6个请求，所有的请求都可以并行，不管是ajax、图片加载、js加载、css加载..，所以在首屏加载的时候，合理的安排需要加载的script标签，能够更快的加载完资源

6、将script标签放在body标签的最后，让浏览器优先解析css和html，先渲染页面再执行js代码逻辑。

浏览器布局渲染

到了这个阶段，基本上能做就只有代码方面的优化了。