Bang

Appearance

2023-02-15   

浏览器和网络 ​

浏览器的进程有哪些，分别作用 ​

浏览器的线程 ​

输入一个 url，浏览器如何处理解析 ​

js 引擎的执行，如何和各个线程配合 ​

什么请求会携带 cookies ​

任何请求都会携带 cookies，最终能不能携带 cookies 还需要多步过滤。

cookies 如何携带，如何设置。 ​

携带当前请求的父域名和父路径上的 cookies，设置域名也是只能设置到当前请求的父域名路径

跨域场景的 cookies 是如何设置和携带的 ​

跨域和携带 cookies 不冲突，cookies 是只看目的不看来源，对于 xhr 和 fetch 的请求，总是需要手动的设置的是否在请求中包含 cookies。对于其他的比如标签，链接或者 link 等不考虑跨域。

什么是跨站，samesite 是什么 ​

只有两个请求的顶级有效域名 + 1 相同，既是同站。samesite 有 lax、strict 和 none。老版本中 samesite 默认值是 none, 意味着 cookies 的携带不看来源，目前各大浏览器统一设置为 lax, 对于跨站的请求只允许 a 标签、预加载和 get 表单能携带 cookies。

浏览器的缓存有些那些 ​

no-store 和 no-cache ​

webpack 中的缓存如何配置 ​

put、post、get 区别，浏览器常见的状态码 ​

跨域的几种方法和原理 ​

xss 和 crsf 攻击是啥，如何防范 ​

postmessage 如何实现，讲述一下为什么能实现跨域。 ​

js
// 创建并获取其他窗口的引用
const iframe = document.createElement('IFRAME')
insertIframe(iframe)
iframe.addEventListener('load', () => {
  iframe.contentWindow.postMessage('some message', '/')
})

// iframe中
document.addEventListener('message', (message) => {
  if (message.origin === 'https://www.baidu.com') {
    console.log(message.data)
  }

  window.parent.postMessage('iframe message')
})

所有的跨域都基于信任链，子 iframe 手动添加了对父 origin 的信任，父 origin 也手动添加了对子的信任。

还有基于 window.domain 的跨域，在两个页面是同站但是跨域的场景，手动将的两个站点的 window.domain 设置为相同即可在两个页面分别直接获取 window 对象

access-control-allow 流程。 ​

  1. 判断当前请求是简单请求还是复杂请求，如果是简单请求直接请求，后端在响应中携带 access-control-allow: * 对应的域，浏览器检查响应中是否有该字段并且能和当前的域匹配，响应才会被正确的解析。如果是复杂请求，浏览器先发送一个 option 请求， 不携带请求体，询问是否同意跨域，如果同意再发送简单请求。

简单请求和复杂请求 ​

简单请求需要满足 request method: option, get, post ，request header: accept accept-language 。content-language 和 content-type 是 x-www-form-urlencode 和 mutilpart/formdata 以及 text/plain，注意不包括我们平常用的 json。 其余的都是复杂请求。

对于所有的跨域，请求中总是会携带当前域的信息通过 origin 协议 host 和端口 其中简单请求服务端响应的有: access-control-allow-origin: *（表示所有，但是不会携带 cookies，即使设置了携带） ，对于开发环境，建议是正向代理总是将 Origin，除了浏览器其他平台没有跨域问题 access-control-allow-credentials: 下次请求是否允许发送的 cookie（要携带 cookies， 两个条件缺一不可）

对于复杂请求，还会添加 max-age: 表示多少时间内不需要再次预请求。 allow-method: 允许的请求的方法 allow-headers: *(除了 authoritie 需要手动指定外，如果一定要手动指定，一定记得添加 content-type 这样就能允许所有的 content-type 类型)

从浏览器上做优化有哪些(seo，多域名，) ​

获取其他页面的 window，获取 iframe 的 window， iframe 获取上级 windows ​

iframe 如何创建最优，iframe 对主页面的影响 ​

前端需要理解的 SEO ​

html 相关 ​

meta 中的 viewport 用法 ​

input 中的 type=hidden 的意义 ​

字体图标的原理 ​

css 相关 ​

BFC 是啥，触发 BFC 的条件 5 点 ​

  1. BFC 外的浮动元素不会和 BFC 区域重叠
  2. BFC 高度会计算浮动元素
  3. BFC 不会和另一个 BFC 出现 margin 重叠
  4. BFC 中的上下边距会重叠，取最大的那个

line-height: 2 和 line-height: 200%的区别 ​

实现文本溢出省略号 ​

单词超出换行如何实现，white-space, word-break ,overflow-wrap ​

white-space 用于控制换行符，空格和行框盒子的生成, wrap 允许行框盒子 pre 允许换行符和空格 line 不予许空格

word-break 控制单词是否要换行 normal: CJK 字体换行，非 CJK 在空格地方换行，而且如果剩余空间不能转载下，会提前换行 break-all: CJK（两个标点符号之间）换行，非 CJK 在任意地方换行，不会提前换行 keep-all: CJK 不换行，非 CJK 也不换行

overflow-wrap 控制的是一个单词在盒子转不下时是否换行。只有 normal 和 break-word 两个属性，一个是换行一个是不换行

flex 各个属性，flex 实现居中, 如何平分剩余空间等 ​

重绘和回流是什么 ​

渲染层，合成层和图形层是啥 ​

animation 和 transition ​

几个像素和 viewport 的关系 ​

物理像素，指的是一个设备屏幕有多少个物理点，比如 pc 是 1080 _ 1920 表示横向有 1920 个像素（系统本身不缩放的情况下）。有些设备屏幕是高清屏，用了多个物理像素来展示一个逻辑像素，称为像素比 DPR，设备的 DPR 是固定的，比如苹果某些是 2，有些设备是 3。莫、默认情况下 1 css px = 1 物理像素 _ DPR（也就是所谓的设备像素，后文中 device-width），但是又出现了缩放的场景， 这个时候 1 css px = 1 物理像素 _ DPR _ 2。

layoutview， 浏览器默认的窗口的大小，980px（css 像素），如果不手动指定视图大小，浏览器会按照这个展示 visual view 可视窗口，总是理想窗口 / 缩放 ideal view 理想窗口，总是和设备像素相同

在移动端中，大部分设备的 DPR 是固定的，设备像素也是固定的。但是在 pc 端因为 2k 和 4k 屏的出现，可以动态的调整 DPR 值，所以现在 pc 端也需要注意高清屏的问题

我们在 css 中接触的总是 css 像素。下面举一个例子子来加强理解 设置 <meat name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1, minimum-scale=1"> 如果上面的设备的 DPR 是 2，物理像素是 750，设备像素就是 375， 这个时候 1css 像素就是 1 物理像素 _ DPR _ scale(1)就是 1 设备像素

再考虑视图的问题，上面因为同时设置了 width 和 scale，按照谁大取谁的方式，刚好 device-width 和 initial-scale 相同，所以 layoutview 是 375px，如果页面中有元素设置 500px，就会出现滚动条。可视区域的大小总是设备像素 375px;换算成 css 就是 375

将 scale = 2，这个时候因为 width 还是 375，但是 initial-scale * ideal view = 750 大于 375，所以最终的 layoutview 是 750px。可视区域也变成了 375 / 2，所以滚动条会有 1 / 4

1px 解决 ​

设计稿是 750px, 750px 中除了一个 1px 的，映射到实机就是 0.5px，css 不支持 0.5px 设置，有两种推荐的方案，第一个是通过 transform: scale()来缩放。第二个是直接不用设备独立像素，把手机的像素扩展到最大，比如 750px 的设计稿，直接将取消缩放，让界面也是 750px 宽，在这个基础上再做 rem 等比的缩放。推荐第二种。

层叠上下文 ​

媒体查询 ​

全屏滚动和视差滚动 ​

js 基础 ​

执行上下文是啥，三大上下文类型，上下文的三大要素 ​

词法作用域和语法作用域，为什么 js 是词法作用域 ​

this 的绑定规则，bind 后还能修改 this 吗（使用 call 修改） ​

箭头函数中的上下文深入理解，实现一个调整箭头函数 this 绑定的函数 ​

作用域链是什么 ​

原型链是什么 ​

如何实现继承，继承的几种方式对比 ​

class 继承和原型继承的区别 ​

几个原型相关的对象 API ​

原型中的属性代理如何实现的 ​

实现一个 instanceof, 简单描述 typeof 和 Object.prototype.toString.call() ​

es6 ​

迭代器和可迭代对象 ​

Reflect ​

将原子操作函数化，比如 obj.a 改写成 Reflect.get(obj, 'a'), delete obj.a Reflect.deleteProperty(obj, 'a')等

Proxy ​

代理对象

对象 ​

几个有关原型的方法 ​

属性控制器 ​

可迭代对象的总结，如何快速转换成数组等。 ​

判断变量类型的的方法 ​

vue ​

完整的描述一次 vue 的流程 ​

watch、compouted，以及 watcher ​

响应式建立过程，两个 Dep 的原理 ​

$set 和 array.push 的原理 ​

keep-alive 原理 ​

异步组件的原理 ​

手动派发更新的流程 ​

vue 对象如何转换成 vnode ​

异步队列和 nexttick 原理 ​

数据请求在 created 和 mounted 的区别 ​

vue prop 原理 ​

vue 事件原理 ​

patch 全流程 ​

diff ​

typescript ​

类型兼容、结构类型和层级类型 ​

ts 几个经典的体操类型 ​

vue3 ​

JSON SCHEMA ​

json schema 所有属性 ​

json schema 解析流程 ​

组件编排设计 ​

手写代码 ​

call, apply, bind ​

实现 promise ​

实现 debounce 和 throlle ​

深拷贝 ​

判断对象的类型，toString 实现 ​

快速排序和归并排序 ​

递归和迭代优化 ​

实现一个发布订阅模式 ​

实现观察者模式 ​

实现责任链模式 ​

实现状态机模式 ​

requestAnimationframe 的理解 css 中各种百分比 h5 中的 meta vue diff 算法口述 前端监控平台如何建设 samesite http2 webpack 执行流程 web 安全中的预警系统和拦截系统 js 沙箱如何实现，自行写一个 qiankun 原理了解 sort 函数强行记忆 二分法查找机器 new 和 bind 的实现 数组去重的方法，如何数组原地去重 移动端特有的事件 移动端三种适配方式深入了解 实现一个 px 转 rem 插件 z-index 的特性 小于 12px 的字体如何实现 js 内存回收算法 axios 封装要点

© 2018 xunserver | Powered by VitePress | 蜀ICP备17019511号