1.前端实现单点登录的方式

实现方式一：认证中心

认证中心是一个专门负责处理登录请求的独立的Web服务。用户统一在认证中心进行登录，登录成功后，认证中心记录用户的登录状态，并将 Token 写入 Cookie。这种方式是单点登录的标准做法，虽然相对复杂，但是支持跨域且扩展性好。

实现方式二：父域 Cookie

将Cookie的domain属性设置为父域的域名（主域名），同时将Cookie的path 属性设置为根路径，这样所有的子域应用就都可以访问到这个Cookie了。不过这要求应用系统的域名需建立在一个共同的主域名之下，如tieba.baidu.com 和map.baidu.com，它们都建立在baidu.com这个主域名之下，那么它们就可以通过这种方式来实现单点登录。这种实现方式比较简单，但不支持跨主域名。

实现方式三：LocalStorage 跨域

在前后端分离的情况下，我们可以选择将Session ID（或Token）保存到浏览器的LocalStorage中，让前端在每次向后端发送请求时，主动将LocalStorage的数据传递给服务端。这些都是由前端来控制的，后端需要做的仅仅是在用户登录成功后，将Session ID（或Token）放在响应体中传递给前端。在这样的场景下，单点登录完全可以在前端实现。前端拿到 Session ID （或 Token ）后，除了将它写入自己的 LocalStorage 中之外，还可以通过特殊手段将它写入多个其他域下的 LocalStorage 中。

2.http1,http2,http3区别

HTTP 1.0

无状态，无连接；
短连接：每次发送请求都要重新建立tcp请求，即三次握手，非常浪费性能；
无host头域，也就是http请求头里的host；
不允许断点续传，而且不能只传输对象的一部分，要求传输整个对象。
HTTP 1.1
长连接，流水线，使用connection:keep-alive使用长连接；
请求管道化；
增加缓存处理(新的字段如cache-control)；
增加Host字段，支持断点传输等；
由于长连接会给服务器造成压力。
HTTP 2.0

二进制分帧；
多路复用(或连接共享)，使用多个stream，每个stream又分帧传输，使得一个tcp连接能够处理多个http请求；
头部压缩，双方各自维护一个header的索引表，使得不需要直接发送值，通过发送key缩减头部大小；
服务器推送(Sever push)。
HTTP 3.0

基于google的QUIC协议，而quic协议是使用udp实现的；
减少了tcp三次握手时间，以及tls握手时间；
解决了http 2.0中前一个stream丢包导致后一个stream被阻塞的问题；
优化了重传策略，重传包和原包的编号不同，降低后续重传计算的消耗；
连接迁移，不再用tcp四元组确定一个连接，而是用一个64位随机数来确定这个连接；
更合适的流量控制

3.适配刘海屏

第一步，设置网页在可视窗口的布局方式

iOS11 新增特性，苹果公司为了适配 iPhoneX 对现有 viewport meta 标签的一个扩展，用于设置网页在可视窗口的布局方式，可设置三个值：

contain: 可视窗口完全包含网页内容（左图）
cover：网页内容完全覆盖可视窗口（右图）
auto：默认值，跟 contain 表现一致

constant 函数

iOS11 新增特性，Webkit 的一个 CSS 函数，用于设定安全区域与边界的距离，有四个预定义的变量：

/* body 在横屏底下和竖屏底下一定要做好定位，不然 /
/ 竖屏底下的查询 /
@media screen and (orientation: portrait) {
body {
/ 防止页面被刘海遮住 /
padding-top: constant(safe-area-inset-top);
//以防万一写一个你本身适配其他手机的
padding-top:0px;
}
}
/ 横屏底下的查询 /
@media screen and (orientation: landscape) {
body {
/ IOS 11支持 /
padding-right: constant(safe-area-inset-right);
padding-left: constant(safe-area-inset-left);
padding-bottom: constant(safe-area-inset-bottom);//为底下圆弧的高度 34px
/ IOS 11.2版本版本支持*/
padding-right: env(safe-area-inset-right);
padding-left: env(safe-area-inset-left);
padding-bottom: env(safe-area-inset-bottom);
//以防万一写一个你本身适配其他手机的
padding-right:0px;
padding-left:0px;
padding-bottom:0px;
}
}

前端渲染大量数据

1.createDocumentFragment（）碎片节点

渲染大数据时，将数据分成一段一段执行，createDocumentFragment()创建一个虚拟节点对象，将一部分数据先添加到DocumentFragment中，再统一将DocumentFragment添加到页面，会减少页面渲染DOM的次数，效率会明显提

2.requestAnimationFrame（） 上面的代码中使用到了requestAnimationFrame（），实现动画效果的方法比较多，javascript中可以通过定时器setTimeout来实现，css3可以使用transition和animation来实现，html5中的canvas也可以实现。除此之外html5还提供一个专门用于请求动画的API, 即requestAnimationFrame(rAF), 直译就是 “请求动画帧”，requestAnimationFrame会把每一帧中的所有dom操作集中起来,在一次重绘和回流中完成,并且重绘或回流的时间间隔紧紧会随浏览器的刷新频率,一般来说频率为每帧60秒

-----------------------------接下来实时更新

浏览器工作原理

（1）用户界面 ：包括地址栏、前进/后退按钮、书签菜单等。除了浏览器主窗口显示的请求的页面外，其他显示的各个部分都属于用户界面。其他显示的各个部分都属于用户界面。
（2）浏览器引擎 ：在用户界面和呈现引擎之间传送指令。
（3）渲染引擎 ：负责显示请求的内容。如果请求的内容是 HTML，它就负责解析 HTML 和CSS 内容，并将解析后的内容显示在屏幕上。
（4）网络 ：用于网络调用，如 HTTP 请求。其接口与平台无关，为所有平台提供底层实现。
（5）用户界面后端 ：用于绘制基本的窗口小部件，比如组合框和窗口。其公开了与平台无关的通用接口，而在底层使用操作系统的用户界面方法。
（6） JavaScript 解释器 ：用于解析和执行 JavaScript 代码。
（7）数据存储 ：这是持久层。浏览器需要在硬盘上保存各种数据，例如 Cookie。新的 HTML 规范(HTML5) 定义了“网络数据库” ，这是一个完整的浏览器内数据库。

前端遇到的面试题（2）