2020 web前端面试题及答案大全 (5)

事件冒泡: 最后从目标节点往顶层元素传递, 通常函数在此阶段执行.
addEventListener第三个参数默认false(冒泡阶段执行),true(捕获阶段执行).
阻止冒泡见以上方法

7.什么是跨域?为什么浏览器要使用同源策略?你有几种方式可以解决跨域问题?了解预检请求嘛?

跨域是指一个域下的文档或脚本试图去请求另一个域下的资源

防止XSS、CSFR等攻击, 协议+域名+端口不同

jsonp; 跨域资源共享(CORS)(Access control); 服务器正向代理等

2020 web前端面试题及答案大全

预检请求: 需预检的请求要求必须首先使用 OPTIONS 方法发起一个预检请求到服务器,以获知服务器是否允许该实际请求。"预检请求“的使用,可以避免跨域请求对服务器的用户数据产生未预期的影响

8.了解浏览器缓存机制吗?

浏览器缓存就是把一个已经请求过的资源拷贝一份存储起来,当下次需要该资源时,浏览器会根据缓存机制决定直接使用缓存资源还是再次向服务器发送请求.

from memory cache ; from disk cache

作用: 减少网络传输的损耗以及降低服务器压力。

优先级: 强制缓存 > 协商缓存; cache-control > Expires > Etag > Last-modified

9.为什么操作 DOM 慢?

DOM本身是一个js对象, 操作这个对象本身不慢, 但是操作后触发了浏览器的行为, 如repaint和reflow等浏览器行为, 使其变慢

10.什么情况会阻塞渲染?

js脚本同步执行

css和图片虽然是异步加载, 但js文件执行需依赖css, 所以css也会阻塞渲染

11.如何判断js运行在浏览器中还是node中?

判断有无全局对象global和window

12.关于web以及浏览器处理预加载有哪些思考?

图片等静态资源在使用之前就提前请求
资源使用到的时候能从缓存中加载, 提升用户体验
页面展示的依赖关系维护

13.http多路复用

Keep-Alive: Keep-Alive解决的核心问题:一定时间内,同一域名多次请求数据,只建立一次HTTP请求,其他请求可复用每一次建立的连接通道,以达到提高请求效率的问题。这里面所说的一定时间是可以配置的,不管你用的是Apache还是nginx。

解决两个问题: 串行文件传输(采用二进制数据帧); 连接数过多(采用流, 并行传输)

14. http和https:

http: 最广泛网络协议,BS模型,浏览器高效。

https: 安全版,通过SSL加密,加密传输,身份认证,密钥

https相对于http加入了ssl层, 加密传输, 身份认证;

需要到ca申请收费的证书;

安全但是耗时多,缓存不是很好;

注意兼容http和https;

连接方式不同, 端口号也不同, http是80, https是443

15. CSRF和XSS区别及防御

16. cookie可设置哪些属性?httponly?

chrome控制台的application下可查看:

2020 web前端面试题及答案大全

name  字段为一个cookie的名称。

value  字段为一个cookie的值。

domain  字段为可以访问此cookie的域名。

path  字段为可以访问此cookie的页面路径。比如domain是abc.com,path是/test,那么只有/test路径下的页面可以读取此cookie。

expires/Max-Age   字段为此cookie超时时间。若设置其值为一个时间,那么当到达此时间后,此cookie失效。不设置的话默认值是Session,意思是cookie会和session一起失效。当浏览器关闭(不是浏览器标签页,而是整个浏览器) 后,此cookie失效。

Size  字段 此cookie大小。

http  字段 cookie的httponly属性。若此属性为true,则只有在http请求头中会带有此cookie的信息,而不能通过document.cookie来访问此cookie。

secure   字段 设置是否只能通过https来传递此条cookie

17. 登录后,前端做了哪些工作,如何得知已登录

前端存放服务端下发的cookie, 简单说就是写一个字段在cookie中表明已登录, 并设置失效日期

或使用后端返回的token, 每次ajax请求将token携带在请求头中, 这也是防范csrf的手段之一

18. http状态码

1**: 服务器收到请求, 需请求者进一步操作

2**: 请求成功

3**: 重定向, 资源被转移到其他URL了

4**: 客户端错误, 请求语法错误或没有找到相应资源

5**: 服务端错误, server error

301: 资源(网页等)被永久转移到其他URL, 返回值中包含新的URL, 浏览器会自动定向到新URL

302: 临时转移. 客户端应访问原有URL

304: Not Modified. 指定日期后未修改, 不返回资源

403: 服务器拒绝执行请求

404: 请求的资源(网页等)不存在

500: 内部服务器错误

19. # Http请求头缓存设置方法

Cache-control, expire, last-modify

20. 实现页面回退刷新

旧: window.history.back() + window.location.href=document.referrer;

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/zwwfxg.html