https://amatsuzero.github.io/LastStand/tags/%E8%BE%93%E5%85%A5-url-%E5%88%B0%E9%A1%B5%E9%9D%A2%E6%B8%B2%E6%9F%93%E5%AE%8C%E6%88%90/Recent content in 输入 URL 到页面渲染完成 on Last StandHugozh-cnWed, 06 Nov 2024 00:00:00 +0800https://amatsuzero.github.io/LastStand/posts/frontend/html/html-024/Tue, 05 Nov 2024 00:00:00 +0800https://amatsuzero.github.io/LastStand/posts/frontend/html/html-024/<h2 id="一网站加载概述">一、网站加载概述</h2> <p>面试过程中，常常遇到这样一道面试题，输入URL到页面加载完毕，浏览器做了哪些工作？</p> <blockquote> <p>首先输入一个URL，你会看到浏览器上面的标签页出现了一个loading图标，开始时是逆时针旋转，接着顺时针旋转，当前页面消失，显示我们常说的空白页面，接着出现显示我们请求的新页面。此时如果网络很差，你有可能看到短暂的DOM页面，然后再看到渲染后的正常页面，这是从表面看到的加载过程，实际浏览器做的要多得多。</p> </blockquote> <p>为什么浏览器这么多戏呢？直接显示不好吗，当然不行，就像喝粥，能直接吃米、喝水吗？</p> <p>在用户输入URL到页面展示，浏览器要先向服务器获取前端资源，然后再将服务器返回的字节流转化成对应的页面，每一阶段都需要浏览器对应的能力进行处理的。</p> <blockquote> <p>作为前端开发，了解整个过程其实很重要，只有知道了浏览器加载页面的整个过程，才能在开发中避免可能跳的坑，才能在发现问题后迅速定位问题，才能在性能优化时提出更多的解决方案。</p> </blockquote> <p>比如下面问题，看了文章相信你就知道了为什么了</p> <ul> <li>为什么会存在空白页面？(为了解决这个问题，各大厂都在实践各种方案）</li> <li>为什么js要在Dom后面引入</li> <li>为什么有个页面崩溃会导致多个页面崩溃</li> <li>浏览器的缓存策略是怎样的？</li> <li>为什么我们常常修改host就可以访问对应的域名</li> <li>等等</li> </ul> <h2 id="二浏览器的多进程架构">二、浏览器的多进程架构</h2> <p>为了看懂下面的内容，这里必须要了解下现代浏览器的<code>多进程架构</code>，<code>进程</code>和<code>线程</code>的关系等知识点。</p> <blockquote> <p>浏览器也是从单个进程架构一步步迭代到现代的多进程架构。</p> </blockquote> <p><img loading="lazy" src="https://amatsuzero.github.io/LastStand/posts/frontend/html/html-024/image-01.webp"></p> <p>如上图，我们可以看到<code>线程</code>和<code>进程</code>的关系</p> <ul> <li>通常一个程序实例就是一个进程，浏览器会为他分配内存空间。</li> <li>一个进程间的数据是共享的，单线程就是一个进程包含一个线程，一个线程处理所有的任务</li> <li>多线程就是，一个进程中包含多个线程可以同时执行任务，共享数据和内存</li> <li>线程不能单独存在，必须依附于进程，一个线程失败，会导致进程执行失败，进程销毁，内存会被立即回收。</li> </ul> <h3 id="1进程">1、进程</h3> <p>下图是我们打开一个掘金首页后，再打开任务管理器，观察发现，此时浏览器包括的进程有很多，浏览器主进程，GPU进程，网络进程，存储进程，音频进程，渲染进程，多个插件进程。</p> <p><img loading="lazy" src="https://amatsuzero.github.io/LastStand/posts/frontend/html/html-024/image-02.webp"></p> <p>这些进程负责的功能如下：</p> <table> <thead> <tr> <th>进程</th> <th>说明</th> </tr> </thead> <tbody> <tr> <td>浏览器进程</td> <td>负责浏览器各个子进程的通信，处理浏览器界面，包括地址栏等</td> </tr> <tr> <td>渲染进程</td> <td>也就是我们看到的图中的标签页进程，也就是我们常说的浏览器内核，v8就在这个进程。主要负责解析html、js、css渲染页面等</td> </tr> <tr> <td>网络进程</td> <td>负责发起网络请求，解析返回头信息</td> </tr> <tr> <td>GUI进程</td> <td>负责将渲染进程生成的图块转化成位图</td> </tr> </tbody> </table> <p>渲染进程是运行在沙箱之中的，可以执行js，但是不能获取系统权限，和浏览器进程通过IPC通讯。这是为了保证浏览器进程的安全，锁进沙箱，即使有恶意代码，也不能突破沙箱读取或写入系统信息。</p> <h3 id="2线程">2、线程</h3> <p>通过上图，我们已经知道线程是不能独立存在的，必须依附于进程。这里我们主要关注下渲染进程，因为他的主要工作就是：完成页面的渲染和展示。</p> <p><img loading="lazy" src="https://amatsuzero.github.io/LastStand/posts/frontend/html/html-024/image-03.webp"></p> <p>如图，我们可以看到渲染进程包括很多线程，除了图上展示的，还有合成线程等，各有各的作用，具体内容，我们将会在后面一章节，浏览器渲染原理分析中在来讨论。</p> <h2 id="三浏览器请求的具体流程">三、浏览器请求的具体流程</h2> <p>从用户输入域名到浏览器渲染页面完成的过程，可以分为以下几个部分：</p> <ul> <li>1、输入信息处理</li> <li>2、网络请求</li> <li>3、服务器返回请求资源</li> <li>4、浏览器渲染</li> </ul> <p>这里每一步涉及到的知识都非常多，其中缓存也在每个阶段占了很大比重，接着展开描述前三个阶段：</p> <h3 id="1地址栏输入信息处理">1、地址栏输入信息处理</h3> <p>当输入一个URL，浏览器会判断输入信息是检索信息还是请求URL</p> <ul> <li>如果是检索的信息，就构建请求搜索的URL，调用浏览器默认的搜索引擎进行检索。</li> <li>如果符合URL格式，浏览器主进程就通过IPC通信机制将URL发送给网络进程。</li> </ul> <h3 id="2网络进程发起网络请求">2、网络进程发起网络请求</h3> <p>1）网络进程首先会查找浏览器缓存，判断缓存是否存在，是否过期</p> <ul> <li>如果存在且不过期，就直接返回缓存信息。具体的缓存策略可以接着看下面的<a href="https://fe.ecool.fun/knowledge-learn#cache">浏览器缓存策略</a></li> </ul> <p>2）如果没有缓存或过期，就开始进行DNS解析</p> <ul> <li>DNS解析的过程也很复杂，最终目的就是拿到目标主机的IP地址，具体的解析过程可以看下面的域名解析</li> </ul> <p>3）建立http连接或https连接</p> <ul> <li>http通过三次握手建立连接</li> <li>https需要建立TLS连接，浏览器会验证网站的数字证书是否合法，是否到期，是否安全等，这里https有自己的一套认证逻辑，我们重点不在这一块。</li> <li>这里两个问题常被问到，不了解可以学习一下<br> <ul> <li>http和https的区别？</li> <li>简述三次握手、四次挥手？</li> </ul> </li> </ul> <p>4）发送请求</p> <ul> <li>网络进程会构建http请求头，向服务器发送实际请求</li> </ul> <p>5）网络传输，服务器处理，返回对应的资源</p> <ul> <li>请求从应用层发出，经过运输层、网络层、物理层、数据链路层找到服务器，服务器拿到请求信息，返回对应的资源</li> <li>这里的服务器可能是代理服务器，也可能是CDN节点，会判断当前数据是否存在缓存，如果有缓存且有效，直接返回（具体看配置的缓存策略），否则才会从服务器获取。</li> <li>网络传输数据也是很复杂的过程，具体可以看下面简单的介绍<a href="https://fe.ecool.fun/knowledge-learn#net">计算机网络体系模型</a></li> </ul> <h3 id="3服务器返回对应资源">3、服务器返回对应资源</h3> <p>1）处理返回信息</p>