浏览器工作流程

HTML页面加载和解析流程
1.用户输入网址(假设是个html页面,并且是第一次访问),浏览器向服务器发出请求,服务器返回html文件;
2.浏览器开始载入html代码,发现<head>标签内有一个<link>标签引用外部CSS文件;
3.浏览器又发出CSS文件的请求,服务器返回这个CSS文件;
4.浏览器继续载入html中<body>部分的代码,并且CSS文件已经拿到手了,可以开始渲染页面了;
5.浏览器在代码中发现一个<img>标签引用了一张图片,向服务器发出请求。此时浏览器不会等到图片下载完,而是继续渲染后面的代码;
6.服务器返回图片文件,由于图片占用了一定面积,影响了后面段落的排布,因此浏览器需要回过头来重新渲染这部分代码;
7.浏览器发现了一个包含一行Javascript代码的<script>标签,赶快运行它;
8.Javascript脚本执行了这条语句,它命令浏览器隐藏掉代码中的某个<div> (style.display=”none”)。突然少了这么一个元素,浏览器不得不重新渲染这部分代码;
9.终于等到了</html>的到来,浏览器泪流满面……
10.等等,还没完,用户点了一下界面中的“换肤”按钮,Javascript让浏览器换了一下<link>标签的CSS路径;
11.浏览器召集了在座的各位<div><span><ul><li>们,“大伙儿收拾收拾行李,咱得重新来过……”,浏览器向服务器请求了新的CSS文件,重新渲染页面。

时间: 2024-12-16 08:02:28

浏览器工作流程的相关文章

浏览器渲染的工作流程和图片加载与渲染规则

1 浏览器渲染的工作流程 浏览器的工作原理.以Webkit引擎的工作流程为例,浏览器加载一个HTML页面后进行如下操作 解析HTML[遇到<img>标签加载图片] -> 构建DOM树 加载样式 -> 解析样式[遇到背景图片链接不加载] -> 构建样式规则树 加载javascript -> 执行javascript代码 把DOM树和样式规则树匹配构建渲染树[加载渲染树上的背景图片] 计算元素位置进行布局 绘制[开始渲染图片] 2 图片加载与渲染规则  页面中不是所有的&l

GitHub超详细图文攻略 - Git客户端下载安装 GitHub提交修改源码工作流程 Git分支 标签 过滤 Git版本工作流(转载)

最近听同事说他都在使用GitHub,GitHub是程序员的社区,在里面可以学到很多书上学不到的东西,所以最近在准备入手这方面的知识去尝试学习,正好碰到这么详细完整的文章,就转载了,希望对自己和大家有帮助. GitHub操作总结 : 总结看不明白就看下面的详细讲解. GitHub操作流程 : 第一次提交 : 方案一 : 本地创建项目根目录, 然后与远程GitHub关联, 之后的操作一样; -- 初始化Git仓库 :git init ; -- 提交改变到缓存 :git commit -m 'desc

Struts2工作流程

Struts2是一个非常优秀的MVC框架,它主要通过StrutsPrepareAndExecuteFilter过滤器将Struts2集成到Web应用中的. 基本工作流程: 1.客户端提交一个HttpServletRequest请求(action或JSP页面): 2.请求经过一系列的过滤器(如ActionContextCleanUp,SiteMesh等): 3.Struts2的核心过滤器StrutsPrepareAndExecuteFilter被调用,并询问ActionMapper来决定这个请求是

浏览器工作原理

浏览器工作原理的实质就是实现http协议的通讯,具体过程如下: HTTP通信的流程,大体分为三个阶段:1. 连接 服务器通过一个ServerSocket类对象对8000端口进行监听,监听到之后建立连接,打开一个socket虚拟文件.2. 请求 创建与建立socket连接相关的流对象后,浏览器获取请求,为GET请求,则从请求信息中获取所访问的HTML文件名,向服务器发送请求.3. 应答 服务收到请求后,搜索相关目录文件,若不存在,返回错误信息.若存在,则想html文件,进行加HTTP头等处理后响应

Laravel 5系列教程二:路由,视图,控制器工作流程

免费视频教程地址https://laravist.com/series/laravel-5-basic 上一篇教程我们走了那么长的路,终于把Laravel安装好了,这一篇教程我们就要进入Laravel的神奇世界了,主要是讲解Laravel的Router,Views,Controllers的工作流程,目的也就是让大家明白Laravel在处理一个get请求的时候是如何工作的. 在开始之前,我们首先得将我们的服务器启动起来,如果你使用Laravel的artisan,你可以直接: php artisan

[Servlet]Servlet的工作流程及注意事项

Servlet工作流程 利用Servlet完成的Web应用的实际工作流程是通过Tomcat服务器发布服务,客户端与服务器端之间的交互遵循Http协议完成的.具体工作流程如下: 客户端浏览器向服务器端发送请求. 服务器端由Tomcat服务器提供的Servlet容器解析接收到的请求. 通过Web应用程序的配置文件web.xml,解析到对应执行的Servlet. Servlet完成客户端发送的请求逻辑,并完成向客户端发送的响应内容. 由Tomcat服务器提供的Servlet容器向客户端浏览器进行响应.

Ajax的工作流程简述

提到Ajax相信我们都不会陌生,不管你是前端开发还是后台数据处理的程序员,ajax的作用就像现在生活中的手机一样,无论是作用还是流程都差不多,这里我们要进行ajax操作后台数据并显示在页面上的话,首先我们这里才用原生态的ajax去实现,第一步要做的就是首先我们得有一个ajax才行,紧接着还得清楚他的工作流程才行啊,下面我就简单谈谈ajax的工作流程.     v作为一个刚接触ajax的信任来说肯定会觉得很神奇,不知道一个小小的ajax竟然有这种强大的功效实现这样复杂的任务,其实不然,当我们除去包

Struts2的工作流程

Struts2的工作流程 1.客户端浏览器初始化时发出HTTP请求 2.根据web.xml配置,上述请求被FilterDispatcher接收 3.根据struts.xml配置,找到需要调用的Action类和方法, 并通过IoC方式,将值注入给Aciton 4.Action调用业务逻辑组件处理业务逻辑 5.Action执行完毕,根据struts.xml中的配置找到对应的返回结果result,并跳转到相应页面 6.返回HTTP响应到客户端浏览器

ssl协议工作流程详解

SSL 协议 (HTTPS) 握手.工作流程详解 (双向 HTTPS 流程 )SSL 协议的工作流程:服务器认证阶段: 1)客户端向服务器发送一个开始信息"Hello"以便开始一个新的会话连接; 2)服务器根据客户的信息确定是否需要生成新的主密钥,如需要则服务器在响应客户的"Hello"信息时将包含生成主密钥所需的信息; 3)客户根据收到的服务器响应信息,产生一个主密钥,并用服务器的公开密钥加密后传给服务器; 4)服务器恢复该主密钥,并返回给客户一个用主密钥认证的信