大致能分成两个部分:网络通信与页面渲染

一.网络通信

互联网各个网络设备间的通信均基于TCP/IP协议,此协议将整个过程进行分层,由上至下分别为: 应用层、传输层、网络层和数据链路层

1.输入URL

2.应用层用DNS解析域名(DNS协议)

解析url域名,检查本地是否有对应的IP地址,有则返回,没有则请求上级DNS服务器

备注:DNS domain name system,由解析器和域名服务器组成,主要用于解析域名为IP地址

3.应用层发送http请求(HTTP协议)

http请求由请求报头与请求体组成,请求体为请求的数据,请求头包含请求方式(get、post。。)协议(http、https。。)是否包含cookie等信息

4.传输层传输报文(TCP协议)

为了方便传输将IP协议大块的数据分割为以报文段为单位的小数据包,并为其标号,方便服务端还原。

为了保证传输的安全可靠,将经历TCP三次握手:
发送端发送带有SYN标志的数据包给接收端,在一定的时间内等待回复;

接受端接收到数据包并确认无误后发送带有SYN/ACK标志的数据包给发送端,代表已接收,确认无误;

发送端再发送带有ACK标志的数据包给接收端代表握手成功。

SYN: synchronize 同步

ACK:Acknowledgement 确认

5.网络层查询MAC地址(IP协议)

IP协议的作用是把分割好得报文发送给服务端,但在此之前得先知道对方的MAC地址。

IP地址与MAC一一对应,IP地址能随意换,但MAC不会变,提供ARP协议查询到MAC地址

MAC: media access control 媒体访问控制,可理解为物理地址,硬件地址,每个设备都有独一无二的MAC地址

6.数据链路层传输数据

提供数据链路层传输数据,至此客户端发送完毕。

7.服务端接收数据

客户端在数据链路层获取数据,层层上传至应用层,在传递过程中将数据包还原成完整的http请求

8.服务端响应请求

服务端找到资源并返回响应报文,响应报文中包括一个重要的信息——状态码。状态码由三位数字组成,其中比较常见的是200 OK表示请求成功。301表示永久重定向,即请求的资源已经永久转移到新的位置。在返回301状态码的同时,响应报文也会附带重定向的url,客户端接收到后将http请求的url做相应的改变再重新发送。404 not found 表示客户端请求的资源找不到。

9.请求成功后返回html文件,进入页面渲染阶段

二、页面渲染

1.解析HTML构建DOM树,即由节点构成的树

解析和构建同时进行,由上至下地进行解析,这里注意几点:

a.外部样式的加载不会阻塞dom树的构建,但会阻塞其渲染

b.外部样式的加载不会阻塞脚本的加载,但会阻塞其执行

c.如果外部脚本加上async(IR为defer),设为异步,则外部样式不会阻塞其执行

d.动态加载的外部样式不影响脚本的执行

e.script一般放在最后面,因为它的加载和执行会阻塞页面的渲染,也就是说它的加载执行是同步的

2.(style)构建渲染树,即将css样式应用到dom树上,构建CSSOM树

webkit称之为附着

3.(layout)布局

树节点的大小、位置信息等的运算,构建渲染树

4.(painting)绘制

将树绘制在屏幕上。

本文总结自:http://www.cnblogs.com/kongxy/p/4615226.html与http://www.cnblogs.com/dojo-lzz/p/3983335.html

从输入url到浏览器呈现网页发生了什么?的更多相关文章

  1. 从浏览器地址栏输入URL到浏览器呈现数据全过程解析

    一.输入设备(或粘贴)输入 URL,按下 Enter键 或其他按钮开始请求. 二.浏览器开始解析 URL 关于 URL 到相关知识点:什么是URI,URL以及URN,你真的理解了吗. 1.URL 是否 ...

  2. 从输入URL到浏览器显示页面发生了哪些事情---个人理解

    经典面试题:从输入URL到页面显示发生了哪些事情 以前一直都记不住,这次自己理解了一下 用自己的话总结了一次,不对的地方希望大佬给我指出来 1.主机通过DHCP协议获取客户端的IP地址.子网掩码和DN ...

  3. 从输入URL到浏览器显示页面发生了什么

    1.输入网址 当你开始输入网址比如www.cnblogs.com时游览器就可以在书签或者历史记录里面去搜索相关的网址推荐给你. 2.游览器查找域名的IP地址 ① 请求发起后,游览器首先会解析这个域名, ...

  4. 深入浅出经典面试题:从浏览器中输入URL到页面加载发生了什么 - Part 3

    备注: 因为文章太长,所以将它分为三部分,本文是第三部分. 第一部分:深入浅出经典面试题:从浏览器中输入URL到页面加载发生了什么 - Part 1 第二部分:深入浅出经典面试题:从浏览器中输入URL ...

  5. 在浏览器中输入URL按下回车键后发生了什么

    在浏览器中输入URL按下回车键后发生了什么 [1]解析URL[2]DNS查询,解析域名,将域名解析为IP地址[3]ARP广播,根据IP地址来解析MAC地址[4]分别从应用层到传输层.网络层和数据链路层 ...

  6. 从输入 URL 到浏览器接收的过程中发生了什么事情

    从输入 URL 到浏览器接收的过程中发生了什么事情? 原文:http://www.codeceo.com/article/url-cpu-broswer.html 从触屏到 CPU  首先是「输入 U ...

  7. 从输入 URL 到浏览器接收的过程中发生了什么事情?

    从输入 URL 到浏览器接收的过程中发生了什么事情? What really happens when you navigate to a URL 上面两篇文章都解读的很好,值得阅读. 接下来在总结一 ...

  8. 【ASP.NET Core】EF Core - “影子属性” 深入浅出经典面试题:从浏览器中输入URL到页面加载发生了什么 - Part 1

    [ASP.NET Core]EF Core - “影子属性”   有朋友说老周近来博客更新较慢,确实有些慢,因为有些 bug 要研究,另外就是老周把部分内容转到直播上面,所以写博客的内容减少了一点. ...

  9. 【原】老生常谈-从输入url到页面展示到底发生了什么

    刚开始写这篇文章还是挺纠结的,因为网上搜索“从输入url到页面展示到底发生了什么”,你可以搜到一大堆的资料.而且面试这道题基本是必考题,二月份面试的时候,虽然知道这个过程发生了什么,不过当面试官一步步 ...

随机推荐

  1. asp.net core mvc视频A:笔记2-4.ActionResult(动作结果,即返回值)

    json类型测试 方法一:实例化对象方式 代码 运行结果 方法二:封装方式 代码改动 运行结果 重点视图返回介绍,其他的不做介绍了 项目文件目录及文件添加 代码 运行结果 如果要显示的不是默认视图,可 ...

  2. mysql忘记root密码解决

    修改配置文件:my.cnf  加上skip-grant-tables 重启mysql mysql -uroot  登录 mysql> USE mysql ; mysql> UPDATE u ...

  3. 配置LANMP环境(10)-- 安装memcached与redis

    一.安装memcached 1.安装 yum install memcached 2.设置1G内存 memcached -u memcached -p -m -c -d 3.启动与设置开机自启动 sy ...

  4. 国家制定人工智能(AI)发展战略的决策根据

    在今年两会上,李彦宏的提案有何道理?提案的依据是什么?这个问题必须说清楚,对社会公众有个交代. 回想过去,早在上世纪九十年代,用"电子网络"模拟人脑的想法已经出现.这样的" ...

  5. 谷歌高管无意中透露Google Glass未获得成功的原因

    Google X高管Astro Teller在接受媒体采访时无意中透露了这款设备没有取得预期成绩的原因 最终我们发现,在他们生活的世界里,数字生活和即时物理生活根本无法融为一体. Teller提出的这 ...

  6. iOS 7 修改默认布局从status bar 底部开始

    最近在对公司的一个老项目进行版本升级,添加了导航栏和tabBar,并且在个人中心界面隐藏navigationBar,于是在控制器里添加了如下对象方法: - (void)viewWillAppear:( ...

  7. 自定义验证----required属性

    1,required属性 - 表示字段不能为空(注意:只有用户单击“提交”按钮提交表单的时候,浏览器才会执行验证.目前HTML5不支持指定验证的时间,而且验证消息的样式和内容各个浏览器不大一样,不能修 ...

  8. ASIHTTP

    本文转载至 http://www.th7.cn/Program/IOS/201303/128223.shtml     向服务器端上传数据 ASIFormDataRequest ,模拟 Form表单提 ...

  9. TP框架---thinkphp中ajax分页

    //点击类别后要显示的内容 public function pagechuli3()//这个方法的功能是根据ajax传过来的值查询数据,再将查询出来的数据返回到ajax,返回的默认是JSON类型. { ...

  10. java排序(整理)

    冒泡排序(面试都要问的算法) 一.基本思想:每次比较相邻的两个 元素,按需调整顺序   二.题目:要求将 12 35 99 18 76 这 5 个数进行从大到小排序   三.思路: (1)先比较第 1 ...