浏览器渲染机制

什么是浏览器

浏览器是用户访问互联网的重要接口,实质上是方便一般用户通过界面解析和发送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端的浏览器是否相同?
功能基本相同,但运行的操作系统不同,渲染机制有异


©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 199,064评论 5 466
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 83,606评论 2 376
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 146,011评论 0 328
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 53,550评论 1 269
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 62,465评论 5 359
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 47,919评论 1 275
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,428评论 3 390
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,075评论 0 254
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,208评论 1 294
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,185评论 2 317
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,191评论 1 328
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 32,914评论 3 316
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,482评论 3 302
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,585评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,825评论 1 255
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,194评论 2 344
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 41,703评论 2 339

推荐阅读更多精彩内容