正文

从输入url到页面加载显示完成的过程

小丁码园  小丁码园  2022-08-28  427

关键词：

前言：“一个页面从输入 URL 到页面加载显示完成，这个过程中都发生了什么？” 这个问题我想大多数人都不会陌生，好像是前端面试题经常会出现的，在此我也好好梳理梳理了一番，总结成这篇文章，希望能对和我一样在前端道路上奋进的小白们有所帮助，一起学习，交流。

我把这个问题拆解成两个过程：

1. 用户输入 url ---> 客户端（浏览器）拿到服务端的数据

2. 浏览器拿到数据 ---> 呈现页面（也就是浏览器工作过程）

搞清楚这两个过程后，我们也算是完整的回答了前言部分所提的问题了。

一. 输入网址到浏览器获得资源的过程

举个例子：

1. 输入网址： http://www.cnblogs.com/dinghuihua/p/6674719.html

把url分成协议、网络地址、资源路径三部分

协议：从该计算机获取资源的方式，有HTTP、HTTPS、FTP等，不同协议有不同的通讯内容格式
网络地址：指连接网络上的哪一台计算机，可以是域名、IP地址，可以包括端口号。如：“www.cnblogs.com”、“192.168.0.91:8080”
资源路径：指从服务器上获取哪一项资源。如 “/dinghuihua/p/6674719.html”

2. 通过DNS解析获得网址的对应IP地址

当发送一个url请求时，不管这个url是web页面的url还是web页面上的每个资源的url，浏览器都会开启一个线程处理该请求，同时在远程DNS服务器上启动一个DNS查询，这能使浏览器获得请求对应的IP地址

PS: 脑补为啥有DNS这玩意...因为要人类记住辣么多计算机能记住的IP地址怎么可能嘛...它就是起到域名解析的作用的

dns是将域名和IP进行绑定的，通过域名找到互联网上实际的物理地址的服务器，找到这个服务器后，服务器会把请求解析，找到该文件(上下文)后将其推送给浏览器，浏览器就会把这个html文件通过它自己的浏览器内核定义好的规范解析渲染出来(渲染:呈现元素)

这一步包括DNS的具体查找过程

浏览器缓存 – 浏览器会缓存DNS记录一段时间。有趣的是，操作系统没有告诉浏览器储存DNS记录的时间，这样不同浏览器会储存个自固定的一个时间（2分钟到30分钟不等）。
系统缓存 – 如果在浏览器缓存里没有找到需要的记录，浏览器会做一个系统调用（windows里是gethostbyname）。这样便可获得系统缓存中的记录。
路由器缓存 – 接着，前面的查询请求发向路由器，它一般会有自己的DNS缓存。
ISP DNS 缓存 – 接下来要check的就是ISP缓存DNS的服务器。在这一般都能找到相应的缓存记录。
递归搜索 – 你的ISP的DNS服务器从跟域名服务器开始进行递归搜索，从.com顶级域名服务器到Facebook的域名服务器。一般DNS服务器的缓存中会有.com域名服务器中的域名，所以到顶级服务器的匹配过程不是那么必要了。

3. 浏览器与远程web服务器通过TCP三次握手协商来建立一个 TCP/IP 连接

该握手包括一个“同步报文”，一个“同步-应答报文”和一个“应答报文”，这三个报文在浏览器和服务器之间传递。该握手首先由客户端尝试建立起通信，而后服务器应答并接受客户端的请求，最后由客户端发出该请求已经被接受的报文。

4. 浏览器通过TCP/IP连接向web服务器发送一个 HTTP 请求

5. 服务器的永久重定向响应（从 http://example.com 到 http://www.example.com）

6. 浏览器跟踪重定向地址

7. 服务器处理请求

8. 服务器返回一个 HTTP 响应

远程服务器找到要请求的资源并使用 HTTP 响应返回该资源，值为 200 的 HTTP 响应状态表示一个正确的响应。

9. 到这里便是浏览器的工作过程了。。。

　　浏览器显示 HTML
　　浏览器发送请求获取嵌入在 HTML 中的资源（如图片、音频、视频、CSS、JS等等）
　　浏览器发送异步请求

二. 浏览器获得资源后到呈现页面的过程

常用的浏览器有很多，有IE、Firefox、Safari、Chrome以及Opera，还有很多国产浏览器，像360浏览器啊这些，它们的存在共同点都是为了让用户看到各种各样的网站，它们不同的是内核的不同，因此可能会给前端工程师们带来一些浏览器的差异性兼容性问题。

* 浏览器主要的功能：通过向服务器请求，来获取你所想要的网络资源，并将它渲染到浏览器窗口中。而资源类型通常是html文件，但也可能是PDF，图片或者是其他类型的资源。

* 浏览器的内核（渲染引擎）有：

user agent : 代表浏览器内核,不特指哪个浏览器

浏览器内核	厂商前缀	代表浏览器	内核背景
Trident	－ms－	IE浏览器系列	该内核程序在1997年的IE4中首次被采用，是微软在Mosaic代码的基础之上修改而来的，并沿用到IE11，也被普遍称作”IE内核”。Trident实际上是一款开放的内核，其接口内核设计的相当成熟，因此才有许多采用IE内核而非IE的浏览器(壳浏览器)涌现。
Gecko	－moz－	Firefox	Netscape6开始采用的内核，后来的Mozilla FireFox(火狐浏览器)也采用了该内核，Gecko的特点是代码完全公开
Webkit	－webkit－	Safari	Safari内核,Chrome内核原型，开源，包含了来自KDE项目和苹果公司的一些组件，主要用于Mac OS系统，它的特点在于源码解构清晰、渲染速度极快，缺点是网页代码的兼容性不高，导致一些编写不标准的网页无法正常显示
Blink	－webkit－	Chrome、opera等除IE、Firefox、Safari之外的几乎所有浏览器（几乎所有国产双内核浏览器（Trident/Blink）如360、猎豹、qq、百度等）	Blink是一个由Google和Opera Software开发的浏览器排版引擎，是基于Webkit内核的子项目
Presto	－o－	Opera前内核［现已废弃］	Opera12.17及更早版本曾经采用的内核，现已停止开发并废弃

其实浏览器拿到资源数据后，便开始浏览器渲染引擎的基本渲染流程

渲染引擎开始解析HTML文档，并把标签转化成内容树中的DOM节点。同时它也开始解析样式数据，外链的css文件以及style标签内的样式。所有这些样式数据以及HTML中的可见性指令都是用来创建另一棵树－－render 树。

现在页面就呈现在我们面前了。。。

我看到有其他关于这个问题的解释，也挺完善的，截个图补充补充。。。

扩展：因为有这么个过程，所以我们就可以在不同时期干不同事情。页面加载完成有两种事件：

执行顺序

ready，表示文档结构（DOM结构）已经加载完成（不包含图片等非文字媒体文件），
onload，指示页面包含图片等文件在内的所有元素都加载完成

$(function(){
    // do something
});

// 其实这个就是jQuery ready()的简写，他等价于：
 
$(document).ready(function(){
    //do something
})

// 或者如下的写法，因为jQuery 的默认参数是：“document”；
$().ready(function(){
    //do something
})

多函数加载的问题

因为js没有重载，所以后面的函数会覆盖前面的同名函数

<body onload="a();b()">
</body>

(1). body中声明的onload事件（DOM0级别）会被后面的window.onlad()（DOM0级别）覆盖

<body onload="a();b()">
</body>

<script>
    window.onload = function(){
　　　　alert('world');
　　}
</script>

结果只弹出“world”

(2). 可以在body的onload中实现多函数执行

<body onload="a();b()">
</body>
<srcipt>
    function a(){alert('a');}
    function b(){alert('b');}
</script>

结果分别弹出“a”和“b”

(3). 多个window.onload()会产生覆盖

window.onload = function(){alert('hello');}
window.onload = function(){alert('world');}

结果只会弹出“world”

(4). 用jQuery的话，可以用多个load函数实现，它们会按顺序依次执行

$(window).load(function() {
    alert("hello");
});
$(window).load(function() {
    alert("world");
});

一个页面从输入url到页面加载显示完成，这个过程中都发生了什么？

一个页面从输入URL到页面加载显示完成，这个过程中都发生了：1.浏览器补全URL地址在输入完URL之后，浏览器会自动检查该地址是否完整，例如是否有添加https协议，若发现不完整，会自动补全。2.向DNS查询IP地址每个域名都对应... 查看详情

一个页面从输入url到页面加载显示完成的过程中都发生了什么

前端面试/笔试必考问题，越详细越好先简单得讲：浏览器根据请求的URL交给DNS域名解析，找到真实IP，向服务器发起请求；服务器交给后台处理完成后返回数据，浏览器接收文件（HTML、JS、CSS、图象等）； ... 查看详情

浏览器从输入url到页面加载显示完成全过程解析

...解析的过程，先进行缓存的查看）；　　1、在浏览器中输入www.qq.com域名，操作系统会先检查自己本地的hosts文件是否有这个网址映射关系，如果有，就先调用这个IP地址映射，完成域名解析。　　2、如果hosts里没有这个域名... 查看详情

一个页面从输入url到页面加载显示完成，这个过程中发生了什么？

1.浏览器通过DNS查找域名对应的IP地址（DNS查询：浏览器缓存-->系统缓存-->路由器缓存-->ISPDNS缓存-->根域名服务器）2.浏览器向Web服务器发送一个HTTP请求（TCP三次握手）3.服务器301重定向（从http://example.com重定向到http://ww... 查看详情

一个页面从输入url到页面加载显示完成，这个过程中都发生了什么？

<divstyle="background:#ff6a00;color:#0;font-size:small;"> <p> 作者：查看详情

一个页面从输入url到页面加载显示完成，中间都经历了什么

...一般会经历以下几个过程：1、首先，在浏览器地址栏中输入url2、浏览器先查看浏览器缓存-系统缓存-路由器缓存，如果缓存中有，会直接在屏幕中显示页面内容。若没有，则跳到第三步操作。3、在发送http请求前，需要域名解析... 查看详情

从输入url到页面加载完成的过程

转载自：http://www.tuicool.com/articles/V7JN32Z根据URL请求页面过程说实话，这类文章网上一抓一大把，而我仍想写这篇博客，一方面是想再仔细缕一下这个过程，另一方面是希望用清晰的语言和结构来解释，也算是小小地挑战一下自己... 查看详情

爱创课堂每日一题第五十七天-一个页面从输入url到页面加载显示完成，这个过程中都发生了什么？

分为4个步骤：（1），当发送一个URL请求时，不管这个URL是Web页面的URL还是Web页面上每个资源的URL，浏览器都会开启一个线程来处理这个请求，同时在远程DNS服务器上启动一个DNS查询。这能使浏览器获得请求对... 查看详情

一个网页从输入url到页面加载完成的过程中都发生了什么事情？

性能分析从开始输入url到页面加载完成的过程中都发生了什么事情？

【稍后更新】第一个问题：从输入URL到浏览器接收的过程中发生了什么事情？第二个问题：浏览器如何向网卡发送数据？第三个问题：数据如何从本机网卡发送到服务器？第四个问题：服务器接收到数据后会进行哪... 查看详情

从输入url到页面加载完成的过程中都发生了什么

根据URL请求页面过程过程概述浏览器查找域名对应的IP地址；浏览器根据IP地址与服务器建立socket连接；浏览器与服务器通信：浏览器请求，服务器处理请求；浏览器与服务器断开连接。天啦撸，结束了？也太简单了吧。。。各... 查看详情

一个页面从输入url到加载显示完成，发生了什么？

面试经典题——URL加载一、涉及基本知识点：1.计算机网络五层因特尔协议栈：应用层（dns、http）：DNS解析成IP并完成http请求发送；传输层（tcp、udp）：三次握手四次挥手模式建立tcp连接；网络层（IP、ARP）：IP寻址；数据链路... 查看详情

从输入url到页面加载发生了什么

...蛮适合我。原文链接https://segmentfault.com/a/1190000006879700从输入URL到页面加载发生了什么最近在进行前端面试方面的一些准备，看了网上许多相关的文章，发现有一个问题始终绕不开:在浏览器中输入URL到整个页面显示在用户面前时... 查看详情

经典面试题：一个页面从输入url到加载显示完成，发生了什么？（转）

一、涉及基本知识点：1.计算机网络五层因特尔协议栈：应用层（dns、http）：DNS解析成IP并完成http请求发送；传输层（tcp、udp）：三次握手四次挥手模式建立tcp连接；网络层（IP、ARP）：IP寻址；数据链路层（PPP）：将请求数据... 查看详情

从输入url到页面加载发生了什么

从输入URL到页面加载发生了什么转自：https://segmentfault.com/a/1190000006879700作者写得很不错，作者忽略了的，我加了上去，完善了一些，如get与post的区别等总体来说分为以下几个过程:DNS解析TCP连接发送HTTP请求服务器处理请求并返... 查看详情

从输入url到页面呈现经历了哪些？dom文档加载的步骤？

DNS解析建立TCP连接发送http请求服务器接受请求并返回信息浏览器处理返回信息渲染页面断开链接DOM解析过程：解析HTML结构。加载外部脚本和样式表文件。解析并执行脚本代码。DOM树构建完成。//DOMContentLoaded对应jq的ready事件。加... 查看详情

从输入url到页面加载完成的过程中都发生了什么事情？

解析URL当你在浏览器中输入URL并敲回车之后，浏览器会把URL分成几部分：1、协议：从计算机获取资源的方式，常见的HTTP、FTP等2、网络地址：域名或者IP，指示网络中的哪一台计算机3、资源路径：指示在该计算机上获取哪一个资... 查看详情

一个页面从输入url到加载完成，发生什么事

1、浏览器会开启一个线程来处理这个请求，对URL分析判断如果是http协议就按照Web方式来处理；2、调用浏览器内核中的对应方法，比如WebView中的loadUrl方法；3、通过DNS解析获取网址的IP地址，设置UA等信息发出第二个GET请求；4、... 查看详情