从 URL 输入到页面展现发生了什么

总体来说分为以下几个过程:

1、DNS解析

DNS解析的过程就是寻找哪台机器上有你需要资源的过程。当你在浏览器中输入一个地址时,例如www.baidu.com,其实不是百度网站真正意义上的地址。互联网上每一台计算机的唯一标识是它的IP地址,但是IP地址并不方便记忆。用户更喜欢用方便记忆的网址去寻找互联网上的其它计算机,也就是上面提到的百度的网址。所以互联网设计者需要在用户的方便性与可用性方面做一个权衡,这个权衡就是一个网址到IP地址的转换,这个过程就是DNS解析。它实际上充当了一个翻译的角色,实现了网址到IP地址的转换。

2、TCP连接

浏览器与远程Web服务器通过TCP三次握手协商来建立一个TCP/IP连接。该握手包括一个同步报文,一个同步-应答报文和一个应答报文,这三个报文在 浏览器和服务器之间传递。该握手首先由客户端尝试建立起通信,而后服务器应答并接受客户端的请求,最后由客户端发出该请求已经被接受的报文。

3、发送HTTP请求、服务器处理请求并返回HTTP报文

一旦TCP/IP连接建立,浏览器会通过该连接向远程服务器发送HTTP的GET请求。远程服务器找到资源并使用HTTP响应返回该资源,服务器返回给浏览器的文本信息,通常HTML, CSS, JS, 图片等文件就放在这一部分。值为200的HTTP响应状态表示一个正确的响应。

4、浏览器解析渲染页面

在收到HTML,CSS,JS文件后,浏览器通过WebKit渲染,将页面呈现到屏幕上。下图对应的就是WebKit渲染的过程。

Paste_Image.png

浏览器是一个边解析边渲染的过程。首先浏览器解析HTML文件构建DOM树,然后解析CSS文件构建渲染树,等到渲染树构建完成后,浏览器开始布局渲染树并将其绘制到屏幕上。这个过程比较复杂,涉及到两个概念: reflow(回流)和repain(重绘)。DOM节点中的各个元素都是以盒模型的形式存在,这些都需要浏览器去计算其位置和大小等,这个过程称为relow;当盒模型的位置,大小以及其他属性,如颜色,字体,等确定下来之后,浏览器便开始绘制内容,这个过程称为repain。页面在首次加载时必然会经历reflow和repain。reflow和repain过程是非常消耗性能的,尤其是在移动设备上,它会破坏用户体验,有时会造成页面卡顿。所以我们应该尽可能少的减少reflow和repain。

Paste_Image.png

JS的解析是由浏览器中的JS解析引擎完成的。JS是单线程运行,也就是说,在同一个时间内只能做一件事,所有的任务都需要排队,前一个任务结束,后一个任务才能开始。但是又存在某些任务比较耗时,如IO读写等,所以需要一种机制可以先执行排在后面的任务,这就是:同步任务(synchronous)和异步任务(asynchronous)。JS的执行机制就可以看做是一个主线程加上一个任务队列(task queue)。同步任务就是放在主线程上执行的任务,异步任务是放在任务队列中的任务。所有的同步任务在主线程上执行,形成一个执行栈;异步任务有了运行结果就会在任务队列中放置一个事件;脚本运行时先依次运行执行栈,然后会从任务队列里提取事件,运行任务队列中的任务,这个过程是不断重复的,所以又叫做事件循环(Event loop)。

浏览器在解析过程中,如果遇到请求外部资源时,如图像,iconfont,JS等。浏览器将重复以上过程下载该资源。请求过程是异步的,并不会影响HTML文档进行加载,但是当文档加载过程中遇到JS文件,HTML文档会挂起渲染过程,不仅要等到文档中JS文件加载完毕还要等待解析执行完毕,才会继续HTML的渲染过程。原因是因为JS有可能修改DOM结构,这就意味着JS执行完成前,后续所有资源的下载是没有必要的,这就是JS阻塞后续资源下载的根本原因。CSS文件的加载不影响JS文件的加载,但是却影响JS文件的执行。JS代码执行前浏览器必须保证CSS文件已经下载并加载完毕。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏前端儿

iPhone页面的常用调试方法

某些页面需要设置HOST才能进行访问,在iPhone上不好设置HOST,所以需要一些代理工具帮助我们

981
来自专栏葡萄城控件技术团队

WPF的消息机制(三)- WPF内部的5个窗口之处理激活和关闭的消息窗口以及系统资源通知窗口

目录 WPF的消息机制(一)-让应用程序动起来 WPF的消息机制(二)-WPF内部的5个窗口 (1)隐藏消息窗口 (2)处理激活和关闭的消息窗口以及系统资源通知...

1999
来自专栏维C果糖

首次运行 IntelliJ IDEA 示例

首先,双击打开 IntelliJ IDEA 的快捷方式: ? 在此,需要说明: 如果咱们的电脑曾经安装过 IntelliJ IDEA,并且你在卸载 Intell...

1946
来自专栏FreeBuf

主动欺骗蜜罐系统Beeswarm简介

Beeswarm是一个主动蜜罐系统,通过部署一些模拟真实用户的节点与蜜罐系统通信,从而引诱窃听了这些会话的攻击者攻击蜜罐系统,以捕获发现攻击。 一、介绍 蜜罐系...

2298
来自专栏咖啡的代码人生

解决 IntelliJ IDEA Properties 文件代码不高亮

我们在 IDEA 编辑 properties 文件的时候,会发现敲出的代码不会高亮显示,会提示你 “Unused property more... (Ctrl...

5024
来自专栏Esofar 开发日记

Silence - 专注于阅读的博客园主题

Silence 追求大道至简的终极真理,旨在打造一个干净、专注阅读的博客主题,没有二维空间元素、不存在花里胡哨。

973
来自专栏我和PYTHON有个约会

Django来敲门~第一部分【8.网页中的css/js/image处理】

通常情况下,网页开发时,页面中的样式是通过外部css样式进行处理的,外部的css文件加载在Django中,需要进行简单的处理

572
来自专栏macOS 开发学习

cocos2d-objc 3.0+ 游戏开发学习手册(四): 使用CocoaPods 管理cocos2d项目

使用官方的安装器cocos2d Installer创建的工程后,默认的cocos2d-ext路径下是不完整的.

612
来自专栏挖坑填坑

使用.net core ABP和Angular模板构建博客管理系统(实现编辑页面功能)

别忘记app.module.ts中也需要引入ReactiveFormsModule

883
来自专栏阮一峰的网络日志

如何让搜索引擎抓取AJAX内容?

越来越多的网站,开始采用"单页面结构"(Single-page application)。 整个网站只有一张网页,采用Ajax技术,根据用户的输入,加载不同的内...

2633

扫码关注云+社区