美文网首页
浏览器工作原理

浏览器工作原理

作者: 小小小魔仙 | 来源:发表于2017-08-23 01:03 被阅读27次

目前使用的主流浏览器有五个:IE、Firefox、Safari、Chrome和 Opera浏览器。

浏览器的主要功能

浏览器的主要功能就是向服务器发出请求,在浏览器窗口中展示您想要访问的网络资源(资源一般是指 HTML 文档).

浏览器解读HTML文件的方式是在 HTML 和 CSS 规范中指定的。这些规范由W3C进行维护。
现在浏览器因为没有完全遵守这些规范,所有有了兼容性的问题。

浏览器的高层结构(High Level Structure)

image.png
  • 用户界面 - 包括地址栏、前进/后退按钮、书签菜单等。
  • 浏览器引擎 - 在用户界面和渲染引擎之间传送指令。
  • 渲染引擎 - 负责显示请求的内容。如果请求的内容是 HTML,它就负责解析 HTML 和 CSS 内容,并将解析后的内容显示在屏幕上。
  • 网络 - 用于网络调用,比如 HTTP 请求。
  • 用户界面后端 - 用于绘制基本的窗口小部件,比如组合框和窗口。
  • JavaScript 解释器。用于解析和执行 JavaScript 代码,比如chrome的javascript解释器是V8。
  • 数据存储。这是持久层。浏览器需要在硬盘上保存各种数据,例如 Cookie。

ps: Chrome 浏览器为每个标签页(Tab)都分配了各自的渲染引擎实例,每个标签页都是一个独立的进程(即每个标签页面都在独立的“沙箱”内运行,在提高安全性的同时,一个标签页面的崩溃也不会导致其他标签页面被关闭)。

渲染引擎: 职责就是渲染(解析,转换),即在浏览器窗口中显示请求回来的内容。
内容拿回来之后是通过
解析html以构建dom树 -> 构建render树 -> 布局render树 -> 绘制render树
一步步完成的。
这个过程是逐步完成的,什么内容拿回来早就先把什么内容呈现在屏幕上,这样子就可以提高用户体验;并不会等到所有的html都解析完成之后再去构建和布局render树。

相关文章

  • 前端学习文档

    1. 浏览器工作原理 浏览器的工作原理:新式网络浏览器幕后揭秘[https://www.html5rocks.co...

  • 图解浏览器的基本工作原理

    原文: 图解浏览器的基本工作原理

  • 稳固前端基础需要读哪些文章?

    其实就是把最近在看的和打算看的都收集到这里: 浏览器的工作原理浏览器的工作原理(原版)关于chrome浏览器与we...

  • 面试官一上来就问我Chrome底层原理和HTTP协议(万字长文)

    前言 有人说,如果你懂得浏览器的工作原理,你就能解决80%的前端难题。 是的,了解浏览器的工作原理,有助于你的工作...

  • 一个浏览器到底是如何工作的?

    学习浏览器工作原理,可以帮助性能优化,排查错误。 浏览器工作原理 实际上就是把一个URL变成屏幕上显示的网页 过程...

  • 浏览器渲染机制

    参考链接:浏览器渲染的那些事(一)浏览器内部工作原理浏览器的渲染原理简介有关网页渲染,每个前端开发者都该知道的那点...

  • 浏览器工作原理

    一、浏览器的模块组成? 1、用户界面,除了显示请求页面的窗口外,其它显示的各个部分都属于用户界面(包括地址栏、书签...

  • 浏览器工作原理

    一、介绍 浏览器可以被认为是使用最广泛的软件,本文将介绍浏览器的工作原理,我们将看到,从你在地址栏输入google...

  • 浏览器工作原理

    参考文章:How Browsers Work: Behind the scenes of modern web b...

  • 浏览器工作原理

    目前使用的主流浏览器有五个:IE、Firefox、Safari、Chrome和 Opera浏览器。 浏览器的主要功...

网友评论

      本文标题:浏览器工作原理

      本文链接:https://www.haomeiwen.com/subject/favcdxtx.html