浏览器相关

常见浏览器内核

 浏览器最重要或者说核心的部分是“Rendering Engine”,可大概译为“渲染引擎”,不过我们一般习惯将之称为“浏览器内核”。负责对网页语法的解释(如标准通用标记语言下的一个应用HTML、JavaScript)并渲染(显示)网页。 所以,通常所谓的浏览器内核也就是浏览器所采用的渲染引擎,渲染引擎决定了浏览器如何显示网页的内容以及页面的格式信息。不同的浏览器内核对网页编写语法的解释也有不同,因此同一网页在不同的内核的浏览器里的渲染(显示)效果也可能不同。

浏览器 内核(渲染引擎) JavaScript引擎
Chrome 
Blink(28~)
Webkit(Chrome 27)
V8 
FireFox 
Gecko 
SpiderMonkey
Safari
Webkit 
JavaScriptCore 
Edge
EdgeHTML
Chakra(for JavaScript)
IE
Trident 
Chakra(for JScript)
PhantomJS 
Webkit 
JavaScriptCore 

 

浏览器组成

浏览器的主要组成部分包括:

  1. 用户界面:包括地址栏、前进/后退按钮、书签菜单等。除了浏览器主窗口显示的请求外,其他显示的各个部分都属于用户界面。
  2. 浏览器引擎:在用户界面和呈现引擎之间传送指令。
  3. 渲染引擎:负责显示请求的内容。如果请求的内容是 HTML,它就负责解析 HTML 和 CSS 内容,并将解析后的内容显示在屏幕上。(渲染引擎是单线程的,除了网络操作以外,几乎所有的事情都在单一的线程中处理,在Firefox和Safari中,这是浏览器的主线程,Chrome中这是tab的主线程。)
  4. 网络:用户网络调用,比如 HTTP 请求。其接口与平台有关,并为所有平台提供底层实现。(网络操作由几个并行线程执行,并行连接的个数是受限的,通常是2-6个)
  5. 用户界面后端:用于绘制基本的窗口部件,比如组合框和窗口。其公开了与平台相关的通用接口,并在底层使用操作系统的用户界面方法。
  6. JavaScript解释器:用于解析和执行 JavaScript 代码。
  7. 数据存储:这是持久层。浏览器需要在硬盘上保存各种数据,例如 Cookie。新的 HTML 规范 (HTML5) 定义了“网络数据库”,这是个完整(但是轻便)的浏览器内数据库。

浏览器相关_第1张图片

回流(重排)和重绘

Render Tree中部分或全部元素的尺寸、结构、或某些属性发生改变时,浏览器重新渲染部分或全部文档的过程称为回流。具体表现为重新生成布局,重新排列元素。

当页面中元素样式的改变并不影响它在文档流中的位置时(例如:colorbackground-colorvisibility等),浏览器会将新样式赋予给元素并重新绘制它,这个过程称为重绘。具体表现为某些元素的外观被改变。

单单改变元素的外观,肯定不会引起网页重新生成布局,但当浏览器完成重排之后,将会重新绘制收到此次重排影响的部分,所以重绘不一定会出现重排,重排必然会出现重绘。

重排和重绘的代价是高昂的,它们会破坏用户体验,并且让UI展示非常迟缓,而相比之下,重排对性能的影响更大,在两者无法避免的情况下,宁可选择代价更小的重绘。

重排和重绘的产生

  • DOM节点的增删改
  • 通过display:none隐藏一个DOM节点会触发重排和重绘,通过visibility:hidden隐藏一个DOM节点只触发重绘
  • 移动或者给页面中的DOM节点添加动画
  • 添加样式表,调整样式属性
  • 用户行为,例如调整窗口大小、改变字号、滚动等

减少或避免重绘重排

1,集中改变样式

2,使用eDocumentFragment

通过createDocumentFragment创建⼀个游离于DOM树之外的节点,然后在此节点上批量操作,最后插⼊DOM树中,因此只触发⼀次重排
浏览器相关_第2张图片

 3,提升为合成层

跨域

 浏览器同源策略

同源策略限制了从同⼀个源加载的⽂档或脚本如何与来⾃另⼀个源的资源进⾏交互。这是⼀个⽤于隔离潜在恶意⽂件的重要安全机制。
同源是指"协议+域名+端⼝"三者相同,即便两个不同的域名指向同⼀个ip地址,也⾮同源。
浏览器中的⼤部分内容都是受同源策略限制的,但是以下三个标签可以不受限制:

你可能感兴趣的:(浏览器相关)