JavaScript面试题(浏览器)

 1.浏览器兼容性问题

不同浏览器的内核不尽相同，所以各个浏览器对网页的解析存在一定的差异。浏览器内核主要分为两种，一是渲染引擎，另一个是js 引擎。所以浏览器兼容性问题一般指：css兼容、js兼容。

CSS兼容：

(1). 不同浏览器的标签默认的margin和padding不同

利用通配符选择器设置 *{margin:0;padding:0;}

(2). css3新属性，加浏览器前缀兼容早期浏览器

浏览器前缀

-moz- /* 火狐浏览器 /

-webkit- / Safari, 谷歌浏览器等使用Webkit引擎的浏览器 /
-o- / Opera浏览器(早期) /
-ms- / IE */

哪些css3属性需要加：

定义关键帧动画 @keyframes
css3中的变形（transform）、过渡(transtion)、动画(animation)
border-radius 圆角
box-shadow  盒子阴影
flex  弹性布局

使用：

.myClass {
    -webkit-animation-name: fadeIn;
    -moz-animation-name: fadeIn;
    -o-animation-name: fadeIn;
    -ms-animation-name: fadeIn;
    animation-name: fadeIn;  /* 不带前缀的放到最后 */
}

(3). css hack解决浏览器兼容性(csshack本身就是处理浏览器兼容的)

background-color:yellow0; 0 是留给ie8的
+background-color:pink;   + ie7定了；
_background-color:orange; _专门留给神奇的ie6

JS兼容 

(1). 事件绑定

IE: dom.attachEvent();
标准浏览器： dom.addEventListener();

(2). event事件对象问题

谷歌火狐IE9以上获取事件对象 function(event){}
谷歌和IE获取事件对象 function(){window.enent}
document.οnclick=function(ev){ var e= ev || window.event }; //兼容写法；

(3). event.target事件源对象问题

IE： event对象有srcElement属性，但是没有target属性；
Firefox: event对象有target属性，但是没有srcElement属性。

srcObj = event.srcElement || event.target; //兼容写法；

(4).  阻止事件冒泡传播

    e.stopPropagation();//W3C标准

    e.cancelBubble=true;//IE....

(5).  阻止事件冒泡传播

    e.preventDefault();//W3C标准

    e.returnValue='false';//IE..

2.什么是同源策略

        同源策略是浏览器向服务端发送请求时的一种安全策略，它规定了浏览器只能请求域名、端口号、协议相同的数据源，非同源的请求会被浏览器拦截，造成跨域问题。

3.什么是跨域请求，怎样解决跨域

    当浏览器请求域名、端口号、协议不同的数据源时，会被浏览器拦截，此时就会报跨域。

• JSONP: 通过动态创建<script>标签来绕过跨域限制，适用于GET请求。但JSONP安全性较低，不推荐在敏感数据传输中使用。
• CORS代理: 使用CORS代理服务器来转发请求，代理服务器会在请求头中添加合适的CORS头，使请求看起来像是来自同一个源。
• 使用第三方库: 比如Axios等支持CORS的库，可以帮助处理跨域请求的细节。
• PostMessage API: 用于不同源之间的通信，适用于iframe或窗口之间的跨域消息传递。

4.axios发送请求无法携带cookie是什么原因，如何解决？

        同源策略。axios发送非同源的请求会出现跨域问题，cookie不能跨域，会被浏览器隐藏掉。

5.axios常用的api有哪些？

        axios可以发送各种类型的HTTP请求，包括GET、POST、PUT、DELETE等。我们可以使用以下方法来发送请求。

• axios.git(url,config) 一般用来查询。
• axios.post(url,data,config) 一般用来添加数据。
• axios.put(url,data,config) 一般用来修改数据。
• axios.delete(url,config) 一般用来删除数据。
• axios.interceptors.request.use(responseFun,errorFun) 请求拦截器
• axios.interceptors.response.use(responseFun,errorFun) 响应拦截器

6.谈一下你对token验证机制的理解

• Token验证机制是一种身份验证机制,用于保护Web应用程序和API免受未经授权的访问和攻击。
• 在这种机制中,用户登录成功后,服务器会生成一个令牌(Token),并将其返回给用户。该令牌包含一些身份验证信息,如用户ID、访问权限等。用户在后续的请求中将该令牌发送给服务器,以证明他们的身份。服务器可以通过验证该令牌的有效性来确定用户是否有权访问请求的资源。
• 在这种机制中,用户登录成功后,服务器会生成一个令牌(Token),并将其返回给用户。该令牌包含一些身份验证信息,如用户ID、访问权限等。用户在后续的请求中将该令牌发送给服务器,以证明他们的身份。服务器可以通过验证该令牌的有效性来确定用户是否有权访问请求的资源。

7.怎样解决token过期

• 刷新令牌（Refresh Token）在用户登录时，除了发放一个访问令牌（Access Token）以外，再发放一个刷新令牌（Refrsh Token）。访问令牌的有效期比较短，刷新令牌的有效期比较长。当访问令牌过期时，使用刷新令牌向服务器请求新的访问令牌。如果刷新令牌也过期，则跳转回登录界面。 这种方式的优点是可以避免用户频繁登录，但需要妥善保管刷新令牌，因为它的安全性比访问令牌更高。
• 滑动窗口：用户每次使用使用访问令牌时，服务器都会更新访问令牌的过期时间。这种方式的优点是用户只要频繁访问，就不需要登录，但可能会增加服务器负担。
• 重新登录：当访问令牌过期时，跳转回登录界面，让用户重新登录。这是最简单的一种方式，但可能会影响用户体验。

8.localStorage

• 作用。处理长期存储的业务逻辑数据。
• 获取方式：window.localStorage
• 过期时间。除非手动删除，否则永远不会消失。
• 储存：容量5MB。只能存储字符串类型。
• 属性。Key、Value
• 跨域访问。window.postMessage

9.sessionStorage

• 作用。处理当前账号的业务逻辑数据。
• 获取方式：window.sessionStorage
• 过期时间。浏览器关闭时自动删除。
• 储存：容量5MB。只能存储字符串类型。
• 属性。Key、Value

10.cookie

• 作用。cookie是服务器保存在浏览器上的一段文本信息，浏览器进行在本地进行存储并且在请求中携带上cookie。服务器可以根据cookie辨别用户的身份，也可以判断两个请求是否来自于同一个浏览器。相应的服务器也可以修改cookie。
• 过期时间。cookie一般会在浏览器关闭的时候删除，也可以通过expires来设置过期时间。
• 储存：一个cookie不能超过4KB，一个站点最多存放20个cookie。只能存储字符串类型。
• 属性。
  • Name：cookie的名字，一个域名下绑定的cookie的name不能相同。如果是相同的name则会被覆盖。
  • value：每个cookie拥有的属性，表示cookie的值。由于cookie规定是名称/值是不允许包含分号，逗号，空格的，所以为了不给用户到来麻烦，考虑服务器的兼容性，任何存储cookie的数据都应该被URL编码。
  • domain：cookie的域名。cookie绑定的域名，如果没有设置，自动绑定当前执行语句的的域。同一个域名下的二级域名也是不可以交换cookie的。
  • path：path是默认属性’/'，匹配web路由
• 跨域。跨域请求默认不使用凭证，如果在跨域请求中设置了cookie，axios会把cookie隐藏。

11.session

    session 是基于 cookie 的。在用户第一次使用 session 的时候（访问 jsp 页面会获取 session，所以一般访问 index.jsp 就算是第一次使用 session 了），服务器会为用户创建一个 session 域对象。使用 jsessionid 和这个对象关联，这个对象在整个用户会话期间使用。响应体增加 set-cookie:jsessionid=xxx 的项。用户下次以后的请求都会携带 jsessionid 这个参数，我们使用 request.getSession()的时候，就会使用 jsessionid 取出 session 对象。

12.cookie和session的区别

• 存储位置。Session数据保存在服务器端；Cookie数据保存在客户端浏览器。
• 存取方式。Session能保存任意数据类型；Cookie只能保存ASCII字符。
• 有效期。Session中的数据在会话结束或浏览器关闭时失效；Cookie中的数据可以长时间存在，除非设置过期时间。
• 数据安全性。由于Cookie数据保存在客户端，其安全性相对较差，容易受到篡改或被第三方分析利用；Session数据保存在服务器端，安全性相对较高。
• 存储大小。Cookie一般保存的数据大小不会超过4KB；Session理论上没有存储大小限制。
• 使用场景。由于Cookie安全性较低，不适合存储敏感信息，如登录凭证；Session适合存储敏感信息，如用户会话状态。

13.localStorage和sessionStorage和cookie的区别

    cookie、localStorage、sessionStorage是本地存储的方式有三种。

• 功能：localStorage存储长期数据；sessionStorage储存账号数据；cookie识别用户身份信息。
• 过期时间：localStorage永久存储、除非手动删除；sessionStorage浏览器关闭时自动删除；cookie浏览器关闭时自动删除，也可以设置过期时间。
• 内存大小：localStorage有5MB、sessionStorage有5MB、cookie4KB且最多存储20个cookie
• 属性：localStorage有Key和Value；sessionStorage有Key和Value；cookie有Name和Value和domain和path。
• 跨域：localStorage可以跨域存储和访问；sessionStorage不能跨域；cookie本身不支持跨域访问但是同一应用服务器内的不同应用或者二级域名间可以共享Cookie

15.webWorker

    WebWorker是h5中新增的WebAPI，用于启动一个独立的线程，主线程和分线程可以通过相互发送消息进行通信。当前端页面中有耗时很长的代码需要执行时，可以放在worker中执行，否则会卡塞主线程，影响用户体验。

• 复杂计算。当涉及到大量计算或复杂的数据处理时，可以将这些操作放在 Web Worker 中进行，避免阻塞主线程。例如，图像处理、音频处理、视频处理等。
• 后台下载。当需要下载大量数据时，可以使用 Web Worker 在后台进行数据的下载和处理，以避免阻塞用户界面。例如，从服务器获取大量数据并进行处理之后再展示给用户。
• 数据处理。当需要对大量数据进行处理或者排序时，可以使用 Web Worker 将处理逻辑放在后台线程中进行，提高处理的效率。
• 实时通信。可以使用 Web Worker 来处理实时通信的逻辑。在主线程可以与 Web Worker 进行通信，从而实现实时的数据交换。

    使用流程：

• 主线程：
  • 创建Web Worker实例：myWorker = new Worker(js脚本文件名，配置对象) 
  • 接收worker线程处理结果：myWorker.onmessage('数据')
  • 启动worker线程并向worker发送数据：myWorker.postMessage('数据')
• worker线程：
  • 接收主线程发送的任务：self.onmessage()
  • 将任务处理结果发送给主线程：self.postMessage()

16.webSocket

    webSocket是一种双工通信技术(俗称长链接)，可以实现服务器主动向客户端发送数据。适用于需要实时通信的网站, 比如人工客服服务、弹幕、大型文件下载时的进度条。webSocket有四种状态：open 开启服务,close关闭服务,message接收信息,error发生错误。

    webSocket使用流程：

• 建立连接：const socket = new WebSocket("ws://example.com/socketserver");
• 发送信息：socket.send(JSON.stringify(oj));
• 接收消息：socket.onmessage = function (event) {}
• 关闭链接：socket.close()
• 连接建立时触发：socket.onopen (event) {}
• 发生错误时触发：socket.onerror (event) {}
• 连接关闭时触发：socket.onclose (event) {}

    webSocket优势：

• 实时性：与传统的HTTP请求/响应模式不同，WebSocket允许实时双向通信，使得服务器能够主动向客户端推送数据，而不需要客户端发起请求。
• 更少的网络流量：WebSockets使用更少的网络流量，因为在连接建立后，客户端和服务器之间的通信只需要很少的开销。
• 更少的延迟：由于WebSocket允许实时通信，因此它可以大大减少通信的延迟时间。
• 更少的服务器压力：WebSocket连接保持打开状态，因此服务器不需要为每个请求创建一个新的连接。这可以减轻服务器的负载并提高性能。
• 更好的跨域支持：WebSocket具有更好的跨域支持，因为它使用标准的HTTP握手来建立连接，可以使用与HTTP相同的跨域策略。
• 可扩展性：WebSocket可以轻松扩展以支持大量并发连接，因为它使用单个TCP连接来处理多个并发请求。
• 省电：WebSocket可以通过减少网络流量和延迟来减少移动设备的能耗，因此它在移动设备上的使用非常适合。

17.如何优化网页打开速度

• 尽量减少页面资源的请求次数（可以通过base64图片、合并图片、合并js，css文件实现）。
• 对页面代码进行压缩（主要是js代码压缩）
• 合理地使用lazy()懒加载。
• 对比较重的任务使用web workor独立线程

18.HTTP、HTTPS、DNS、TCP协议

• DNS：域名系统协议。计算机无法识别域名，只能识别IP地址。域名系统就是一个将域名和IP地址相互映射的一个分布式数据库，能够使人更方便地访问互联网。域名系统分为四层：本地域名服务器<根域名服务器<顶级域名服务器<权限域名服务器，从本地域名服务器开始依次查找对应的IP地址。
• TCP：传输控制协议。是一种面向连接的、可靠的、基于字节流的传输层通信协议，提供可靠的通信服务。浏览器建立TCP链接之后，才可以向服务器发送http请求，每次进行通信之后就会断开链接。

  • TCP三次握手
    1） 客户端发送带有SYN标志为1、起始序seq号为随机数x的数据包到服务端 ，客户端进入SYN-SENT状态
    2）服务端发送带有SYN/ACK标志的数据包,其确认字段值ack=x+1,seq=y 包到客户端；服务端进入SYN-RECEIVED状态；客户端接收服务端的ACK包、进入ESTABLISH状态（连接建立完成）
    3）客户端发送带有ACK标志的数据包给服务端、其中ack=y+1；服务端进入ESTABLISHED状态（连接建立完成状态）

  • TCP四次挥手
    1）客户端发送一个FIN，用来关闭客户端到服务器端的数据传送；
    2）服务器收到FIN，它发回一个ACK，确认序号为收到的序号+1；和SYN一样，一个FIN将占用一个序号；
    3）服务器关闭与客户端的连接、发送一个FIN给客户端；
    4）客户端受到FIN，发送一个ACK包给服务端，并将序号设为收到序号+1；客户端关闭与服务端的连接。

• HTTP：超文本传输协议。是一个简单的请求-响应协议，它通常运行在TCP之上。它指定了客户端可能发送给服务器什么样的消息以及得到什么样的响应。
  • http只能进行单向通信。单向通信指的是请求只能由客户端发起，服务端只能对请求做出应答，服务端不能主动向客户端发送数据
  • http是无状态。无状态指的是在处理事务时没有记忆的能力，也就是说，我们向服务器发送http请求之后，会给我们发送数据过来，但是不会记录任何数据，后续想要使用这个数据，必须重新发送请求。
  • http是一个短链接。短链接指的是浏览器和服务器每进行一次 HTTP 操作，就需要建立一次连接，任务结束就中断连接。
• HTTPS：超文本传输安全协议。简单的说就是在http和tcp中间添加了一层安全协议ssl，就称为HTTPS超文本传输安全协议。因为在发送网络请求后，会有很多的服务器路由器的转发。传输过程中可能会被篡改信息，而如果使用HTTPS协议，在传输过程中被ssl或tsl安全协议保护，密钥在终端和终点站才可以访问，增加了通信的安全性。

19.http和https的区别

• 关系：HTTP协议通常承载于TCP协议之上，在HTTP和TCP之间添加一个安全协议层（SSL或TSL），这个时候，就成了我们常说的HTTPS。
• 端口号不同：HTTP的默认端口号为80，HTTPS的默认端口号为443。HTTP安全性较低，HTTPS安全性较高。
• 安全性不同：网络请求需要中间有很多的服务器路由器的转发。传输过程中可能会被篡改信息，而如果使用HTTPS协议，在传输过程中被ssl或tsl安全协议保护，密钥在终端和终点站才可以访问，所以https更加安全。

20.浏览器输入一个地址，敲下回车键

• 首先浏览器会根据域名，在DNS各级域名服务器(本地域名服务器>根域名服务器>顶级域名服务器>权限域名服务器)中查找对应的IP地址。
• 根据IP地址与服务器建立TCP链接(三次握手)
• 发送http请求。按照HTTP协议的规定，生成请求报文，浏览器将请求报文发送给服务器
• 解析html代码，生成dom树渲染页面。解析css，生成网页内容样式美化网页。解析javascript代码，生成元素动态交互。
• 断开链接(四次挥手)

21.什么是mvc和mvvm

• MVC:model数据-view视图-controller控制器。通过controller控制器协调model和view的交互
• MVVM:model数据-view视图-view视图-model数据，使用数据双向绑定，model和view直接进行交互。
• M(model)：对应组件的方法或生命周期函数中实现的业务逻辑和this.state中保存的本地数据
• V(View)：对应框架在浏览器中基于虚拟DOM生成的真实DOM以及我们书写的CSS
• V(view)-M(model)：对应组件中的JSX，它实质上是Virtual DOM的语法。

22.XSS攻击、CSRF攻击

• Xss(cross-site scripting 跨站脚本攻击) 指的是攻击者往页面中里插入恶意 html标签或者javascript代码。比如：攻击者在论坛中放一个看似安全的链接，骗取用户点击后，窃取cookie中的用户私密信息；或者攻击者在论坛中加一个恶意表单，当用户提交表单的时候，却把信息传送到攻击者的服务器中，而不是用户原本以为的信任站点。
  • 防范：首先代码里对用户输入的地方和变量都需要仔细检查长度和对<”,”>”,”;”,”’”等字符做过滤；其次任何内容写到页面之前都必须加以encode，避免不小心把html tag 弄出来。这一个层面做好，至少可以堵住超过一半的XSS 攻击。避免直接在cookie 中泄露用户隐私，例如email、密码等等。其次，通过使cookie 和系统ip 绑定来降低cookie 泄露后的危险。这样攻击者得到的cookie 没有实际价值，不可能拿来重放。如果网站不需要再浏览器端对cookie 进行操作，可以在Set-Cookie 末尾加上HttpOnly 来防止javascript 代码直接获取cookie。
• Cross—Site Request Forgery，跨域请求伪造。CSRF攻击攻击原理及过程如下：1. 用户C打开浏览器，访问受信任网站A，输入用户名和密码请求登录网站A；2.在用户信息通过验证后，网站A产生Cookie信息并返回给浏览器，此时用户登录网站A成功，可以正常发送请求到网站A；3. 用户未退出网站A之前，在同一浏览器中，打开一个TAB页访问网站B；4. 网站B接收到用户请求后，返回一些攻击性代码，并发出一个请求要求访问第三方站点A；5. 浏览器在接收到这些攻击性代码后，根据网站B的请求，在用户不知情的情况下携带Cookie信息，向网站A发出请求。网站A并不知道该请求其实是由B发起的，所以会根据用户C的Cookie信息以C的权限处理该请求，导致来自网站B的恶意代码被执行。
  • 防范：在服务端敏感接口中添加referer判断。