JavaScript浏览器(兼容、调试)

1、浏览器主要组成部分
1】用户界面
2】浏览器引擎(负责窗口管理、Tab进程管理等)
3】渲染引擎(也叫内核，负责HTML和CSS解析、页面渲染)
4】JS引擎(JS解释器，如Chrome和Nodejs采用的V8)
5】网络
6】存储
注：我们常说的浏览器内核就是指渲染引擎

2、浏览器是多线程的吗？
是的。JS是单线程，但浏览器是多线程，比如渲染线程，JS引擎线程。

3、浏览器解析过程
（根据前端代码至上而下解析，html，css和js也是遵循此顺序，因此渲染引擎和js引擎无谓谁先谁后）
1）构建dom树
首先解析收到的文档，根据文档定义构建1棵 DOM 树，DOM树是由DOM元素及属性节点组成的。
2）构建css树
然后对CSS进行解析，生成CSSOM规则树。
3）构建渲染树
根据 DOM 树和 CSSOM 规则树构建渲染树。渲染树的节点被称为渲染对象，渲染对象是一个包含有颜色和大小等属性的矩形，渲染对象和 DOM 元素相对应，但这种对应关系不是一对一的，不可见的 DOM 元素不会被插入渲染树。还有一些 DOM元素对应几个可见对象，它们一般是一些具有复杂结构的元素，无法用一个矩形来描述。
4）布局（回流）
当渲染对象被创建并添加到树中，它们并没有位置和大小，所以当浏览器生成渲染树以后，就会根据渲染树来进行布局（也可以叫做回流）。这一阶段浏览器要做的事情是要弄清楚各个节点在页面中的确切位置和大小。通常这一行为也被称为“自动重排”。
**重排：就是重新布局
5）绘制
布局阶段结束后是绘制阶段，遍历渲染树并调用渲染对象的 paint 方法将它们的内容显示在屏幕上，绘制使用UI 基础组件。
**重绘：重新绘制
这个过程是逐步完成的，为了更好的用户体验，渲染引擎将会尽可能早的将内容呈现到屏幕上，并不会等到所有的 html 都解析完成之后再去构建和布局 render 树。它是解析完一部分内容就显示一部分内容，同时，可能还在通过网络下载其余内容。
注意：
正常的解析过程，渲染引擎先开始解析html标签，遇到css，阻塞html的解析，转而去解析css。遇到js，也会先阻塞html的解析，然后调用js引擎去解析js代码。因而屏幕会出现短暂的白屏现象。
优化：
1】将一些css代码，js代码写在html文件内联标签里，减少下载时间
2】尽量减小文件大小，缩减代码量有时不太实际，业务就需要那么多代码，但可以通过webpack，将代码压缩成一行，实现文件大小的缩减
3】可以将一些不需要在HTML解析阶段用到的JavaScript外部文件引入的script标签加上async或者defer，使得能异步加载，不阻塞页面构建
4】async：异步加载js文件，加载完成后，渲染引擎就会中断渲染，解析js文件造成阻塞。
defer 和 async 的区别在于：
defer 要等到整个页面在内存中正常渲染结束（DOM 结构完全生成，以及其他脚本执行完成），在window.onload 之前执行；
async 一旦下载完，渲染引擎就会中断渲染，执行这个脚本以后，再继续渲染。
如果有多个 defer 脚本，会按照它们在页面出现的顺序加载
多个 async 脚本不能保证加载顺序

4、什么是重绘（重新绘制）和回流（布局）？如何减少它们触发的次数？
1】重绘：渲染树更新某个属性，但不影响整体布局，比如更改背景颜色。
2】回流：更新某元素一些属性，需要重新进行布局，比如新增dom
3】频繁操作dom，就会多次引起浏览器的重绘和回流，消耗更多的资源，导致页面变慢。建议使用虚拟dom，将多次dom操作合并为一次。

5、什么是文档的预解析？（浏览器解析过程）
Webkit 和 Firefox 都做了这个优化，当执行 JavaScript 脚本时，另一个线程解析剩下的文档，并加载后面需要通过网络加载的资源。这种方式可以使资源并行加载从而使整体速度更快。需要注意的是，预解析并不改变 DOM 树，它将这个工作留给主解析 过程，自己只解析外部资源的引用，比如外部脚本、样式表及图片。

6、浏览器端的存储技术有哪些？
浏览器常见的存储技术有 cookie、localStorage 和 sessionStorage。
还有两种存储技术用于大规模数据存储，webSQL（已被废除）和 indexDB。

7、Cookie放哪里，Cookie能做的事情和存在的价值
1】后端生成， 放在http的请求头，最终存储在浏览器里面里， 一般4k大小
2】内容：名（name）、值（value）、等号和过期时间
3】作用：cookie本身是用于客户端和服务器之间的通信，用于身份认证的功能， 携带少量的信息 每次发起http请求都会带上
4】会话cookie 和 持久cookie
指定了expire time（有效期）的是持久cookie
没有指定expire time（有效期）的是会话cookie

8、cookie和session有哪些方面的区别?
1】cookie 机制采用的是在客户端保持状态的方案 session 机制采用的是在服务器端保持状态的方案
2】cookie不是很安全，别人可以分析存放在本地的COOKIE并进行COOKIE欺骗 考虑到安全应当使用session
3】session会在一定时间内保存在服务器上。当访问增多，会比较占用你服务器的性能 考虑到减轻服务器性能方面，应当使用COOKIE
4】单个cookie保存的数据不能超过4K，很多浏览器都限制一个站点最多保存20个cookie；而session的大小不限制，具体看服务器容量
5】将登陆信息等重要信息存放为SESSION 其他信息如果需要保留，可以放在COOKIE中

9、localStorage 和 sessionStorage
localStorage和sessionStorage都是webstorage，为本地存储，存储在客户端，大小为5M
1】