浏览器是如何展示网页的

简介:

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

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

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

  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/

 


本文转自ChokCoco博客园博客,原文链接:http://www.cnblogs.com/coco1s/p/3580642.html

目录
相关文章
|
7月前
|
测试技术
用navigator.sendBeacon完成网页埋点异步请求记录用户行为,当网页关闭的时候,依然后完美完成接口请求,不会因为浏览器关闭了被中断请求。
用navigator.sendBeacon完成网页埋点异步请求记录用户行为,当网页关闭的时候,依然后完美完成接口请求,不会因为浏览器关闭了被中断请求。
|
存储 搜索推荐 数据挖掘
使用selenium库模拟浏览器行为,获取网页的cookie值
使用selenium库模拟浏览器行为,获取网页的cookie值
|
Web App开发 Windows
让网页自动调用双核浏览器的极速模式
让网页自动调用双核浏览器的极速模式
118 0
|
3月前
|
Web App开发 JavaScript 前端开发
添加浮动按钮点击滚动到网页底部的纯JavaScript演示代码 IE9、11,Maxthon 1.6.7,Firefox30、31,360极速浏览器7.5.3.308下测试正常
添加浮动按钮点击滚动到网页底部的纯JavaScript演示代码 IE9、11,Maxthon 1.6.7,Firefox30、31,360极速浏览器7.5.3.308下测试正常
|
4月前
|
网络协议 前端开发 JavaScript
浏览器加载网页的幕后之旅:从URL到页面展示详解
【8月更文挑战第31天】当在浏览器地址栏输入URL并回车后,一系列复杂过程随即启动,包括DNS解析、TCP连接建立、HTTP请求发送、服务器请求处理及响应返回,最后是浏览器页面渲染。这一流程涉及网络通信、服务器处理和客户端渲染等多个环节。通过示例代码,本文详细解释了每个步骤,帮助读者深入理解Web应用程序的工作机制,从而在开发过程中作出更优决策。
77 5
|
4月前
|
存储 JavaScript
纯Vue实现网页日常任务清单小功能(数据存储在浏览器)
这篇文章介绍了如何使用纯Vue实现一个网页日常任务清单的小功能,数据存储在浏览器中以保持数据持久化。文章内容包括功能描述、效果演示、核心代码修改方法,以及已经打包好的项目源码下载链接。作者还提供了友情提示,指出了数据存储到浏览器的核心代码部分,方便读者快速理解和应用。
|
5月前
|
SQL 关系型数据库 MySQL
|
6月前
|
Shell
5.Electron之shell(使用系统默认浏览器打开网页)
5.Electron之shell(使用系统默认浏览器打开网页)
117 1
|
7月前
【超实用】Angular如何修改当前页面网页浏览器url后面?param1=xxx&param2=xxx参数(多用于通过浏览器地址参数保存用户当前操作状态的需求),实现监听url路由切换、状态变化。
【超实用】Angular如何修改当前页面网页浏览器url后面?param1=xxx&param2=xxx参数(多用于通过浏览器地址参数保存用户当前操作状态的需求),实现监听url路由切换、状态变化。
【超实用】Angular如何修改当前页面网页浏览器url后面?param1=xxx&param2=xxx参数(多用于通过浏览器地址参数保存用户当前操作状态的需求),实现监听url路由切换、状态变化。
|
6月前
|
JavaScript 前端开发
WebView2 控件(基于 Microsoft Edge (Chromium) 的嵌入式浏览器控件),获取网页加载后的标题
在使用 WebView2 控件(基于 Microsoft Edge (Chromium) 的嵌入式浏览器控件)时,要获取网页加载后的标题,可以监听 WebView2 的 NavigationCompleted 事件。这个事件被触发时,表示导航已完成,此时执行JavaScript代码可以安全地获取网页的标题。
WebView2 控件(基于 Microsoft Edge (Chromium) 的嵌入式浏览器控件),获取网页加载后的标题