乐趣区

关于前端:浏览器从输入URL到页面加载的全过程

jiezi

1. 首先在浏览器中输出 URL

2. 查找缓存：浏览器先查看浏览器缓存 - 零碎缓存 - 路由缓存中是否有该地址页面，如果有则显示页面内容。如果没有则进行下一步。

  浏览器缓存：浏览器会记录 DNS 一段时间，因而，只是第一个中央解析 DNS 请    求；操作系统缓存: 如果在浏览器缓存中不蕴含这个记录，则会使零碎调用操作系统，获取操作系统的记录 (保留最近的 DNS 查问缓存)；路由器缓存：如果上述两个步骤均不能胜利获取 DNS 记录，持续搜寻路由器缓存；ISP 缓存：若上述均失败，持续向 ISP 搜寻。

3.DNS 域名解析：浏览器向 DNS 服务器发动申请，解析该 URL 中的域名对应的 IP 地址。DNS 服务器是基于 UDP 的，因而会用到 UDP 协定。

 以 dns 解析 www.example.com 为例。从浏览器 dns 缓存中，获取 dns 解析后果，获取胜利的话，间接返回。失败进入下一步
从本地 dns 缓存获取解析后果，失败的话进入下一步
向设置的 dns 服务器（个别为 ISPInternet 服务提供商的 dns 服务器）发动 dns 解析申请（其中路由器缓存和运营商 dns 缓存须要思考），失败的话进入下一步
ISP 的 DNS 解析程序将 www.example.com 的申请转发到 DNS 根名称服务器。ISP 的 DNS 解析程序再次转发 www.example.com 的申请，这次转发到 .com 域的一个 TLD 名称服务器。.com 域的名称服务器应用与 example.com 域相干的四个 Amazon Route 53 名称服务器的名称来响应该申请。ISP 的 DNS 解析程序抉择一个 Amazon Route 53 名称服务器，并将 www.example.com 的申请转发到该名称服务器。Amazon Route 53 名称服务器在 example.com 托管区域中查找 www.example.com 记录，取得相干值，例如，Web 服务器的 IP 地址 (192.0.2.44)，并将 IP 地址返回至 DNS 解析程序。ISP 的 DNS 解析程序最终取得用户须要的 IP 地址。解析程序将此值返回至 Web 浏览器。DNS 解析程序还会将 example.com 的 IP 地址缓存 (存储) 您指定的时长，以便它可能在下次有人浏览 example.com 时更快地作出响应。无关更多信息，请参阅存活期 (TTL)。Web 浏览器将 www.example.com 的申请发送到从 DNS 解析程序中取得的 IP 地址。这是您的内容所处地位，例如，在 Amazon EC2 实例中或配置为网站终端节点的 Amazon S3 存储桶中运行的 Web 服务器。192.0.2.44 上的 Web 服务器或其余资源将 www.example.com 的 Web 页面返回到 Web 浏览器，且 Web 浏览器会显示该页面。

4. 建设 TCP 连贯：解析出 IP 地址后，依据 IP 地址和默认 80 端口，和服务器建设 TCP 连贯

5. 发动 HTTP 申请：浏览器发动读取文件的 HTTP 申请，，该申请报文作为 TCP 三次握手的第三次数据发送给服务器

6. 服务器响应申请并返回后果：服务器对浏览器申请做出响应，并把对应的 html 文件发送给浏览器

7. 敞开 TCP 连贯：通过四次挥手开释 TCP 连贯

8. 浏览器渲染：客户端（浏览器）解析 HTML 内容并渲染进去，浏览器接管到数据包后的解析流程为：

 构建 DOM 树：词法剖析而后解析成 DOM 树（dom tree），是由 dom 元素及属性节点组成，树的根是 document 对象
构建 CSS 规定树：生成 CSS 规定树（CSS Rule Tree）构建 render 树：Web 浏览器将 DOM 和 CSSOM 联合，并构建出渲染树（render tree）布局（Layout）：计算出每个节点在屏幕中的地位
绘制（Painting）：即遍历 render 树，并应用 UI 后端层绘制每个节点。

9.JS 引擎解析过程：调用 JS 引擎执行 JS 代码（JS 的解释阶段，预处理阶段，执行阶段生成执行上下文，VO，作用域链、回收机制等等）

 创立 window 对象：window 对象也叫全局执行环境，当页面产生时就被创立，所有的全局变量和函数都属于 window 的属性和办法，而 DOM Tree 也会映射在 window 的 doucment 对象上。当敞开网页或者敞开浏览器时，全局执行环境会被销毁。加载文件：实现 js 引擎剖析它的语法与词法是否非法，如果非法进入预编译
预编译：在预编译的过程中，浏览器会寻找全局变量申明，把它作为 window 的属性退出到 window 对象中，并给变量赋值为 'undefined'；寻找全局函数申明，把它作为 window 的办法退出到 window 对象中，并将函数体赋值给他（匿名函数是不参加预编译的，因为它是变量）。而变量晋升作为不合理的中央在 ES6 中曾经解决了，函数晋升还存在。解释执行：执行到变量就赋值，如果变量没有被定义，也就没有被预编译间接赋值，在 ES5 非严格模式下这个变量会成为 window 的一个属性，也就是成为全局变量。string、int 这样的值就是间接把值放在变量的存储空间里，object 对象就是把指针指向变量的存储空间。函数执行，就将函数的环境推入一个环境的栈中，执行实现后再弹出，控制权交还给之前的环境。JS 作用域其实就是这样的执行流机制实现的。
退出移动版