浏览器是如何展示网页的

作为一名前端工程师,我们应该清楚浏览器是如何展示网页的,了解浏览器的原理可以令设计者找到适合的途径把网页展示给用户。

首先,让我们来看看什么是浏览器。网页浏览器是显示网页服务器或档案系统内的文件,并让用户与这些文件互动的一种软件。它用来显示在万维网或局部局域网络等内的文字、影像及其他资讯。浏览器就是设计者的画廊,设计者把网页放在这里展示给用户。

因为没有固定的标准,不同浏览器的组件不尽完全相同。不过大家相互模仿进步,基本上而言,浏览器的主要组件包括:

  1. 用户界面- 包括地址栏、后退/前进按钮、书签目录等,也就是你所看到的除了用来显示你所请求页面的主窗口之外的其他部分
  2. 浏览器引擎- 用来查询及操作渲染引擎的接口
  3. 渲染引擎- 用来显示请求的内容,例如,如果请求内容为html,它负责解析html及css,并将解析后的结果显示出来
  4. 网络- 用来完成网络调用,例如http请求,它具有平台无关的接口,可以在不同平台上工作
  5. UI 后端- 用来绘制类似组合选择框及对话框等基本组件,具有不特定于某个平台的通用接口,底层使用操作系统的用户接口
  6. JS解释器- 用来解释执行JS代码
  7. 数据存储- 属于持久层,浏览器需要在硬盘中保存类似cookie的各种数据,HTML5定义了web database技术,这是一种轻量级完整的客户端存储技术

那么,浏览器是如何展示网页的呢。浏览器的工作原理可以分以下几步来理解:

  1. 浏览器通过HTML表单或超链接请求指向一个应用程序的URL。
  2. 服务器收发到用户的请求。
  3. 服务器执行已接受创建的指定应用程序。
  4. 应用程序通常是基于用户输入的内容,执行所需要的操作。
  5. 应用程序把结果格式化为网络服务器和浏览器能够理解的文档,即我们所说的HTML网页。
  6. 网络服务器最后将结果返回到浏览器中。

这其中牵涉了超文本传输协议http(Hypertext transfer protocol )工作原理,欲知详情,请移步:

http://www.360doc.com/content/13/0422/16/3777348_280148022.shtml

推荐深入研读可读:http://www.iefans.net/liulanqi-ruhe-gongzuo-yuanli/

 

转载于:https://www.cnblogs.com/coco1s/p/3580642.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/408050.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

.Net开发人员应该下载的十种必备工具(二)

NUnit NUnit 是为 .NET 框架生成的开放源代码单元测试框架。NUnit 使您可以用您喜欢的语言编写测试,从而测试应用程序的特定功能。当您首次编写代码时,单元测试是一种测试代码功能的很好方法,它还提供了一种对应用程序进行回归测试的方法。NU…

金山毒霸2007亮点介绍

盘点即将过去的2006年,计算机病毒多变种,恶意软件、流氓软件的泛滥,钓鱼欺诈网站的频繁出现,都给网民留下深刻印象。为在新的一年里对杀毒市场展开新一轮争夺,主流杀毒软件也纷纷发布了新一代产品。纵观各厂商提供的解…

子弹创建及发射 Learn Unreal Engine (with C++)

子弹创建及发射 Learn Unreal Engine (with C) SpaceshipBattle fanxingin/UE4项目 - 码云 - 开源中国 (gitee.com) 子弹的创建 声明: UPROPERTY(EditAnywhere, Category "Fire")TSubclassOf<ABullet> Bullet;实现: //在空组件处生产子弹GetWorld()->…

爬虫工作量由小到大的思维转变---<第二十四章 Scrapy的`统计数据`收集stats collection>

前言: 前两篇是讲的数据诊断分析,还有一篇深挖解决内存泄漏的文章,目前我还没整理汇编出来;但是,想到分析问题的时候,忽然觉得爬虫的数据统计好像也挺重要;于是,心血来潮准备来插一篇这个------让大家对日常scrapy爬的数据,做到心里有数!不必自己去搅破脑汁捣腾日志,敲计算器了…

uva 10245 The Closest Pair Problem_枚举

题意&#xff1a;求任意两点之间的距离的最少一个距离 思路&#xff1a;枚举一下就可以了 #include <iostream> #include<cstdio> #include<cmath> using namespace std; #define N 10010 struct node{double x,y; }p[N]; int main(int argc, char** argv) {…

react学习(70)--拼接方式

const tabs [{ key: , value: 全部 }, ...MERCHANTLISTSTARTUS];

.Net开发人员应该下载的十种必备工具(一)

用于编写单元测试的 NUnit用于创建代码文档资料的 NDoc用于生成解决方案的 NAnt用于生成代码的 CodeSmith用于监视代码的 FxCop用于编译少量代码的 Snippet Compiler两种不同的转换器工具&#xff1a;ASP.NET 版本转换器和 Visual Studio .NET 项目转换器用于生成正则表达式的 …

旋转根组件 Learn Unreal Engine (with C++)

旋转根组件 Learn Unreal Engine (with C) 在UE4中,根组件是无法旋转定位的,只能够缩放,在一些情况下,我们有旋转根组件的需求 SpaceshipBattle fanxingin/UE4项目 - 码云 - 开源中国 (gitee.com) 旋转根组件 将SceneComponent设为根组件 然后将StaticMeshComponentattach…

2007.2.14 日程安排

公元二零零七年二月十四日&#xff0c;农历腊月二十七&#xff0c;该天尤为特别&#xff0c;乃春节长假之初始。此外&#xff0c;该天将是片地鸳侣&#xff0c;漫天桃花之好时日&#xff0c;于是吾将广纳四方真气&#xff0c;闭关修炼&#xff0c;与世无争。00&#xff1a;00 -…

react学习(71)--render使用

title: 品牌资质有效期,dataIndex: certificationStartDate,render: (text, row) > {return (<span>{moment(row.certificationStartDate).format(YYYY-MM-DD)}-{moment(row.certificationEndDate).format(YYYY-MM-DD)}</span>);},

2014.3.5-C语言学习小结

知识点:1.结构体 struct2.联合体 union3.枚举4.结构、联合与函数结构体思考:如果现在希望保存一个学生的信息,该如何保存sprintf "zhangsan:18:180”%s:%d:%d, name, height, agechar name[10][100]int age[10]int height[10]1.什么是结构体 struct结构体指的是一种数据结…

什么是Tomcat?

如今&#xff0c;基于Web的应用越来越多&#xff0c;传统的Html已经满足不了如今的需求。我们需要一个交互式的Web&#xff0c;于是便诞生了各种Web语言。如Asp&#xff0c;Jsp&#xff0c;Php等。当然&#xff0c;这些语言与传统的语言有着密切的联系&#xff0c;如Php基于C和…

react学习(72)--row上面加样式

<Row><Col><Buttonstyle{{marginTop: 24px,marginBottom: 24px,float: right,marginRight: 24px,}}type"primary"onClick{this.addApply}>新增申请</Button></Col></Row>

禁止摄像机跟随`Actor`旋转 Learn Unreal Engine (with C++)

禁止摄像机跟随Actor旋转 Learn Unreal Engine (with C) SpaceshipBattle fanxingin/UE4项目 - 码云 - 开源中国 (gitee.com) 如果直接将摄像机绑定在根组件上,在根组件旋转时,摄像机也会跟着旋转 那么如何让摄像机不跟随根组件旋转,只跟着根组件移动 禁止摄像机跟随根组件…

大脑可以自动修复酗酒造成的脑细胞损坏

英国路透社报道&#xff0c;国际科研小组研究发现&#xff0c; 过量饮酒会损坏大脑细胞&#xff0c;而大脑本身可以修复一些损坏。但他们警告酗酒者应该尽快清醒&#xff0c;因为持续大量饮酒的时间越长&#xff0c;大脑对损坏的修复能力越弱。“这项研究传达给酗酒者的主要信息…

邮件发送---在.net2003和2005中

smtpClient发邮件错误&#xff1a;不允许使用邮箱名称。 服务器响应为: You are not authorized to send mail, authentication is required 使用smtpClient发送邮件时&#xff0c;经常跑出难以明白的错误。其实主要都和我们申请的免费邮箱有关系。有些邮箱不支持&#xff0c;…

开发人员如何成为架构师

很多架构师都是从好的开发人员逐步过渡而来的&#xff0c;但并非每个好的开发人员都希望成为架构师&#xff0c;而且他们并不是都适合做架构师。无论您是打算进行职业转型的开发人员&#xff0c;还是寻找能承担体系结构设计责任的合适人选的经理&#xff0c;都务必对此转型过程…

WSL2 安装中文输入法教程 简单有效

很多教程我都参考过 大多有问题 只有这个简单明了实用 WSL2安装中文输入法教程 https://monkeywie.cn/2021/09/26/wsl2-gui-idea-config/