--- theme: smartblue highlight: atelier-forest-light --- ## 前言 >总之一句话，聊了N久，从了解情况，八股，手撕代码，最后的项目，太多了（就两道比较简单算法和手写，中途讲得口干得受不猛灌了口水）。面完后看了牛客上的帖子，发现有几个说面完就挂了，此时我心里有点慌了，但基本都答出来的我怎么可能会挂，然后按捺不住内心去官网看了，真给我挂了，诶~不是，都聊了这么久了不给个机会？我心疼你的时间啊面试官giegie。。。不过人是真好，面试过程中我提出的疑惑都会解答，整场面试和技术交流一样，也不亏就是了。 ## 1. 个人介绍加各种了解情况先个人自我介绍，然后base地北京是否ok？实习经历是否学校安排？为什么会换实习单位？专业分方向？为什么选择前端？ ## 2. 样式选择器的优先级 **选择器** - id选择器(#myid) - 类选择器(.myclass) - 属性选择器(a[rel="external"]) - 伪类选择器(a:hover, li:nth-child) - 标签选择器(div, h1,p) - 相邻选择器（h1 + p） - 子选择器(ul > li) - 后代选择器(li a) - 通配符选择器(*) **优先级：** - `!important` - 内联样式（1000） - ID选择器（0100） - 类选择器/属性选择器/伪类选择器（0010） - 元素选择器/伪元素选择器（0001） - 关系选择器/通配符选择器（0000）带!important 标记的样式属性优先级最高；样式表的来源相同时：`!important > 行内样式>ID选择器 > 类选择器 > 标签 > 通配符 > 继承 > 浏览器默认属性` ## 3. 水平垂直居中 - **水平居中** - 对于行内元素 : `text-align: center`; - 对于确定宽度的块级元素：（1）width和margin实现。`margin: 0 auto`; （2）绝对定位和margin-left: (父width - 子width）/2, 前提是父元素position: relative - 对于宽度未知的块级元素（1）`table标签配合margin左右auto实现水平居中`。使用table标签（或直接将块级元素设值为 display:table），再通过给该标签添加左右margin为auto。（2）inline-block实现水平居中方法。display：inline-block和text-align:center实现水平居中。（3）`绝对定位+transform`，translateX可以移动本身元素的50%。（4）flex布局使用`justify-content:center` - **垂直居中** 1. 利用 `line-height` 实现居中，这种方法适合纯文字类 1. 通过设置父容器相对定位，子级设置 `绝对定位`，标签通过margin实现自适应居中 1. 弹性布局 flex :父级设置display: flex; 子级设置margin为auto实现自适应居中 1. 父级设置相对定位，子级设置绝对定位，并且通过位移 transform 实现 1. `table 布局`，父级通过转换成表格形式，`然后子级设置 vertical-align 实现`。（需要注意的是：vertical-align: middle使用的前提条件是内联元素以及display值为table-cell的元素）。 ## 4. cookie、localStorage、sessionStorage的区别 **相同点**： - 存储在客户端 **不同点**： - cookie数据大小不能超过4k；sessionStorage和localStorage的存储比cookie大得多，可以达到5M+ - cookie设置的过期时间之前一直有效；localStorage永久存储，浏览器关闭后数据不丢失除非主动删除数据；sessionStorage数据在当前浏览器窗口关闭后自动删除 - cookie的数据会自动的传递到服务器；sessionStorage和localStorage数据保存在本地 ## 5. 后端服务可以修改cookie的值吗？前端可以修改cookie的值吗？前后端都可以修改cookie，通常先是由后端生成 cookie 值，这其中携带了用户信息等基本信息，然后前端根据需要会把一些信息添加到 cookie 中，并随着请求携带传给后端，后端拿到后再进行相应修改或者直接用。 ## 6. 前端登录的时效性怎么通过cookie做的？一般是后端设置cookie的时效性 ### Session 如果Cookie的有效期为Session，类似于sessionStorge一样，即关闭浏览器就失效。 ### Expires 指定具体的失效时间，格式大致为`2025-02-17T04:44:56.921Z`，即到`2025年2月17日4点44分56秒921毫秒`失效 ### Max-Age 从拿到 Cookie 后开始倒计时设置的Max-Age的值。例如`Max-age=3000`。当获取到该Cookie后开始倒计时，3000秒之后便失效。 ## 7. 有一个 a.58.com 和 b.58.com，这两个不同域中分别在locaStorage中存储值能共享吗？ localStorage 是基于同源策略的，因此不同域名的 localStorage 之间是不能直接共享数据的。即使是同一域名下的不同子域名，比如 a.58.com 和 b.58.com，它们之间的 localStorage 也是相互独立的，无法直接共享数据。 >然而，如果这些域名拥有相同的顶级域名（比如都是 ".58.com"），浏览器将会认为它们是同一来源，因此它们之间的同源策略就不再适用。这样一来，不同子域名之间的页面就可以共享 localStorage 数据了。 > >要实现这一点，你可以在DNS服务器设置中将不同的子域名都指向相同的顶级域名。通常，这是通过在 DNS 记录中配置 CNAME 记录或 A 记录来完成的。 ## 8. cookie 可以实现不同域共享吗？在默认情况下，Cookie 是受同源策略限制的，因此不同域之间的 Cookie 不能直接共享。同源策略要求 cookie 的域名必须完全相同（包括子域名），否则浏览器不会发送这个 cookie。但是，可以通过设置 Cookie 的域属性来实现不同域之间的共享。 ```cookie Set-Cookie: name=value; domain=.58.com; path=/ ``` 当设置 Cookie 时，可以通过指定域属性来指定哪些域名可以访问这个 Cookie。如果指定的是顶级域名，那么所有的子域名都可以访问这个 Cookie。例如上述中，如果你在顶级域名 ".58.com" 设置了一个 Cookie，并将域属性 domain 设置为 ".58.com"，那么所有以 ".58.com" 结尾的子域名（比如 a.58.com、b.58.com、xxx.58.com 等）都可以访问这个 Cookie。有关 cookie 详细的内容可以看看这篇 [cookie特典](https://juejin.cn/post/7338635448305434639#heading-8) ## 9. 浏览器为什么会有跨域问题？浏览器本身的同源策略等一些跨域限制造成的，为了保护用户的数据安全和隐私，防止恶意网站获取用户的敏感信息或进行 CSRF（跨站请求伪造）等攻击。虽然跨域限制会给开发带来一些挑战，但它是保护用户安全的必要手段。 ## 10. 跨域解决办法（这里我表现欲强了点，回答完上一个问题后反问面试官需要说说跨域的解决办法吗？作死啊我） [## 8. 那你有遇到过跨域问题吗？实际解决方法？](https://juejin.cn/post/7233307834456375353#heading-22) ## 11. jsonp的原理？ ajax 请求受同源策略影响，不允许进行跨域请求，而 script 标签 src 属性中的链接却可以访问跨域的 js 脚本，利用这个特性，服务端不再返回 JSON 格式的数据，而是返回一段调用某个函数的 js 代码，在 src 中进行了调用，这样实现了跨域。步骤： 1. 去创建一个script标签 1. script的src属性设置接口地址 1. 接口参数，必须要带一个自定义函数名，要不然后台无法返回数据 1. 通过定义函数名去接受返回的数据 ```js //动态创建 script var script = document.createElement('script'); // 设置回调函数 function getData(data) { console.log(data); } //设置 script 的 src 属性，并设置请求地址 script.src = 'http://localhost:3000/?callback=getData'; // 让 script 生效 document.body.appendChild(script); ``` **JSONP 的缺点**: JSON 只支持 get，因为 script 标签只能使用 get 请求； JSONP 需要后端配合返回指定格式的数据。 ## 12. 如果把 script 标签换成图片标签，可以实现跨域请求吗？ >脑子当时想的是把scr的回调链接换成图片链接，没注意到是换了标签 JSONP利用 ` ``` ```js // 方法2 ``` ```js // 方法3 ``` ## 21. 你实习期间前端代码打包之后，是上传到同一个域名，还是会做一些 CDN 的策略？有了解过 CDN 策略吗？前端代码打包之后，是上传到同一个域名，该域名是统一的测试容器，即测试环境。 CDN（内容分发网络，Content Delivery/Distribut Nectwork），是建立并覆盖在承载网之上，由分配在不同区域的边缘节点服务器群组成的分布式网络。 **CDN 加速的本质是缓存加速**。将服务器上存储的静态内容缓存到 CDN 节点上，当访问这些静态内容时，无需访问服务器源站，就近访问 CDN 节点即可获取相同内容，从而达到加速的效果，同时减轻服务器源站的压力。 **简单来说，CDN就是根据用户位置分配最近的资源。** 问题.png

**CDN 工作原理** 在没有 CDN 时，我们使用域名访问一个站点的路径为：用户提交域名 -> 浏览器对域名进行解析 -> DNS 解析得到目的主机的 IP 地址 -> 根据 IP 地址发出请求 -> 得到请求数据并回复。使用 CDN 后，DNS 返回的不再是一个 IP 地址，而是一个 CName（Canonical Name）别名记录，指向 CDN 的全局负载均衡。

1. 当用户在浏览器上输入 URL 时，经过本地 DNS 系统解析，DNS 系统会最终将域名的解析权交给 CNAME 指向的 CDN 专用 DNS 服务器； 1. CDN 专用 DNS 服务器将 CDN 全局负载均衡设备的 IP 地址返回给用户； 1. 用户向 CDN 全局负载均衡设备发起内容 URL 访问请求； 1. CDN 全局负载均衡设备根据用户 IP 地址以及用户请求的内容 URL，选择一台用户所属区域的 CDN 区域负载均衡设备，告诉用户向这台设备发起请求； 1. CDN 区域负载均衡设备会为用户选择一台合适的缓存服务器提供服务，然后 CDN 区域负载均衡设备会向全局负载均衡设备返回一台缓存服务器的 IP 地址（选择的依据包括：根据用户 IP 地址，判断哪一台服务器距用户最近；根据用户所请求的 URL 中携带的内容名称，判断哪一台服务器上有用户所需内容；查询各个服务器当前的负载情况，判断哪一台服务器尚有负载能力等等）； 1. 全局负载均衡设备把缓存服务器的 IP 地址返回给用户； 1. 用户向缓存服务器发起请求，缓存服务器响应用户请求，将用户所需内容返回给用户。如果这台缓存服务器上没有用户想要的内容，而区域负载均衡设备依然将它分配给了用户，那么这台缓存服务器就需要向它的上一层缓存服务器请求内容，直至追溯到网站的源服务器将内容拉回到本地。 ** 问题.png

为什么动态内容不适合放在 CDN 上呢？** 由于访问动态内容时，每次都需要访问服务器，由服务器动态生成实时的数据并返回。因此 CDN 的缓存加速不适用于加速动态内容，CDN 无法缓存实时变化的动态内容。对于动态内容请求，CDN 节点只能转发回服务器源站，没有加速效果。 ## 22. 静态资源的部署会走CDN策略吗？如果我源站有一些静态资源更新，它是怎么做到 CDN 服务器的更新？静态资源的部署通常会使用 CDN 策略，以加快内容传输速度、减少源站服务器的负载并提高网站的性能和可用性。CDN（内容分发网络）通过将静态资源（如图片、CSS、JavaScript 文件等）缓存到全球各地的边缘节点服务器上，实现内容的快速分发。 **更新CDN缓存的方法** 1. 刷新全站缓存当网站进行大规模更新时，可以选择刷新全站CDN缓存。这样可以确保所有的缓存内容都被更新，用户可以看到最新的内容。这种方法会耗费较多的时间和资源， 2. 刷新指定缓存如果只需要更新部分页面或资源，可以选择刷新指定的CDN缓存。这通常通过在网站后台管理系统中的CDN管理界面进行操作。根据CDN服务商的不同，可能提供刷新单个文件、文件夹或者URL的功能。选择需要更新的文件或URL，点击刷新按钮即可。 3. 自动更新CDN缓存有些网站更新频率较高，为了节省人工操作的时间和精力，可以选择自动更新CDN缓存的方法。这可以通过使用CDN服务商提供的API接口或者配置自动更新脚本来实现。 ## 23. vue2 和 vue3 的区别？ [1. vue2和vue3的区别](https://juejin.cn/post/7302356049560879144#heading-2) ## 24. 为什么vue的响应式迭代需要由 defineProtety 变成 proxy [Vue2和Vue3数据更新时有什么不一样？](https://juejin.cn/post/7233307834456375353#heading-8)中的 `Proxy 替代 Object.defineProperty` ## 25. nextTick 函数有什么作用或者使用场景？ nextTick 的作用是进行一个 DOM 的更新，当你使用 nextTick 的话，它可以获取到更新后的 DOM 节点元素。在你修改完数据之后，可能有时候不能立即的获取到最新的数据，能使用 nextTick 让它跳入到下一个事件循环，拿到最新的修改的数据。关于实际场景的应用可以看看[Vue2和Vue3数据更新时有什么不一样？](https://juejin.cn/post/7233307834456375353#heading-8)中的 `批量更新` ## 26. （算法）去重数组去重的方法有挺多的，网上一搜一大堆，因此部分引用了本站内的 [数组去重的五种方法](https://juejin.cn/post/7152759573978284040?searchId=20240614003123AFA4A4430434033FEB5F) ### 双重循环去重 ```js //双重循环去重 const handleRemoveRepeat = (arr) => { for (let i=0,len = arr.length; i < len; i++) { for (let j = i + 1; j < len; j++) { if (arr[i] === arr[j]) { arr.splice(j, 1); j--; len--; } } } return arr; }; ```

### indexOf去重 ```js //indexOf去重去重 const handleRemoveRepeat = (arr) => { let repeatArr = []; for (let i = 0,len = arr.length ; i < len; i++) if (repeatArr.indexOf(arr[i]) === -1) repeatArr.push(arr[i]) return repeatArr; } ```

### includes去重 ```js // includes去重 const handleRemoveRepeat = (arr) => { let repeatArr = []; for (let i = 0,len = arr.length ; i < len; i++) if (!repeatArr.includes(arr[i])) repeatArr.push(arr[i]) return repeatArr; } ```

### filter去重 ```js //filter去重 const handleRemoveRepeat = (arr) => arr.filter((item,index) => arr.indexOf(item,0) === index); ```

### ES6的Set去重 ```js const arr = [1,1,2,2,3,3,4,4,5,5]; const setData = Array.from(new Set(arr)); console.log(setData); ``` ![image.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/b7b8beef71b348e78f61619f6129720a~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=625&h=328&s=81805&e=png&b=fefefe) ## 27.（手撕）防抖节流，然后防抖之后的变体需要有个立即触发的参数（第一次立即执行，后续才需要防抖）常规体 ```js function debounce(func, delay) { let timer; return function (...args) { let that = this; clearTimeout(timer); timer = setTimeout(function () { func.apply(that, args) }, delay) } } ```

变体（根据防抖的触发） ```js function debounce(func, delay, imd) { let timer; return function (...args) { let that = this; if (imd && !timer) { func.apply(this); } clearTimeout(timer); timer = setTimeout(function () { func.apply(that, args) }, delay) } } ``` ## 28. 实习项目中挑一个收获比较大或者有亮点的？或者支持需求功能的时候有没有什么难点？怎么解决的？ >这里需要根据自己的经历提前准备好了，以防被问到没回答好 1. axios的封装 3. 手写功能函数，比如表单的失焦和聚焦（保存功能），表单数据的变动 4. 国际化多语言，文件上传下载和数据的处理，webworker的实际应用 5. SSO单点登录的理解 6. iframe框架的实际应用 ## 29. 职业性规划夯实基础、每日算法、学习源码、系统学习、部署项目、AIGC ## 30. 反问 1. 工作氛围 3. 产品从提出到上线的大概人员分配情况 5. 业务线 7. 技术栈 ## 结语这是之4月份面试之后写得部分草稿，由于一直没时间就丢到草稿箱里没整理，这会儿才整理出来，后续应该还有一些，如果有空的话，嘿嘿~。