浏览器的基础知识

一、浏览器

浏览器市场份额报告

最新的浏览器市场份额报告显示,chrome、IE8以及一些其他开源浏览器已占据主流浏览器市场的大半江山。

1、 浏览器的主要功能

浏览器的主要功能是将用户选择的web资源呈现出来,它需要从服务器请求资源,并将其显示在浏览器窗口中,资源的格式通常是HTML,也包括PDF、image及其他格式。用户用URI(Uniform Resource Identifier统一资源标识符)来指定所请求资源的位置,关于URI的部分在之后的HTTP协议这部分再进行详细的研究。

2、浏览器的主要组成结构

  • 用户界面 - 包括地址栏、后退/前进按钮、书签目录等,也就是你所看到的除了用来显示你所请求页面的主窗口之外的其他部分。

  • 浏览器引擎 - 用来查询及操作渲染引擎的接口。

  • 渲染引擎 - 用来显示请求的内容,例如,如果请求内容为html,它负责解析html及css,并将解析后的结果显示出来。

  • 网络 - 用来完成网络调用,例如http请求,它具有平台无关的接口,可以在不同平台上工作。

  • UI后端 - 用来绘制类似组合选择框及对话框等基本组件,具有不特定于某个平台的通用接口,底层使用操作系统的用户接口。

  • JS解释器 - 用来解释执行JS代码。

  • 数据存储 - 属于持久层,浏览器需要在硬盘中保存类似cookie的各种数据,HTML5定义了web database技术,这是一种轻量级完整的客户端存储技术

3、渲染引擎(The rendering engine)

渲染引擎的职责就是渲染,即在浏览器窗口中显示所请求的内容。

默认情况下,渲染引擎可以显示html、xml文档及图片,它也可以借助插件(一种浏览器扩展)显示其他类型数据,这里只讨论渲染引擎最主要的用途——显示应用了CSS之后的html及图片。

  • 主流的浏览器渲染引擎有:
    • Geoko——Mozilla自主研发的渲染引擎(FireFox 使用的就是Geoko);
    • webkit——Webkit是一款开源渲染引擎,它本来是为Linux平台研发的,后来由Apple移植到Mac及Windows上(类似chrome,Safari使用的是Webkit引擎);

4、浏览器的渲染机制

  • 解析 HTML 标签, 构建 DOM 树
  • 解析 CSS 标签, 构建 CSSOM 树
  • 把 DOM 和 CSSOM 组合成 渲染树 (render tree)
  • 在渲染树的基础上进行布局, 计算每个节点的几何结构
  • 把每个节点绘制到屏幕上 (painting)

需要注意的是,浏览器渲染的过程是逐步完成的,为了更好的用户体验,渲染引擎将会尽可能早的将内容呈现到屏幕上,并不会等到所有的html都解析完成之后再去构建和布局render树。它是解析完一部分内容就显示一部分内容,同时,可能还在通过网络下载其余内容。

webkit主流程.png
Geoko渲染引擎主流程

5、解析与DOM树构建(Parsing and DOM tree construction)

  • 解析(Parsing-general)
    解析一个文档,指的是将文档转换为具有一定意义的结构——编码可以理解和使用的东西。解析的结果通常是表达文档结构的节点树,称为解析树或语法树。

  • 文法(Grammars)
    解析基于文档依据的语法规则——文档的语言或格式。每种可被解析的格式必须具有由词汇及语法规则组成的特定的文法,称为上下文无关文法。人类语言不具有这一特性,因此不能被一般的解析技术所解析。

  • 解析器-词法分析器(Parser-Lexer combination)

  • 转换(Translation)

相关文章,深入研究点这里

二、CSS和JS在网页中的放置顺序是怎样的?

css一般是放在<head></head>标签内,而JS一般是放在<body></body>标签内的最后位置,外链方式为<script src=" "></script>中,内置样式为<script></script>。

  • 其实对于css而言,样式表不是一定要放在<head></head>,但是如果将css样式表放在文档底部,考虑到浏览器是自上而下的对网页文档进行解析,当浏览器将html结构已经解析完毕,而css的样式有可能还未完成,这样对用户的体验会有影响,故一般是将其放在<head></head>标签内,让样式表被优先解析;

  • JavaScript 代码是内嵌还是在外链文件中,页面的下载和渲染都必须停下来等待脚本执行完成。JavaScript 执行过程耗时越久,浏览器等待响应用户输入的时间就越长。因此一般将JS放置在<body></body>的末尾位置,这样减少对于页面的下载和渲染的影响。

知乎上关于几个html标签顺序排放问题的讨论
知乎上的相关讨论

三、解释白屏和FOUC

  • 白屏问题

  • 如果把样式放在底部,对于IE浏览器,chrome等(CSS全部加载后再呈现,有可能等待时间长),在某些场景下(新窗口打开,刷新等)页面会出现白屏,而不是内容逐步展现。

  • 使用@import标签,即使CSS放入link, 并且放在头部,也可能出现白屏。

  • 对于图片和CSS, 在加载时会并发加载(如一个域名下同时加载两个文件)。 但在加载JavaScript时,会禁用并发,并且阻止其他内容的下载。所以把JavaScript放入页面顶部也会导致白屏现象。

  • FOUC
    Flash of Unstyled Content "无样式内容闪烁“:有些浏览器是边渲染边呈现,CSS放置body标签底部,会出现加载html结束后才一次性加载css样式,从而导致页面闪烁。

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

推荐阅读更多精彩内容