浏览器渲染机制

什么是浏览器

浏览器是用户访问互联网的重要接口，实质上是方便一般用户通过界面解析和发送HTTP请求的软件

浏览器内核

对于操作系统来说，内核是操作系统的核心，是第一层基于硬件的软件扩充，提供最核心最基础的服务
对于浏览器来说，浏览器内核需要提供API给浏览器开发者使用，同时需要提供最核心的功能，如加载和渲染网页，调用操作系统所提供的服务
我们可以初步认为浏览器中负责将表示页面的字符转变为可视化的图像的模块就是浏览器内核
网页内容的组成

• doctype：提供浏览器html的版本信息，用来声明文档信息和DTD规范，主要用途之一是文件的合法性验证。 html4.0版本的写法有两个，严格模式（不包括展示性和弃用的元素）/传统模式（包括前面所说元素）
  • DTD：告诉浏览器是什么文档类型，浏览器根据这个类型来决定使用何种协议解析文档并渲染他
• head：html头部
  • meta：元数据信息
    • charset：声明当前文档使用得字符编码
    • http-equiv：客户端行为，如渲染模式，缓存等
    • name[keywords]：搜索引擎使用
    • name[description]：搜索引擎使用
    • name[viewport]：浏览器视口设置
    • link：主要用来引入外联CSS
    • script：需要在body前完成加载或运行的脚本
• body：html实体
  • script：需要在body解析时完成加载或运行的脚本

渲染

重要组件：

• HTML解释器：html文本->DOM树
• CSS解释器：遇到级联样式时，需要使用该解释器。为DOM对象计算除样式信息
• JavaScript引擎：遇到js代码时，使用该解释器使得js代码有调用DOM接口和CSSOM接口的能力
• 布局：结合CSS，计算出每个DOM对象的大小位置信息
• 绘图：将经过布局计算的DOM节点绘制成图像
  以上组件组成了渲染引擎
  
  常见问题：
  1、在解析过程中处理外联资源
  先看资源是什么类型的，网络资源的话需要调资源加载器去进行加载，先看看缓存在不在，不在就去服务器上取
  2、CSS放header头部，JS放body尾部？
  CSS 不会阻塞 DOM 的解析，但会阻塞 DOM 渲染。因为render树的构建需要等待CSSOM构建完成
  当解析到JS文件时，浏览器会切换到JS引擎去解析JS文件，因此JS 会阻塞 DOM 解析，但浏览器会"偷看"DOM，预先下载相关资源。

浏览器是多进程的，浏览器的渲染进程是多线程的；

GUI渲染线程
负责渲染浏览器界面，解析HTML,CSS,构建DOM树和RenderObject树，布局和绘制等。
当界面需要重绘或由于某种操作引发回流时，该线程就会执行。
注意，GUI渲染线程与JS引擎线程是互斥的，当JS引擎执行时GUI线程会被挂起（相当于冻结了）,GUI更新会被保存在一个队列中等到JS引擎空闲时立即被执行。
JS引擎线程
也称为JS内核，负责处理JavaScript脚本程序。（例如V8引擎）。
JS引擎线程负责解析JavaScript脚本，运行代码。
JS引擎一直等待着任务队列中任务的到来，然后加以处理，一个Tab页（render进程）中无论什么时候都只有一个JS线程在运行JS程序。
同样注意，GUI渲染线程与JS引擎线程是互斥的，所以如果JS执行的时间过长，这样就会造成页面的渲染不连贯，导致页面渲染加载阻塞。

3、浏览器在渲染前和渲染后
渲染之前要加载资源，渲染之后在DOM或者CSSOM变化后重新进行布局计算和重渲染操作
4、移动端和PC端的浏览器是否相同？
功能基本相同，但运行的操作系统不同，渲染机制有异