浏览器基础知识点

浏览器基础知识点及常考面试题 来自掘金小册

浏览器的一些基础知识点，包括：事件机制、跨域、存储相关，这几个知识点也是面试经常会考到的内容。

事件机制

Q1.事件的触发过程是怎么样的？知道什么是事件代理吗？

事件触发三阶段：

• window往事件触发处传播，遇到注册的捕获事件会触发
• 传播到事件触发处时触发注册的事件
• 从事件触发处往window传播，遇到注册的冒泡事件会触发

事件触发一般会按照上面顺序执行，但也有特例，如果给一个body的子节点同时注册冒泡和捕获事件，事件触发会按照注册的顺序执行。

1
2
3
4
5
6
7
8
9
10
11
12
13
//以下会先打印冒泡然后是捕获
node.addEventListener(
'click',event =>{
    console.log('冒泡')
}，
false
)
node.addEventListener(
'click',event=>{
    console.log('捕获')
}，
true
)

注册事件

通常我们使用addEventListener注册事件，该函数的第三个参数可以是布尔值，也可以是对象。对于布尔值useCapture参数来说，该参数默认为false,useCapture决定了注册的事件是捕获还是冒泡事件。即如上所示，false则为冒泡事件，true则为捕获事件。对于对象参数来说，可以使用以下几个属性：

• capture:布尔值，和useCapture作用一样
• once:布尔值，值为true表示该回调只会调用一次，调用后移除监听
• passive:布尔值，表示永远不会调用preventDefault

一般来说，如果我们只希望事件只触发在目标上，这时候可以使用stopPropagation来阻止事件的进一步传播。通常我们认为stopPropagation是用来组织事件冒泡的，其实该函数也可以阻止捕获事件。stopImmediatePropagation同样也能实现阻止事件，但是还能阻止该事件目标执行别等注册事件。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
node.addEventListener(
'click',event =>{
	event.stopImmediatePropagation()
    console.log('冒泡')
}，
false
)
// 点击node只会执行上面的函数，该函数不会执行
node.addEventListener(
'click',event=>{
    console.log('捕获')
}，
true
)

补充介绍

事件冒泡和事件捕获实际上是定义具有父子关系的元素上注册事件调用的先后顺序。

事件冒泡：从子元素事件逐级触发到父元素。

事件捕获：父元素有捕获其子元素事件发生的能力，并在这个事件发生之前作出反应。

哪些事件不支持冒泡事件：

鼠标事件：mouserleave mouseenter 焦点事件：blur focus UI事件：scroll resize

事件代理

如果一个节点中的子节点是动态生成的，那么子节点上需要注册事件的话应该注册在父节点上

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<ul id="ul">
	<li>1</li>
    <li>2</li>
	<li>3</li>
	<li>4</li>
	<li>5</li>
</ul>
<script>
	let ul = document.querySelector('#ul')
	ul.addEventListener('click', (event) => {
		// 通过event.target 知道是父节点下的哪一个子节点被触发
		console.log(event.target);
	})
</script>

简单说事件代理就是在一个元素上代理其下一系列子元素的事件。优点是：

• 节省内存
• 不需要给子节点注销事件

跨域

Q2.什么是跨域？为什么浏览器要使用同源策略？你有哪几种方式可以解决跨域问题？

因为浏览器处于安全考虑，有同源策略。即协议、域名或端口有一个不同就是跨域。Ajax请求会失败。

引入这种机制的原因，主要是用来防止CSRF攻击。CSRF攻击就是利用用户的登录状态发起恶意请求。

没有同源策略的情况下，A网站可以被任意其他来源的Ajax访问到内容。如果A网站还存在登录态，那么对方可以通过Ajax获得你的任何信息。当然跨域不能完全阻止CSRF。

那么请求跨域了，请求到底发出去了吗？请求必然是发出去了，但是浏览器拦截了响应。你可能会疑问明明通过表单的方式可以发起跨域请求，为什么Ajax就不会。因为跨域是为了阻止用户读取到另一个域名下的内容，Ajax可以获取相应，浏览器认为这不安全，所以拦截了响应。但是表单并不会获取新的内容，所以可以发起跨域请求。

JSONP

JSONP的原理就是利用

1
2
3
4
5
6
<script src="http://domain/api?param1=a&param2=b&callback=jsonp"></script>
<script>
	function jsonp(data){
        console.log(data)
	}
</script>

JSONP使用简单且兼容性不错，但只限于get请求。

在开发中可能会遇到多个 JSONP 请求的回调函数名是相同的，这时候就需要自己封装一个 JSONP，以下是简单实现：

1
2
3
4
5
6
7
8
9
10
11
12
13
function jsonp(url,jsonpCallback,success){
    let script = document.createElement('script');
    script.src=url;
    script.async =true;
    script.type='text/javascript'
    window[jsonpCallback]=function(data){
        success && success(data)
    }
    document.body.appendChild(script)
}
jsonp('http://xxx','callback',function(value){
    console.log(value)
})

CORS

CORS需要浏览器和后端同时支持。IE 8 和9需要通过XDomainRequest来实现。

浏览器会自动进行 CORS 通信，实现 CORS 通信的关键是后端。只要后端实现了 CORS，就实现了跨域。

服务端设置Access-Control-Allow-Origin就可以开启CORS。该属性表示哪些郁闷可以访问资源，如果设置通配符则表示所有网站都可以访问资源。

虽然设置 CORS 和前端没什么关系，但是通过这种方式解决跨域问题的话，会在发送请求时出现两种情况，分别为简单请求和复杂请求。

简单请求：

以 Ajax 为例，当满足以下条件时，会触发简单请求：

方法：GET 、POST 、HEAD;

Content-Type 的值仅限于下列三者之一：text/plain multipart/form-data application/x-www-form-urlencoded

请求中的任意 XMLHttpRequestUpload 对象均没有注册任何事件监听器； XMLHttpRequestUpload对象可以使用 XMLHttpRequest.upload 属性访问。

复杂请求:

不符合以上，即为复杂请求。复杂请求会先发起一个预检请求，该请求是option方法的，通过该请求来知道服务端是否允许跨域请求。

对于预检请求来说，如果你使用过 Node 来设置 CORS 的话，可能会遇到过这么一个坑。

以下以 express 框架举例：

1
2
3
4
5
6
7
8
9
app.use((req, res, next) => {
  res.header('Access-Control-Allow-Origin', '*')
  res.header('Access-Control-Allow-Methods', 'PUT, GET, POST, DELETE, OPTIONS')
  res.header(
    'Access-Control-Allow-Headers',
    'Origin, X-Requested-With, Content-Type, Accept, Authorization, Access-Control-Allow-Credentials'
  )
  next()
})

该请求会验证你的 Authorization 字段，没有的话就会报错。

当前端发起了复杂请求后，你会发现就算你代码是正确的，返回结果也永远是报错的。因为预检请求也会进入回调中，也会触发 next 方法，因为预检请求并不包含 Authorization 字段，所以服务端会报错。

想解决这个问题很简单，只需要在回调中过滤 option 方法即可

1
2
3
res.statusCode = 204
res.setHeader('Content-Length', '0')
res.end()

document.domain：

该方式只能用于二级域名相同的情况下，比如：a.test.com 和b.test.com 适用于该方式。

只需要给页面添加 document.domain = 'test.com' 表示二级域名都相同就可以实现跨域

存储

Q3.有几种方式可以实现存储功能，分别有什么优缺点?什么是service worker?

Cookie,localStorage,sessionStorage,indexDB

cookie已经不建议存储，可以使用localStorage 和sessionStorage。对于不怎么改变的数据尽量使用localStorage来存储。

对于 cookie 来说，我们还需要注意安全性。

Service Worker

Service Worker是运行在浏览器背后的独立线程，一般可以用来实现缓存功能。使用Service Worker 的话，传输协议必须为https。因为Service Worker中涉及到请求拦截，所以必须是要HTTPS协议来保障安全。

Service Worker实现缓存功能三步骤：（1）注册Service Worker (2)监听install 事件以后就可以缓存需要的文件（3）下次用户访问时候可以拦截请求的方式查询是否存在缓存，存在就可以直接读取缓存文件，否则就去请求数据。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
// index.js
if (navigator.serviceWorker) {
  navigator.serviceWorker
    .register('sw.js')
    .then(function(registration) {
      console.log('service worker 注册成功')
    })
    .catch(function(err) {
      console.log('servcie worker 注册失败')
    })
}
// sw.js
// 监听 `install` 事件，回调中缓存所需文件
self.addEventListener('install', e => {
  e.waitUntil(
    caches.open('my-cache').then(function(cache) {
      return cache.addAll(['./index.html', './index.js'])
    })
  )
})

// 拦截所有请求事件
// 如果缓存中已经有请求的数据就直接用缓存，否则去请求数据
self.addEventListener('fetch', e => {
  e.respondWith(
    caches.match(e.request).then(function(response) {
      if (response) {
        return response
      }
      console.log('fetch source')
    })
  )
})

打开页面，可以在开发者工具中的 Application 看到 Service Worker 已经启动了。

• Previous
  web单页面应用
• Next
  浏览器缓存机制