高级前端面试-浏览器

Tomarsh
119 阅读6分钟

浏览器

  1. 从地址栏输入地址到页面回显,都发生了什么 浏览器解析出地址；dns解析；建立tcp连接；浏览器发送数据，等待响应；服务器处理请求响应；渲染HTML

  2. 浏览器事件循环 浏览器中执行js是单线程，解析js脚本时，会一个宏任务到栈中，代码中会注册事件，同步代码执行完毕，过程中遇到的异步代码比如setTimeout,promise等会放到宏任务和微任务队列中，下一轮执行。当同步代码执行完后，出栈。执行微任务队列中所有任务，然后是宏任务，直到所有任务执行完。

  3. 说下jwt,知道jwt有哪些缺点吗 传统上，身份认证是使用cookie/session，用户发送用户名密码，服务器验证成功后生成session存储在某个地方，然后响应中返回cookie，之后客户端每次请求携带cookie。这种方式身份信息存储在后端，客户端只有sessionId，但是不便于扩展。

jwt是将身份信息存储在客户端的方式。客户端发送请求认证成功后，服务器生成token返回，之后客户端每次请求携带token。通常token是放在请求头的Authorization中发送。

token的格式是分为3部分，通过.分隔。第一部分是元信息，记录使用的算法等，第二部分是payload，记录身份信息；第三部分是签名，用于防止篡改。因为token不是加密的，所以不能携带私密信息。如果泄露了，就完蛋了。

参见: www.ruanyifeng.com/blog/2018/0… json_web_token-tutorial.html

4.了解requestAnimationFrame 和 requestIdleCallback吗 浏览器一般1秒刷新60次，如果使用setTimeout实现动画，难以保证调用时机。requestAnimationFrame专为此而生。requestAnimationFrame 接受一个回调函数，浏览器会在下次重绘前调用。当requestAnimationFrame 运行在后台标签或隐藏的iframe时会暂停执行。 requestIdleCallback让浏览器在空闲时间执行优先级较低的任务。

  1. 浏览器显示一个图片有什么方式 外链url；base64

  2. base64图片有什么问题 增加页面体积

  3. 如何获取url中？后的参数 全局变量location.search

  4. 浏览器白屏原因 代码报错

浏览器渲染

  1. 解释下重绘和回流 浏览器解析HTML生成dom树，解析css生成css树，dom树和css结合构建出render树。 回流：render树中元素因为尺寸，布局，隐藏等改变，需要重新构建 重绘：当更改元素不影响元素尺寸，布局，仅仅影响外观的渲染

  2. dom树和渲染树一一对应吗? 渲染树不包括head和隐藏元素

  3. css会阻塞dom解析吗 不会阻塞dom解析，两者是同时进行，会阻塞dom渲染

  4. 浏览器渲染原理，渲染过程

  5. 避免回流的方法 先隐藏元素，再进行修改 批量修改元素样式

  6. 关键渲染路径 处理 HTML 标记并构建 DOM 树。 处理 CSS 标记并构建 CSSOM 树。 将 DOM 与 CSSOM 合并成一个渲染树。 根据渲染树来布局（Layout），以计算每个节点的几何信息。 将各个节点绘制到屏幕上。 www.cnblogs.com/gavinjay/p/… blog.csdn.net/weixin_3431…

浏览器缓存

  1. 浏览器缓存(http缓存),如何实现 浏览器缓存分强制缓存和协商缓存，强制缓存由expires和cache-control两个字段控制；协商缓存由if-modified-since/last-modified, if-none-match/etag控制。 浏览器第一次发送请求，浏览器会将缓存标识和结果一并返回。浏览器会根据缓存标识缓存结果。当再次发送请求，先去缓存中取，缓存生效则结束。缓存失效，会向服务器发送请求，请求头中携带结果的缓存标识比如(if-none-match或者if-modified-since)，服务器判断后允许使用协商缓存则返回304，否则返回响应数据响应200

字段头： expires和Cache-control都是响应头中控制网页缓存的， expires是http1.0时的头， Cache-Control是http1.1中的规则 参见：juejin.cn/post/684490…

  1. 什么文件用强制缓存，什么文件用协商缓存 静态文件强制缓存

  2. http强缓存和协商缓存用的是什么字段，整体流程怎样 强制缓存使用cache-control字段;expires 协商缓存使用if-none-match/etag; 旧的使用if-modified-since/last-modified

  3. 协商缓存和强制缓存的区别 发请求与不发请求

同源策略、跨域

  1. 说下跨域 协议主机端口都相同则同源 浏览器的同源策略导致了跨域问题，同源策略限制了从一个源加载的脚本、文档和另一个源进行交互。主要为了防止csrf和不同网址脚本获取dom元素。 限制dom操作，限制读取cookie，localstorage，indexDB；限制xhr

解决跨域：cors cors请求分为简单请求和非简单请求 非简单请求是：请求方法是put、delete等或content-type是application/json。非简单请求发送前，浏览器会自动发送预检请求，只有通过后，才会发送非简单请求。

简单请求浏览器会在请求头中加上origin参数，服务端会返回Access-Control-Allow-xxx头部

跨域cookie的处理： 服务器返回的响应头部设置Access-Control-Allow-Credentials为true, 客户端xhr请求上设置xhr.withCredentials = true;

参见： www.ruanyifeng.com/blog/2016/0… segmentfault.com/a/119000001…

  1. 如何解决跨域 cors；jsonp

  2. cookie的保护方式

  3. jsonp的原理 利用的是script标签的src可以跨域

  4. 什么是简单请求，什么是复杂请求 简单请求必须满足两个条件：请求方法是get或post，content-type是urlencoded或form-data； 非简单请求是不满足一个条件的。非简单请求前浏览器会自动发送预检请求

事件

  1. 绑定事件有多少种方式 dom元素直接绑定；addEventListener

  2. 事件触发的流程，捕获和冒泡 事件先从外向内捕获，到达目标元素再由内向外冒泡 blog.csdn.net/ywl57071758…

  3. 捕获阶段能终止吗 stopPropagation

  4. 终止冒泡阶段有哪些 event.stopPropagation; event.cancleBubble=true

  5. 事件委托的原理 冒泡到父元素，父元素可以判断，针对不同子元素进行操作

  6. 如何实现one绑定事件

  7. event.target和event.currentTarget的区别 target触发事件的元素；currentTarget当前监听器的元素

更多面试题： mp.weixin.qq.com/s?__biz=MzU…

mp.weixin.qq.com/s?__biz=MzU…

avatar
文章
阅读
粉丝