1.兼容性

2.内核

IE：trident内核  -ms-

Firefox：gecko内核  -moz-

Opera:Blink内核 -0-

Safari：webkit内核 -webkit-

Chrome:Blink(基于webkit)

搜狗浏览器是双核（webkit   银行网站用trident）

3.缓存机制

缓存位置：

（1）Service Worker：是运行在浏览器背后的独立线程

（2）Memory Cache：内存中的缓存，主要包含的是当前中页面中已经抓取到的资源,例如页面上已经下载的样式、脚本、图片等。读取内存中的数据肯定比磁盘快,内存缓存虽然读取高效，可是缓存持续性很短，会随着进程的释放而释放。

（3）Disk Cache：Disk Cache 也就是存储在硬盘中的缓存，读取速度慢点，但是什么都能存储到磁盘中，比之 Memory Cache 胜在容量和存储时效性上。

（4）Push Cache：Push Cache（推送缓存）是 HTTP/2 中的内容，当以上三种缓存都没有命中时，它才会被使用。它只在会话（Session）中存在，一旦会话结束就被释放，并且缓存时间也很短暂，在Chrome浏览器中只有5分钟左右，同时它也并非严格执行HTTP头中的缓存指令。

浏览器的缓存机制就是http的缓存机制，其机制是根据HTTP报文的缓存标识进行的。

http请求报文：请求行-http头（通用信息头、请求头、实体头）-请求报文主体（post请求）

http响应报文：状态行-http头（通用信息头、响应头、实体头）-响应报文主体

强制缓存：向浏览器缓存查找该请求结果，并根据该结果的缓存规则来决定是否使用该缓存结果的过程。

强缓存可以通过设置两种 HTTP Header 实现：Expires 和 Cache-Control。

强制缓存主要分三种情况：

（1）不存在该缓存结果和缓存标识，强制缓存失效，直接向服务器发出请求。

（2）存在该缓存结果和缓存标识，但该结果已失效，强制缓存失效，则使用协商缓存。

（3）存在该缓存结果和缓存标识，且该结果还没有失效，强制缓存生效，直接返回该结果。

强缓存和协商缓存

协商缓存就是强制缓存失效后，浏览器携带缓存标识向服务器发起请求，由服务器根据缓存标识决定是否使用缓存的过程，主要有以下两种情况：协商缓存生效，返回304和Not Modified   协商缓存失效，返回200和请求结果

协商缓存可以通过设置两种 HTTP Header 实现：Last-Modified 和 ETag 。

Etag是服务器响应请求时，返回当前资源文件的一个唯一标识(由服务器生成)，只要资源有变化，Etag就会重新生成。

浏览器缓存机制：

强制缓存优先于协商缓存进行，若强制缓存(Expires和Cache-Control)生效则直接使用缓存，若不生效则进行协商缓存(Last-Modified / If-Modified-Since和Etag / If-None-Match)，协商缓存由服务器决定是否使用缓存，若协商缓存失效，那么代表该请求的缓存失效，返回200，重新返回资源和缓存标识，再存入浏览器缓存中；生效则返回304，继续使用缓存。

4.localStorage、sessionStorage、cookie

共同点：都是保存在浏览器端，并且是同源的

Cookie：cookie数据始终在同源的http请求中携带（即使不需要），即cookie在浏览器和服务器间来回传递。而sessionStorage和localStorage不会自动把数据发给服务器，仅在本地保存。cookie数据还有路径（path）的概念，可以限制cookie只属于某个路径下,存储的大小很小只有4K左右。 （key：可以在浏览器和服务器端来回传递，存储容量小，只有大约4K左右）

sessionStorage：仅在当前浏览器窗口关闭前有效，自然也就不可能持久保持，localStorage：始终有效，窗口或浏览器关闭也一直保存，因此用作持久数据；cookie只在设置的cookie过期时间之前一直有效，即使窗口或浏览器关闭。（key：本身就是一个回话过程，关闭浏览器后消失，session为一个回话，当页面不同即使是同一页面打开两次，也被视为同一次回话）

localStorage：localStorage 在所有同源窗口中都是共享的；cookie也是在所有同源窗口中都是共享的。（key：同源窗口都会共享，并且不会失效，不管窗口或者浏览器关闭与否都会始终生效）

补充说明一下cookie的作用：

保存用户登录状态。例如将用户id存储于一个cookie内，这样当用户下次访问该页面时就不需要重新登录了，现在很多论坛和社区都提供这样的功能。 cookie还可以设置过期时间，当超过时间期限后，cookie就会自动消失。因此，系统往往可以提示用户保持登录状态的时间：常见选项有一个月、三个 月、一年等。

跟踪用户行为。例如一个天气预报网站，能够根据用户选择的地区显示当地的天气情况。如果每次都需要选择所在地是烦琐的，当利用了cookie后就会显得很人性化了，系统能够记住上一次访问的地区，当下次再打开该页面时，它就会自动显示上次用户所在地区的天气情况。因为一切都是在后 台完成，所以这样的页面就像为某个用户所定制的一样，使用起来非常方便定制页面。如果网站提供了换肤或更换布局的功能，那么可以使用cookie来记录用户的选项，例如：背景色、分辨率等。当用户下次访问时，仍然可以保存上一次访问的界面风格。

5.登录状态怎么使用cookie保持，最好的方法是什么

6.跨域问题解决

前端部分所说的跨域是狭义的，是由浏览器同源策略限制的一类请求场景。

同源策略：同源策略（SOP（Same origin policy））是一种约定，由Netscape公司1995年引入浏览器，它是浏览器最核心也是最基本的安全功能，如果缺少了同源策略，浏览器很容易受到XSS、CSFR等攻击。所谓同源是指“协议+域名+端口”三者相同，即便两个不同的域名指向同一个ip地址，也非同源。

同源策略限制以下几种行为：

（1）Cookie  LocalStorage和IndexDB无法获取

（2）   DOM和Js对象无法获得

（3）  AJAX请求不能发送

解决跨域问题的方法：

（1）通过jsonp跨域

通常为了减轻web服务器的负载，我们把js、css，img等静态资源分离到另一台独立域名的服务器上，在html页面中再通过相应的标签从不同域名下加载静态资源，而被浏览器允许，基于此原理，我们可以通过动态创建script，再请求一个带参网址实现跨域通信。

缺点：只能实现get一种请求方式

（2）CORS跨域资源共享

普通跨域请求：只服务端设置Access-Control-Allow-Origin即可，前端无须设置。

带cookie请求：前后端都需要设置字段，另外需注意：所带cookie为跨域请求接口所在域的cookie，而非当前页。

目前，所有浏览器都支持该功能(IE8+：IE8/9需要使用XDomainRequest对象来支持CORS）)，CORS也已经成为主流的跨域解决方案。

如果有cookie前端设置：withCredentials: true

（3）Node中间件代理或nginx反向代理：主要是通过同源策略对服务器不加限制

7.浏览器页面构成

结构层、表示层、行为层。分别是html、css、js。HTML实现页面结构，CSS完成页面的表现与风格，JavaScript实现一些客户端的功能与业务。

8.浏览器渲染原理

（1）将HTML结构字符串解析转换DOM树形结构，解析CSS产生CSS规则树，JavaScript脚本通过DOM API和CSSOM API操作dom树和css规则树

（2）解析完成后浏览器引擎会通过DOM Tree和CSS Rule Tree构造Rendering Tree

Rendering Tree 渲染树并不等同于DOM树，渲染树只会包括需要显示的节点和这些节点的样式信息。

CSS 的 Rule Tree主要是为了完成匹配并把CSS Rule附加上Rendering Tree上的每个Element（也就是每个Frame）。

然后，计算每个Frame 的位置，这又叫layout和reflow过程。

（3）最后通过调用操作系统Native GUI的API绘制。

DOM渲染过程：首先读取html的原始字节，并根据文件的指定编码转换成字符串，将字符串转换成Token，Token会标识出当前Token是“开始标签”还是“结束标签”或是“文本”等信息，一边生成Token，一边消耗Token生成结点对象，每个Token被生成后，会立刻消耗这个Token创建出节点对象。（注意：带有结束标签标识的Token不会创建节点对象）

CSSOM渲染过程：CSS字节转化成字符，接着转换成令牌和节点，最后链接成CSS对象模型（CSSOM）

浏览器有GUI渲染线程与JS引擎线程，是互斥的。