【面试】前端面试之浏览器篇

一颗甜橙树

已于 2022-03-02 11:51:23 修改

阅读量596

点赞数

分类专栏：前端面试文章标签：前端面试 javascript

于 2020-11-23 22:59:37 首次发布

本文链接：https://blog.csdn.net/kikikiuu/article/details/110010152

版权

前端面试专栏收录该内容

13 篇文章 0 订阅

订阅专栏

文章目录

- Window对象篇

Window对象篇

1.事件捕获、事件冒泡和事件委托？

https://www.cnblogs.com/Chen-XiaoJun/p/6210987.html

2.localstorage、 sessionstorage、和cookie的区别是什么？

在这里插入图片描述
Cookie

Cookie 是小甜饼的意思。顾名思义，cookie 确实非常小，它的大小限制为4KB左右。它的主要用途有保存登录信息，比如你登录某个网站市场可以看到“记住密码”，这通常就是通过在 Cookie 中存入一段辨别用户身份的数据来实现的。
应有场景：①判断用户是否登陆过网站，以便下次登录时能够实现自动登录（记住密码），如果我们删除cookie，则每次登录必须重新填写登录的相关信息
②保存上次登录的时间等信息
③保存上次查看的页面
④浏览计数
localStorage

localStorage生命周期是永久的，除非被清除，否则永久保存，而sessionStorage仅在当前会话下有效，关闭页面或浏览器后被清除

localStorage 与 HTTP 没有任何关系，所以在HTTP请求时不会带上 localStorage 的值
只有相同域名的页面才能互相读取 localStorage，同源策略与 cookie 一致
不同的浏览器，对每个域名 localStorage 的最大存储量的规定不一样，超出存储量会被拒绝。最大存5M 超过5M的数据就会丢失。而
Chrome 10MB 左右
常用来记录一些不敏感的信息
localStorage 理论上永久有效，除非用户清理缓存

sessionStorage

sessionStorage 的有效期是页面会话持续，如果页面会话（session）结束（关闭窗口或标签页），sessionStorage 就会消失。而 localStorage 则会一直存在。

共同点：都是保存在浏览器端，且同源的。
区别：cookie数据始终在同源的http请求中携带（即使不需要），即cookie在浏览器和服务器间来回传递。
而sessionStorage和localStorage不会自动把数据发给服务器，仅在本地保存。
cookie数据还有路径（path）的概念，可以限制cookie只属于某个路径下。
存储大小限制也不同，cookie数据不能超过4k，同时因为每次http请求都会携带cookie，所以cookie只适合保存很小的数据，如会话标识。
sessionStorage和localStorage 虽然也有存储大小的限制，但比cookie大得多，可以达到5M或更大。
数据有效期不同 ，sessionStorage：仅在当前浏览器窗口关闭前有效，自然也就不可能持久保持；localStorage：始终有效，窗口或浏览器关闭也一直保存，因此用作持久数据；cookie只在设置的cookie过期时间之前一直有效，即使窗口或浏览器关闭。
作用域不同，sessionStorage不在不同的浏览器窗口中共享，即使是同一个页面；localStorage 在所有同源窗口中都是共享的；cookie也是在所有同源窗口中都是共享的。

3.常见的http状态码有哪些，分别代表什么？

200 - 请求成功
301 - 资源（网页等）被永久转移到其它URL
400 Bad Request 客户端请求的语法错误，服务器无法理解
401 Unauthorized 请求要求用户的身份认证
403 Forbidden 服务器理解请求客户端的请求，但是拒绝执行此请求
404 - 请求的资源（网页等）不存在
500 - 内部服务器错误

4.get和post的区别是什么？

区别名称	get	post
浏览器回退	无害	再次发送请求
url是否可被bookmark	可以	不可以
url是否可被浏览器主动cache	可以	不可以,除非手动设置
编码方式	url编码	多种编码方式
请求参数是否被保留在浏览器历史记录中	是	否
请求参数长度,传递方式,数据类型	有长度限制，通过url传递，只接受ASCII字符	无长度限制，传递通过request body，没有限制数据类型
安全程度	相对不安全，因为参数直接暴露在url上，所以不能用来传递敏感信息	相对安全

GET在浏览器回退时是无害的，而POST会再次提交请求。
GET产生的URL地址可以被Bookmark（被收藏为书签），而POST不可以。
GET请求会被浏览器主动cache（保留在历史记录当中），而POST不会，除非手动设置。
GET请求只能进行url编码，而POST支持多种编码方式。
GET请求参数会被完整保留在浏览器历史记录里，而POST中的参数不会被保留。
GET比POST更不安全，因为参数直接暴露在URL上，所以不能用来传递敏感信息。
GET请求在URL中传送的参数是有长度限制的，而POST没有。
GET参数通过URL传递，POST放在Request body中。
对参数的数据类型，GET只接受ASCII字符，而POST没有限制。

https://blog.csdn.net/c_Janz/article/details/81275165

5.工作中如何处理跨域问题？

https://www.cnblogs.com/smallbean/p/4493237.html
什么是跨域？
浏览器采用同源策略保证数据的安全、协议、域名、端口号一致，则表示同源。
当浏览器和其他服务器交流的时候，就是跨域。
在发送数据的时候要经过服务器的审批，保证没有敏感的数据。
一、cors跨域
服务端对于cors的支持，主要是通过设置Access-Control-Allow-Origin来进行的，如果浏览器检测到相应的设置，就可以允许ajax进行跨域的访问。

项目中有时会使用JWT配合cors跨域实现身份验证，登录后拿到服务端生成的令牌，用户发起的请求头中需携带令牌，这样就解决了请求跨域和多端身份验证问题。（但是token令牌也有一些缺点，如，可能会被xss攻击截获，无法主动控制让token过期等，技术选型方案后续讨论。）

在服务端设置Access-Control-Allow-Origin，标识允许哪个域的请求。

响应头具体配置：
//指定允许其他域名访问
'Access-Control-Allow-Origin:http://172.20.0.206'//一般用法（*，指定域，动态设置），3是因为*不允许携带认证头和cookies
//是否允许后续请求携带认证信息（cookies）,该值只能是true,否则不返回
'Access-Control-Allow-Credentials:true'
//预检结果缓存时间
'Access-Control-Max-Age: 1800'
//允许的请求类型
'Access-Control-Allow-Methods:GET,POST,PUT,POST'
//允许的请求头字段
'Access-Control-Allow-Headers:x-requested-with,content-type'

哪些是简单请求：

请求方式是：head，get，post
请求头允许的字段：Accept，Accept-Language，Content-Language，Last-Event-ID
Content-Type：application/x-www-form-urlencoded、multipart/form-data、text/plain 三选一

二、修改document.domain来跨子域
通过修改document.domain来跨子域，将子域和主域的document.domain设为同一个主域，前提条件：这两个域名必须属于同一个基础域名，而且所用的协议、端口都要一直，否则无法利用document.domain进行跨域
主域相同的使用document.domain
三、jsonp
原理是：动态插入script标签，通过script标签引入一个js文件，这个js文件载入成功后会执行我们在url参数当中指定的函数，并且会把我们需要的json数据作为参数传入。（注意：需要服务端.支持JSONP请求）
由于同源策略的限制，XmlHttpRequest只允许请求当前源（域名、协议、端口）的资源，为了实现跨域请求，可以通过script标签实现跨域请求，然后在服务端输出json数据，并且执行回调函数，从而解决了跨域的数据请求。
优点：兼容性好，简单易用，支持浏览器与服务器双向通信，
缺点是只支持get请求。
举个栗子：

<script type="text/javascript">
    function dosomething(jsondata){
        //处理获得的json数据
    }
</script>

四、window.name
window对象有个name属性，该属性有个特征：即在一个窗口（window）的生命周期内，窗口载入的所有的页面都是共享一个window.name的，每个页面对window.name都有读写的权限，window.name是持久存在一个窗口载入过的所有页面当中的。

使用HTML5新引进的window.postMessage方法来跨域传送数据
还有flash、在服务器上设置代理页面等跨域方式。个人认为window.name的方法既不复杂，也能兼容到几乎所有的浏览器，这是一个极好的跨域方式。

6.浏览器内核有哪些？

Trident-IE
Gecko–Firefox
presto内核（Opera前内核）（已废弃）
Webkit-Safari内核，Chrome内核原型

7.页面从输入路径到浏览器渲染发生了什么？

1.在浏览器输入url
2.浏览器先查看浏览器缓存–系统缓存–路由器缓存，如果缓存中存在页面的内容，就会直接在屏幕当中显示
3.在发送http请求前，浏览器会开启一个线程来解析域名（DNS解析）,获取相应的IP地址
4.浏览器向服务器发起TCP连接，与服务器通过TCP三次握手建立连接
5.握手成功后，浏览器再向服务器发起http/https请求，请求数据包
6.服务器处理收到的请求，将数据返回给浏览器
7.浏览器收到http响应
8.解析html，构建dom树
9.解析css，生成css规则树
10.合并dom树和css规则树，生成render树
11.布局render树
12.绘制render树，即绘制页面像素信息
13.GPU将各层合成，结果呈现在浏览器的窗口当中

（简单记忆：dns – tcp --http请求–服务器响应–渲染）

8.强缓存和协商缓存？

强缓存：（本地缓存）强缓存是利用http头中的Expires和Cache-Control两个字段来控制的，用来表示资源的缓存时间。强缓存中，普通刷新会忽略它，但不会清除它，需要强制刷新。浏览器强制刷新，请求会带上Cache-Control:no-cache和Pragma:no-cache
协商缓存：（弱缓存）协商缓存就是由服务器来确定缓存资源是否可用，所以客户端与服务器端要通过某种标识来进行通信，从而让服务器判断请求资源是否可以缓存访问。

普通刷新会启用弱缓存，忽略强缓存。只有在地址栏或收藏夹输入网址、通过链接引用资源等情况下，浏览器才会启用强缓存