1.浏览器内核，浏览器是由什么组成的
浏览器可以分为两部分，shell+内核。其中shell的种类相对比较多，内核则比较少。Shell是指浏览器的外壳：例如菜单，工具栏 等。主要是提供给用户界面操作，参数设置等等。它是调用内核来实现各种功能的。内核才是浏览器的核心。内核是基于标记语言显示内容的程序或模块。
浏览器内核又可以分成两部分：渲染引擎(layout engineer或者Rendering Engine)和JS引擎。渲染引擎负责负责对网页语法的解释（如HTML、XML等）并渲染网页（CSS）。渲染引擎决定了浏览器如何显示网页的内容以及页面的格式信息。
JS引擎则是解析Javascript语言，执行javascript语言来实现网页的动态效果。JavaScript引擎能为程序员提供部分操作浏览器的功能（网络、DOM、外部事件、HTML5视频、canvas和存储）。
（以下作为了解）
主流的渲染引擎：
- Trident（IE）
国内许多双核浏览器的其中一核便是Trident，也就是我们所说的兼容模式。
在Win10发布后，微软将其内置浏览器命名为Edge，Edge的最显著特点就是新内核EdgeHTML。 - Gecko（firefox）
Gecko的最大特点便是完全开源，开发程度很高。可惜近几年开始没落，如打开速度过慢 - WebKit（safari）
大名鼎鼎的WebKit内核是苹果公司开发的。像Opera、Chrome早期都使用的是WebKit作为浏览器内核。Chrome早已换为Blink内核（是Webkit分支） - Blink（Chrome）
2013年，Google 宣布将在未来的 Google Chrome/Chromium 中使用基于 WebKit 的 fork Web 渲染引擎：Blink。同时 Opera 表示也将跟进 Google Chrome/Chromium 的步伐。且目前大部分国内浏览器最新版本的内核也都改为了Blink。
JS引擎
- V8（Chrome）
谷歌公司开发的V8浏览器基于C++，在运行JavaScript之前，相比其它的JavaScript的引擎转换成字节码或解释执行，V8将其编译成原生机器码，并且使用了如内联缓存（inline caching）等方法来提高性能。有了这些功能，JavaScript程序在V8引擎下的运行速度媲美二进制程序。
NodeJS其实就是封装了V8。 - Chakra （IE）
Chakra 中文译名为查克拉。虽然新版的IE（IE9及之后的版本）以及Edge使用的是Chakra，但老版的IE仍然使用的是Jscript。 - Nitro（SquirrelFish）（Safari）
SquirrelFish是基于寄存器、直接线程的高级字节码引擎。 - Carakan（Opera）
- Mozilla（firefox）
2..打开一个网页，浏览器是怎么能把这个网页显示出来的
通过内核渲染出来的，参考上面浏览器内核的解释
3.行内元素（内联元素）和块级元素的区别（三条）
块级：div,dl,dt,h1-h6,
行内：a,img,select,span,textarea
①行内元素会在一条直线上排列，水平方向排列。
块级元素默认下一行展示
②块级元素可以包含行内元素和块级元素。行内元素不能包含块级元素，只能包含文本或者其它行内元素。
③行内元素默认宽度与内容有关，且height，width无效，margin上下无效，padding上下无效，块级元素默认宽度是它本身父容器的100%（和父元素的宽度一致）
拓展:inlineblock www.cnblogs.com/iceflorence…
4.html语义化
①就是你写的HTML结构，是用相对应的有一定语义的英文字母（标签）表示的，标记的，因为HTML本身就是标记语言。
有利于用户体验（例如title、alt。alt在图片无法展示时可以显示文字）；便于团队开发和维护；有利于seo（和搜索引擎建立良好沟通，有助于爬虫抓取更多的有效信息：爬虫依赖于标签来确定上下文和各个关键字的权重；）
h5新增的语义化标签：header,footer,nav,aside(侧边栏)，article，
5，cookie
6.sessionStorage和localStorage的区别，存放数据最大可以存多少
localStorage和sessionStorage一样都是用来存储客户端临时信息的对象。
①永久性：localStorage生命周期是永久，这意味着除非用户显示在浏览器提供的UI上清除localStorage信息，否则这些信息将永远存在。sessionStorage生命周期为当前窗口或标签页，一旦窗口或标签页被永久关闭了，那么所有通过sessionStorage存储的数据也就被清空了。
②不同浏览器无法共享localStorage或sessionStorage中的信息。相同浏览器的不同页面间可以共享相同的 localStorage（页面属于相同域名和端口），但是不可以共享sessionStorage。但如果一个标签页包含多个iframe标签且他们属于同源页面，那么他们之间是可以共享sessionStorage的。
同源判断规则：如果域名或 IP 地址、端口与协议都相同，那么就会被判定为同源。
7,在地址栏上输入url，到页面展示出来这中间发生了什么
1.在浏览器地址栏输入url并按下回车。
2.浏览器检查当前url是否存在缓存和缓存是否过期。
3.域名解析（DNS解析url对应的ip）。
4.根据ip建立tcp链接（三次握手）。
5.用当前url发送http请求。
6.服务器处理请求，浏览器接收响应。
7.浏览器渲染页面。(重点)
** 要进行解析和渲染，对html页面进行解析形成DOM树和CSSOM树，CSSOM树和DOM树连接在一起形成一个render tree，渲染树用来计算可见元素的布局并且作为将像素渲染到屏幕上的过程的输入。为了形成这个渲染树，浏览器需要遍历每一个可见的节点，对于不可见的节点将会被忽略；对可见的dom节点添加css样式；显示可见节点（节点包括内容和被计算的样式）；浏览器在Render之后已经确认了Render元素的大小，样式等信息，但是此时还没有确定元素的具体位置信息（运用盒子模型进行计算），这里还需要一个Layout过程。最后将rendertree上的所有节点进行paint（绘制）**
让我们快速的浏览下浏览器所做的事情：
- 处理HTML标签建立DOM树
- 处理CSS标签建立CSSOM树
- 连接CSSOM树和DOM树形成一个render树
- 在render树上运行布局来计算每个节点的形状
- 计算每一个节点的位置
- 在屏幕上绘制每一个节点
**Layout链接 **blog.51cto.com/zilla/86290…
作者：youyou柚
链接：juejin.cn/post/689162…
来源：掘金
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。
