浏览器

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引擎线程,是互斥的。

你可能感兴趣的:(浏览器)