转载本文请联系前端引力公众号。1写在前面，页面加载到最终渲染显示大致是这样的：用户在浏览器中输入网址回车后，浏览器会向DNS服务器发起DNS查询，获取IP地址在以便将URL解析为IP地址。连接建立后，浏览器可以发起HTTP请求，服务器接受请求后进行响应。浏览器从响应结果中获取数据，解析并渲染，最终呈现在用户面前的是一个网页。简而言之分为三个阶段：客户端发起请求阶段服务器端数据处理请求阶段客户端页面渲染阶段2客户端请求阶段优化要点检查该站点是否已经存在。如果不是，则通过DNS查询从域名服务器获取IP地址，然后客户端向服务器发起HTTP请求，通过TCP三次握手和TLS协商建立连接。本地缓存本地缓存可以让静态资源加载更快。当客户端发起请求时，可以直接从客户端获取静态资源，无需考虑服务器请求。但是在实际开发中，很多前端程序员会忽略本地缓存的优化，这会导致：在客户端请求阶段，假设一个项目列表页面的DNS生成时间为835ms，TCP三次握手和TLS协商为436ms，数据返回为412ms，所以在强网情况下一个请求的响应时间约为1233ms。在弱网情况下，一个请求连接需要2秒，但是如果使用缓存处理，可以说几毫秒内就可以完成请求。强缓存：指浏览器加载资源时，根据请求头的expires和cache-control判断是否命中客户端缓存。协商缓存：是指浏览器会先向服务器发送请求，通过last-modified和etag验证资源是否命中客户端缓存。DNS查询DNS之所以能够成为前端性能的优化点，是因为每次DNS查询都要经过客户端到信号接收站，再到认证DNS服务器的过程。但是每次查询都需要花费很多时间来完成这个过程。优化方式是先让DNS查询缓存起来，浏览器提供DNS预取的接口。我们可以在打开浏览器或Webview的同时进行配置。HTTP请求对HTTP请求最大的优化点就是请求阻塞，即为了保证访问速度，浏览器会默认保持一定数量的同域下资源连接，过多则阻塞要求。为此，我们提前规划域名是非常重要的。我们可以先查看当前页面需要使用哪些域名，最重要的是首屏需要使用哪些域名。域名哈希：就是通过不同的域名增加并行连接请求的数量。静态服务器地址pic.yichuan.com做成支持pic0-5的6个域名，每次请求随机选择一个域名地址，因为6个域名同时可用，最多36个并行连接可以制作。一个完整的HTTP请求需要经过DNS查找，建立TCP握手，浏览器发起HTTP请求，服务器接受请求并处理并返回响应结果，浏览器再次接收响应。但是每次HTTP请求都需要加载很多文件，建立连接，耗费大量时间。如果文件很多，需要发起很多请求，将几个小文件合并成一个大文件，可以减少HTTP请求，减少访问时间，提高效率和速度。3服务器端数据处理阶段的优化点服务器端数据处理阶段是指WevServer收到请求后从数据存储层取数据，返回给前端的过程。服务器程序收到HTTP请求后，会做一些请求参数处理和权限验证。这个过程的优化点是是否做数据缓存处理，是否做gzip压缩，是否有重定向。Gzip压缩是一种压缩技术。gzip压缩后的资源下载速度会快很多，可以大大提高页面的显示速度。数据缓存中数据缓存的几种方法：使用ServiceWorker的数据接口缓存使用本地存储接口缓存CDNServiceWorker：是浏览器的一个高级属性，本质上是一个请求代理层，它存在的目的就是拦截和处理网络数据要求。接口缓存与本地存储：指程序在一些对数据时效性要求不高的页面上，第一次请求数据后，将数据存储在本地存储中。下次请求，先去缓存中取数据，如果没有，再向服务器发起请求。CDN：基本思想是通过在全网布设节点服务器，构建一个智能虚拟网络，将用户请求定向到离用户最近的服务节点。为什么数据缓存会成为性能优化点？这是因为每次请求一个数据接口，都需要从客户端逐层返回数据到后端服务器，再到后端的数据存储层，最后返回给客户端。此请求响应需要很长时间。重定向重定向是指网站资源迁移到其他位置后，当用户访问该站点时，程序会自动将用户请求从一个页面转移到另一个页面的过程。重定向的三种方式：服务端302重定向META标签实现的重定向前端通过window.location的Javascript重定向都将触发新的DNS查询，从而导致新的TCP三次握手和TLS协商和生成新的HTTP请求，而这些会导致请求过程中花费更多的时间，从而影响前端性能。当前服务器对数据进行处理和聚合后，客户端获取数据，然后进入解析和渲染阶段。解析阶段是HTML解析器将页面内容转化为DOM树和CSSDOM树的过程。所谓DOM树就是文档对象模型（DocumentObjectModel），它描述了标签之间的层次结构。CSSDOM树，即CSS对象模型，主要描述了样式集的层次结构。CSS解析器遍历每一条规则，将CSS规则解析成一组浏览器可以解析处理的样式，最后组合浏览器中的默认样式，形成具有父子关系的CSSDOM树。4页面解析和渲染阶段的优化点主线程会计算DOM节点最终的样式，生成布局树，记录参与页面布局的节点和样式。DOM树解析中的优化点解析和渲染阶段的流程环节较多，逻辑复杂，优化点较多，如：DOM树构建过程、CSSDOM树生成阶段、重排重绘过程等。当HTML标签不满足网络语义时，浏览器需要更多的时间来解析DOM标签的含义。DOM节点数越多，构建DOM树的时间就越长，进而延长解析时间，延缓页面显示速度。当文档包含标签，DOM构建过程就会被挂起。因此，外部标签，导致页面解析阶段从200ms变成1s。对此，加载外部脚本的时机一定要明确。如果可以延迟加载，就选择延迟加载，使用defer和async告诉浏览器在等待脚本下载时不要阻塞解析过程。CSS执行会阻塞渲染和JS执行，而JS加载和执行会阻塞HTML解析和CSSDOM构建。如果这些CSS和JS标签放在
标签中，需要很长时间加载和解析，那么页面就会出现白屏。因此，JS文件应该放在底部（不会阻止DOM解析，但会阻塞渲染），HTML解析后加载JS文件，尽快将页面内容呈现给用户.之所以要把css文件放在head中，是因为先加载html再加载css，会让用户第一次看到没有样式的页面。为了避免这种情况，CSS文件需要放在头部。当然，JS文件也可以放在header中，但是需要在