爱奇艺一面

917号先生
128 阅读4分钟

JavaScript创建一个长度为100的数组

要创建一个长度为100的数组，可以使用以下方法：

  1. 使用Array构造函数和参数
javascriptCopy code
var array = new Array(100);

上述代码将创建一个包含100个元素的数组，其中所有的元素都是未定义的。

  1. 使用数组字面量和循环初始化数组
javascriptCopy code
var array = [];
for (var i = 0; i < 100; i++) {
  array[i] = undefined;  // 或者设置为其他初始值
}

上述代码通过一个循环来初始化数组，将每个索引位置的元素设置为未定义（或者可以设置为其他初始值）。

  1. 使用fill方法
javascriptCopy code
var array = Array(100).fill(undefined);

Array(100)创建了一个长度为100的数组，然后使用fill方法将数组的所有元素填充为未定义。

请注意，上述方法创建的数组的每个元素都是未定义的。如果需要为数组的元素赋予特定的值，可以在相应的位置进行修改。

304缓存

当浏览器返回状态码为304时，它表示所请求的资源没有发生变化，即当前的缓存副本仍然有效，并且浏览器可以直接使用缓存而不必再次请求服务器。

HTTP状态码中的304 Not Modified通常与条件GET请求结合使用，例如使用If-Modified-Since或If-None-Match标头。当浏览器发送这样的条件请求时，服务器会检查资源的修改时间或标识符来确定是否有新的内容可用。如果服务器发现没有新的内容，它会返回304状态码，告诉浏览器使用缓存。

在这种情况下，浏览器会从本地缓存加载资源，而不是下载全新的副本。这有助于提高性能并减少对服务器的请求。

请注意，如果服务器返回了304状态码，浏览器不会返回实际的网页内容，而是使用缓存的版本。只有当服务器返回状态码为200时，浏览器才会获取新的内容。

websocket会跨域吗

WebSocket在默认情况下遵循同源策略，这意味着它只能与同一源（协议、域名和端口）的服务器进行通信。当你尝试在WebSocket连接中跨越不同的源时，会遇到跨域问题。

要解决WebSocket跨域问题，有几种常用的方法：

  1. CORS（跨域资源共享）：在服务器端配置响应头，允许特定的域名进行WebSocket连接。通过在响应头中添加Access-Control-Allow-Origin字段，将允许连接的域名放入其中。例如：

    Plain TextCopy code
Access-Control-Allow-Origin: http://example.com

    这样，只有指定的域名才能与WebSocket服务器进行通信。你可以配置允许多个域名或使用通配符*来允许所有域名，但这会增加安全风险，因此要慎重使用。

  2. 反向代理：将WebSocket连接的请求通过反向代理服务器转发到同一源的目标服务器上。反向代理服务器和目标服务器在同一域名下，不再涉及跨域问题。

  3. 使用第三方库或框架：有一些第三方的WebSocket库或框架，它们能够处理WebSocket跨域问题，提供跨域通信的解决方案。你可以根据具体的开发环境选择适合的库或框架。

请注意，虽然WebSocket遵循同源策略，但与传统的AJAX请求不同，WebSocket连接的握手阶段在HTTP头中会有一次预检请求（OPTIONS请求），用于确定服务器是否允许该域名进行WebSocket连接。因此，在进行WebSocket跨域配置时，需要同时处理好预检请求的响应。

协商缓存和强缓存

协商缓存和强缓存是浏览器在请求资源时使用的两种不同的缓存策略，它们的使用顺序是先走强缓存，然后才走协商缓存。

  1. 强缓存：浏览器通过检查响应头中的Cache-Control和Expires字段来判断是否命中强缓存。如果资源的缓存策略配置为强缓存，并且缓存仍然有效（未过期），浏览器会直接从本地缓存中加载该资源，不发送请求到服务器。

    • Cache-Control字段是HTTP/1.1引入的，通过设置该字段的值，服务器可以控制缓存的行为。常见的Cache-Control值包括：

      • public：响应可以被任何对象缓存，包括浏览器和代理服务器。
      • private：响应只能被浏览器缓存，不能被代理服务器缓存。
      • max-age=xxx：缓存的有效期，单位为秒。

    • Expires字段是HTTP/1.0的字段，表示资源的过期时间，即在该时间之后，浏览器会重新请求该资源。它是一个GMT格式的日期字符串。

  2. 协商缓存：如果资源未命中强缓存，浏览器会向服务器发送请求，服务器会通过检查请求头中的If-Modified-Since和If-None-Match字段来判断是否命中协商缓存。

    • 浏览器在发送请求时，会将前一次请求获得的响应的Last-Modified和ETag字段包含在请求头的If-Modified-Since和If-None-Match字段中。
    • Last-Modified是服务器端文件的最后修改时间，ETag是服务器端生成的文件唯一标识符。

    如果服务器判断资源自上次请求以来没有变化（根据Last-Modified或ETag判断），服务器会返回一个304 Not Modified响应，告诉浏览器可以使用缓存副本。浏览器接收到304响应后，会从缓存中加载资源。

总结：浏览器先检查强缓存，如果缓存有效，则直接从本地缓存加载资源；如果缓存失效，浏览器发送请求到服务器，并检查协商缓存，如果协商缓存命中，则服务器返回304 Not Modified响应，浏览器从缓存加载资源；如果协商缓存未命中，则服务器返回新的资源。

css选择器优先级

image.png

scoped实现样式隔离与穿透

vue模板编译器在编译有scoped的stye标签时，会生成对应的postCSS插件，该插件会给每个scoped标记的style标签模块，生成唯一一个对应的data-v-xxxhash字符串，同时：

  • 该字符串会作为属性，添加到该组件内，每一个元素上。 如果存在子组件，则只会在子组件顶级根元素添加该属性（透传），无法给子组件内部元素添加。

  • scoped标记的style标签内，每个选择器都会联合该属性选择器（所有选择器都会默认被重写）。 如果是嵌套选择器，会在最内层的选择器联合上属性选择器。

样式隔离效果： 有scoped的style标签内的选择器，只能选中本组件元素，无法选中子组件的元素。即，在父组件使用子组件的选择器修改样式，是无法选中子组件内的元素的。

  • 生成联合属性选择器时，默认只给最内层选择器联合。限定了每个(嵌套)选择器选中的元素，必须是带有唯一属性标记的元素。而子组件内的元素是不会带上该属性标记的。

scoped中的样式穿透原理

样式穿透意思是：让父组件在有scoped的标签里，使用子元素的选择器来修改子元素的样式，即父组件定义的样式穿透到子组件（默认无法穿透）。 原理：

  • 生成联合选择器时，不再默认给最内层的选择器联合，而是手动指定某个选择器的上一级选择器进行联合

vue编译分为三部分：script,template,style,scoped处理就在style编译里处理

image.png

扩展知识

CSS Modules实现样式隔离

css Modules的作用和vue中的scoped作用一样，都是用来实现样式的隔离。在webpack的项目中是css-loader提供的能力。在vite中已经适配了vue3单文件组件。

实现原理

将导入的css模块里的自定义css类名，替换为一个无语义，但唯一的字符串类名，并提供一个对象充当map映射来访问转换后的类名。

我们先来介绍wepack中的实现，来理解它的执行过程。

webpack中的CSS Modules

在webpack中通过配置css-loader，即可实现CSS Modules。可以应用在react或原生等场景中。但它的应用场景更多是让两个css模块（即使有相同的类名）能够互相隔离。

原理：

  • 转换：导入一个css模块时，将所有的css类的类名都替换成一个唯一的字符串。说白了就是，将自定义css类名都替换成无语义，但唯一的类名。
  • 访问转换映射：导入该css模块时，可以拿到这个模块里自定义类名和对应被替换后的类名的映射（一个对象），访问它身上的未转换前的css类名，就可以拿到转换后的类名。然后将转换后的类添加到对应的元素上的classList即可。
  • 插入到html文档中的css是转换类名后的css。

效果：

  • 当导入两个css文件，即使有相同的类名，也不会相互影响。但是需要根据拿到的映射对象，给元素加上被替换后的唯一类名。
  • 为了避免所有css文件都会进行转换类名操作（有些全局css模块不需要转换），可以给不需要转换的css文件起一个特殊的文件名，并通过test正则，为它们匹配一套不会转换的css-loader配置。

实现：

  1. 配置css-loader，处理css文件（模块）时，进行类名替换

    module.exports = {
    module: {
        rules: [
            {
                test:/.css$/,
                exclude: /node_modules/, // 排除依赖里的代码
                use: [
                    'style-loader', // 替换类名后，把css插入html头部
                    {
                        loader: 'css-loader',
                        options: {
                            modules: true, // 开启css模块
                        }
                    }
                ]
            }
        ]
    }
}

  2. 导入css文件（模块）时，用一个变量接收导入结果，这个结果就包含原始类名和被替换后类名的映射。其中key是原始类名，value是被替换后的。

// a.css
.test .div { color: green; }

// b.css
.test .div { color: yellow; }

// index.js
import style1 from 'a.css'
import style2 from 'b.css' // 把页面上第一个有test类的元素加上a.css里test类对应的样式 document.queryselector('.test').classList.add(style1.test)

组件通信

  • props/$emit
  • 事件总线
  • provide/inject
  • ref/$refs
  • parent/parent/children
  • $attrs

vuex是干嘛的

Vuex是一个用于Vue.js应用程序的状态管理模式和库。它专门用于管理应用程序中的共享状态，包括状态的响应式更新、状态的派发和状态的订阅。Vuex可以帮助组织和管理应用程序的状态，使得不同组件之间可以更方便地共享和访问数据。通过集中管理状态，Vuex可以提供一种可预测的状态管理机制，使得应用程序的开发和调试更加简单和可靠。

如何实现发布者订阅者模式

同源策略

同源策略简单来说就是浏览器的安全策略 如果协议 域名 端口不一样 就不是同源 解决跨域问题就是

  • jsonp
  • nginx
  • webpack devServe配置
  • nodejs 中间件代理跨域

你写的成员管理系统角色如何分配的

小程序分包主包限制

  • 整个小程序所有分包大小不超过 20M
  • 单个分包/主包大小不能超过 2M

小程序的通信

由于小程序的逻辑层和视图层是两个独立的运行环境、分属不同的线程或进程，不能直接进行数据共享，需要进行数据的序列化、跨线程/进程的数据传输、数据的反序列化，因此数据传输过程是异步的、非实时的。

  • 逻辑层虚拟 DOM 树的遍历和更新，触发组件生命周期和 observer 等；
  • 将 data 从逻辑层传输到视图层；
  • 视图层虚拟 DOM 树的更新、真实 DOM 元素的更新并触发页面渲染更新。

控制 setData 的频率（课外话）

  • 每次 setData 都会触发逻辑层虚拟 DOM 树的遍历和更新，也可能会导致触发一次完整的页面渲染流程。过于频繁（毫秒级）的调用 setData，会导致以下后果：

  • 逻辑层 JS 线程持续繁忙，无法正常响应用户操作的事件，也无法正常完成页面切换；

  • 视图层 JS 线程持续处于忙碌状态，逻辑层 -> 视图层通信耗时上升，视图层收到消息的延时较高，渲染出现明显延迟；

  • 视图层无法及时响应用户操作，用户滑动页面时感到明显卡顿，操作反馈延迟，用户操作事件无法及时传递到逻辑层，逻辑层亦无法及时将操作处理结果及时传递到视图层。

目前就想到了 这么多 后面有的话继续补充了 当然还问了项目相关的东西 高频八股文也问了好多

avatar
文章
阅读
粉丝