![](https://img-blog.csdnimg.cn/20201014180756928.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
浏览器运行原理
智学无忧-老曹
老曹的教学风格以深入浅出,通俗易懂,以现场敲代码演示案例而著称。智学无忧是由老曹全心打造的IT职业教育机构,智学无忧做全国最有态度、最有责任、最有良心的IT教育。开设了Java大数据开发、Web前端高级开发课程,课程的内容是老曹根据自己十多年的经验编写而成,含金量非常高。通过系统学习课程后,具有同行业的两年以上的工作经验,很多同学学完后进入华为、中国平安、腾讯这样的大公司工作,薪资在10K以上是非常轻松的事。来智学无忧是你人生正确的选择,智学无忧,助你前程无忧!
展开
-
浏览器工作原理(十):CSS2可视模型(CSS2 visual module)
画布The Canvas 根据CSS2规范,术语canvas用来描述格式化的结构所渲染的空间——浏览器绘制内容的地方。画布对每个维度空间都是无限大的,但浏览器基于viewport的大小选择了一个初始宽度。 根据http://www.w3.org/TR/CSS2/zindex.html的定义,画布如果是包含在其他画布内则是透明的,否则浏览器会指定一个颜色。 CSS盒模型 CS原创 2016-10-19 23:11:48 · 1055 阅读 · 0 评论 -
浏览器工作原理(二):渲染引擎的详细介绍
渲染引擎是干什么的渲染引擎的职责就是渲染,即在浏览器窗口中显示所请求的内容。默认情况下,渲染引擎可以显示html、xml文档及图片,它也可以借助插件(一种浏览器扩展)显示其他类型数据,例如使用PDF阅读器插件(所以想做浏览器插件的同学必须知道浏览器的工作原理),可以显示PDF格式,将由专门一章讲解插件及扩展,这里只讨论渲染引擎最主要的用途——显示应用了CSS之后的html及图片。渲染引原创 2016-10-19 15:20:57 · 7186 阅读 · 0 评论 -
浏览器工作原理(三):关于解析的一些基本概念(理论性很强)
解析(Parsing-general)既然解析是渲染引擎中一个非常重要的过程,我们将稍微深入的研究它。首先简要介绍一下解析。解析一个文档即将其转换为具有一定意义的结构——编码可以理解和使用的东西。你想啊!HTML是一个纯文本的东西,计算机要怎么理解了?所以需要解析文档文档内容了嘛!所以HTML代码要遵守W3C的规范嘛!没有规则的东西是解析不了的,你说是不是!解析的结果通常是表达文档结构的节点树原创 2016-10-19 16:31:04 · 2857 阅读 · 0 评论 -
浏览器工作原理(四):HTML解析器 HTML Parser
HTML解析器的工作是将html标识解析为解析树。HTML文法定义(The HTML grammar definition)W3C组织制定规范定义了HTML的词汇表和语法。非上下文无关文法(Not a context free grammar)正如在解析简介中提到的,上下文无关文法的语法可以用类似BNF的格式来定义。不幸的是,所有的传统解析方式都不适原创 2016-10-19 17:18:22 · 13181 阅读 · 2 评论 -
浏览器工作原理(五):CSS解析(CSS parsing)
还记得简介中提到的解析的概念吗,不同于html,css属于上下文无关文法,可以用前面所描述的解析器来解析。Css规范定义了css的词法及语法文法。看一些例子:每个符号都由正则表达式定义了词法文法(词汇表):comment///*[^*]*/*+([^/*][^*]*/*+)*//num[0-9]+|[0-9]*"."[0-9]+nonascii[/200-/377]nmstart原创 2016-10-19 18:42:15 · 6715 阅读 · 0 评论 -
浏览器工作原理(六):渲染树构建
当Dom树构建完成时,浏览器开始构建另一棵树——渲染树。渲染树由元素显示序列中的可见元素组成,它是文档的可视化表示,构建这棵树是为了以正确的顺序绘制文档内容。Firefox将渲染树中的元素称为frames,WebKit则用renderer或渲染对象来描述这些元素。一个渲染对象知道怎么布局及绘制自己及它的children。RenderObject是Webkit的渲染对象基类,它的定义如下原创 2016-10-19 22:00:23 · 5546 阅读 · 0 评论 -
浏览器工作原理(七):布局(Layout)
当渲染对象被创建并添加到树中,它们并没有位置和大小,计算这些值的过程称为layout或reflow。 Html使用基于流的布局模型,意味着大部分时间,可以以单一的途径进行几何计算。流中靠后的元素并不会影响前面元素的几何特性,所以布局可以在文档中从右向左、自上而下的进行。也存在一些例外,比如html tables。 坐标系统相对于根frame,使用top和left坐标。 布局是一个原创 2016-10-19 22:55:27 · 2682 阅读 · 0 评论 -
浏览器工作原理(八):绘制(Painting)
绘制阶段,遍历渲染树并调用渲染对象的paint方法将它们的内容显示在屏幕上,绘制使用UI基础组件,这在UI的章节有更多的介绍。 全局和增量 和布局一样,绘制也可以是全局的——绘制完整的树——或增量的。在增量的绘制过程中,一些渲染对象以不影响整棵树的方式改变,改变的渲染对象使其在屏幕上的矩形区域失效,这将导致操作系统将其看作dirty区域,并产生一个paint事件,操作系统很巧妙的处理这原创 2016-10-19 22:59:42 · 1831 阅读 · 0 评论 -
浏览器工作原理(九):动态变化和渲染引擎的线程
动态变化 浏览器总是试着以最小的动作响应一个变化,所以一个元素颜色的变化将只导致该元素的重绘,元素位置的变化将大致元素的布局和重绘,添加一个Dom节点,也会大致这个元素的布局和重绘。一些主要的变化,比如增加html元素的字号,将会导致缓存失效,从而引起整数的布局和重绘。渲染引擎的线程 渲染引擎是单线程的,除了网络操作以外,几乎所有的事情都在单一的线程中处理,在Firefox原创 2016-10-19 23:02:04 · 1533 阅读 · 0 评论 -
浏览器工作原理(一):浏览器的整体工作流程介绍
掌握原理的必要性在浏览器上输入一个网址后,一个漂亮的页面就呈现在我们眼前,中间发生了什么了?对于一个普通用户来讲,也许不用思考这个问题,但要作为一个名前端开发人员或是想开发插件的同学来讲,掌握浏览器的工作原理是非常有必要的!浏览器主要功能今天讨论五种主流浏览器——IE、Firefox、Safari、Chrome及Opera。浏览器的功能和目的都是一样的,但在解析的过程中会有些差别。那么原创 2016-10-19 14:51:27 · 4614 阅读 · 0 评论