衣食父母-浏览器

stormjun 发布于2019-08-02 14:24 / 3216人阅读

摘要：我觉得文章题目起的挺现实，在大行其道的今天，浏览器作为一款软件已经是很多程序员兄弟的衣食父母，所以了解一下浏览器是很必要的。

我觉得文章题目起的挺现实，在BS大行其道的今天，浏览器作为一款window软件已经是很多程序员兄弟的衣食父母，所以了解一下浏览器是很必要的。

1、背景

作为前端程序员一定要好奇从地址栏输入地址后到底发生了什么

主流浏览器

IE、Firefox、Safari、Chrome、Opera五大家族, Firefox、Chrome是开源的完全开源的，safari部分开源

浏览器的主要构成

用户界面、浏览器引擎、渲染引擎、网络、js解释器、UI后端、数据存储，google为每个tab页分一个渲染引擎，
注：浏览器引擎和渲染引擎的区别
(1) 浏览器引擎是一个主进程、用来管理渲染引擎所在的进程，渲染引擎对应的进程可能只属于一个tab页（chrome），而浏览器进程属于整个浏览器
(2) 渲染引擎没有访问操作系统的权限（文件、网络、设备）而浏览器引擎有，这样的目的是有恶意网站时不会损害整个浏览器或者操作系统
(3) 当用户在地址栏输入网址请求网页时，渲染引擎向浏览器引擎发出请求:依次调用网络获取资源，请求的资源到达后，浏览器引擎把资源传给渲染

   渲染引擎，渲染引擎将获取的资源进行解析(html css js),有一些组件（布局进程就属于其中的某个组件）格式化后传给浏览器引擎，浏览器在界面中将界面呈现出来

渲染引擎

渲染引擎有两种Mozilla和webkit,熟悉css的同学可能感觉这俩外国字挺熟悉，对啊css兼容性的属性都会加这俩前缀，渲染引擎就是将请求的资源在浏览器中呈现出来

渲染主流程

首先是获取请求的文档，文档由8kb的数据块构成，8kb的大小是由tcp缺省缓冲区的大小决定的。构建成dom树->构建render树->布局render树->绘制render树。

(1) 渲染引擎从浏览器引擎获取html文档后开始解析，进行词法分析（将输入分成可以理解的单词）和语法分析（对应语言的语义规则，描述文档内容），最终根据文档标签构建一棵DOM树(可以理解成c++的一种数据结构),解析过程如果碰到了行内、内联、外联的css，对应的子进程着手cssom树的构建(可以理解成c++的一种数据结构，描述样式规则)，由于是两个进程所以没有阻塞的问题，如果解析过程中碰到了javascript，那么DOM，并且javascript的执行需要等到cssom构建完毕，下一步构建渲染树是需要两个树都是在完成构建的状态。

(2) 此时要构建渲染树了，先从DOM树的根节点开始逐层遍历，然后依次在cssom中找到对应的样式并合并到渲染树，如果碰到了隐藏样式那么
直接在渲染树种忽略。

(3) 对渲染树进行"布局"，之前的所有操作都没涉及浏览器窗口，他们就是在这个阶段联系起来的，这样渲染树才能适应不同大小的窗口，这时所有的位置和尺寸都被转换为像素(px)

(4) 最后是将布局树转换格式传给浏览器引擎，在浏览器窗口绘制。

2、css阻塞

从上文中我们知道css是阻塞的也是非阻塞的，阻塞渲染树的构建，但是对于dom树的构建是不阻塞的。如果在构建渲染树时是不阻塞的会发生什么，我们会看到"纯html"没有任何样式，这样是不友好的，但是某些时候我们确实想让它是不阻塞的，比如涉及打印的样式，在特定大屏上的样式，因为他们对渲染的影响比较小，此时可以采用媒体属性(media)

注：不阻塞不是不下载，只是在首次合成渲染树时不受它的阻塞

3、javascript阻塞

从衣食父母-浏览器中我们知道javascript脚本的执行是会阻塞DOM树的构建的，并且在cssom构建完毕前停止执行，这样会有很大的性能开销，有没有不阻塞的方法呢？
1、外部js异步加载

2、内联js异步执行

function h () {
    console.log(document.querySelectorAll("h1"))
}
setTimeout(h, 0)

GPU云服务器云服务器浏览器跨境浏览器浏览器评测 155浏览器

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/53781.html

衣食父母-浏览器

摘要：我觉得文章题目起的挺现实，在大行其道的今天，浏览器作为一款软件已经是很多程序员兄弟的衣食父母，所以了解一下浏览器是很必要的。我觉得文章题目起的挺现实，在BS大行其道的今天，浏览器作为一款window软件已经是很多程序员兄弟的衣食父母，所以了解一下浏览器是很必要的。 1、背景作为前端程序员一定要好奇从地址栏输入地址后到底发生了什么主流浏览器 IE、Firefox、Safari、Ch...

wizChen 2019-08-23 15:36 评论0 收藏0
衣食父母-浏览器

摘要：我觉得文章题目起的挺现实，在大行其道的今天，浏览器作为一款软件已经是很多程序员兄弟的衣食父母，所以了解一下浏览器是很必要的。我觉得文章题目起的挺现实，在BS大行其道的今天，浏览器作为一款window软件已经是很多程序员兄弟的衣食父母，所以了解一下浏览器是很必要的。 1、背景作为前端程序员一定要好奇从地址栏输入地址后到底发生了什么主流浏览器 IE、Firefox、Safari、Ch...

icyfire 2019-08-30 15:55 评论0 收藏0
【机器学习】线性回归原理介绍

摘要：机器学习线性回归原理介绍机器学习线性回归实现机器学习线性回归实现通常我们学习机器学习都是从线性回归模型开始的。这就是种使身高回归于中心的作用。均方误差作为线性回归模型的代价函数。为了方便，这里以单变量线性回归为例。【机器学习】线性回归原理介绍【机器学习】线性回归python实现【机器学习】线性回归sklearn实现通常我们学习机器学习都是从线性回归模型开始的。线性回归模型形...

Lycheeee 2019-06-26 18:45 评论0 收藏0
大家都有自己的事情要做

摘要：她知道，大家都有自己的事情要做，不可能经常陪着自己。小铁匠的脚步踏破了清晨的宁静。女老板赶走了小铁匠。小铁匠陶醉了，在想象的世界里，他的手指在琴弦上飞动。哦那美妙的声音产生了美妙的变奏，小铁匠不敢相信自己的耳朵，他真的听到了隐隐的歌声。夜幕，又一次降临。窗外，风呼呼的刮着，她窝在墙角，蜷缩成一只猫，望着那无边无际的黑暗，泪水终于冲破了最后的防线，她没有去擦，任它从脸颊上滑落。五年前，...

walterrwu 2019-08-26 13:55 评论0 收藏0