2024《》 - 技术栈

vue-cli到哪做了那些事

vue-cli是vue.js的脚手架，用于自动生成vue.js+webpack的项目模板，快速搭建Vue.js项目。

vue cli内置了webpack的一些功能，这些是用webpack打包时需要我们自己配置的，例如：

1.ES6代码转换成ES5代码

scss/sass/less/stylus转css
.vue文件转换成js文件
使用 jpg、png，font等资源文件
自动添加css各浏览器产商的前缀
代码热更新
资源预加载
每次构建代码清除之前生成的代码

浏览器存储的方式有哪些

浏览器 cookie 和 session 的认识
介绍下304过程

HTTP 状态码中的 304 状态码表示"未修改"（Not Modified），通常在浏览器向服务器请求资源时使用。下面是关于 304 状态码的简要介绍：

304 状态码的过程：

浏览器缓存检查：
- 当浏览器向服务器请求资源时，会携带上次请求该资源时服务器返回的缓存标识（如 ETag 或 Last-Modified）。
服务器检查资源状态：
- 服务器接收到请求后，会检查请求中携带的缓存标识与服务器当前资源的标识是否一致。
资源未修改：
- 如果服务器检测到请求的资源自上次请求以来未发生变化，即资源未被修改，则服务器会返回 304 状态码给浏览器。
浏览器处理：
- 浏览器收到 304 状态码后，表示本地缓存的资源仍然有效，浏览器会从本地缓存加载资源，而不是重新请求服务器获取资源。

304 状态码的优势：

减少网络流量：通过避免重复传输未更改的资源，可以减少网络流量和加快页面加载速度。
节省服务器资源：减少了服务器处理相同请求的频率，节省了服务器资源。

网页颜色变灰

// 获取 body 元素
var body = document.getElementsByTagName("body")[0];

// 修改背景色为灰色
body.style.backgroundColor = "gray";

// 修改文本颜色为灰色
body.style.color = "gray";

nginx处理跨域-反向代理（原理）

原理：

配置 Nginx：
- 在 Nginx 的配置文件中，可以使用 add_header 指令来添加 CORS 相关的响应头部。
- 通常需要在目标服务器的代理位置或者对应的 location 块中进行配置。
添加响应头：
- 使用 add_header 指令，可以向响应头部添加 CORS 相关的信息，如允许的 Origin、允许的方法（GET、POST 等）、允许的头部字段等。
示例配置：
- 下面是一个简单的示例配置，用于在 Nginx 中处理跨域请求：

   location /api/ {
       add_header 'Access-Control-Allow-Origin' '*';
       add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
       add_header 'Access-Control-Allow-Headers' 'DNT,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range';
       add_header 'Access-Control-Expose-Headers' 'Content-Length,Content-Range';
       if ($request_method = 'OPTIONS') {
           add_header 'Access-Control-Max-Age' 1728000;
           add_header 'Content-Type' 'text/plain; charset=utf-8';
           add_header 'Content-Length' 0;
           return 204;
       }
   }

4.重启 Nginx：

保存配置文件后，需要重启 Nginx 服务使配置生效。

性能优化-如何评价页面性能好坏，用什么指标

加载时间：
- 页面加载时间（Page Load Time）：从用户发起请求到页面完全加载显示所需的时间。
- 首次内容渲染时间（First Contentful Paint）：页面上首次有内容渲染的时间，用户能够看到页面内容的时间。
- DOM 加载时间（DOM Load Time）：DOM 树加载完成的时间，影响页面的可交互性。
资源加载：
- 资源加载时间：各种资源（如图片、CSS、JavaScript 文件）加载完成的时间。
- 缓存利用率：浏览器是否有效利用缓存，减少不必要的资源请求。
交互性能：
- 响应时间（Response Time）：用户与页面交互后，页面作出响应的时间。
- 滚动性能（Scroll Performance）：页面滚动时的流畅度和响应速度。
渲染性能：
- 重绘与重排（Repaint & Reflow）：页面的布局和样式改变时，浏览器重新绘制和重排元素的次数。
- 帧率（Frame Rate）：页面的动画和交互效果是否达到流畅的 60 FPS。

优化手段从几秒到几毫秒

减少 HTTP 请求：
- 合并 CSS 和 JavaScript 文件，减少文件数量和大小。
- 使用 CSS 精灵将多个小图片合并为一个大图，减少图片请求次数。
使用 CDN 加速：
- 将静态资源部署到内容分发网络（CDN），加速资源的加载速度。
压缩资源：
- 压缩 HTML、CSS、JavaScript 代码，减小文件大小。
- 使用图片压缩工具对图片进行压缩，减小图片文件大小。
延迟加载：
- 对于非关键资源，可以延迟加载，等页面主要内容加载完毕后再加载其他资源。
使用缓存：
- 设置合适的缓存策略，让浏览器能够缓存页面资源，减少重复请求。
减少重排和重绘：
- 通过合并样式表、优化 DOM 结构等方式减少页面的重排和重绘操作。
使用 Web Workers ：
- 将一些耗时的任务交给 Web Workers 处理，以减轻主线程的负担，提高页面响应速度。

过去遇到有挑战的事情，怎么解决的

分析问题：

首先，我会深入了解问题的本质和背景，明确问题的范围和影响。这有助于我全面理解挑战，并为解决问题制定合适的方案做好准备。

持续学习：解决问题的过程也是一个学习的过程。无论问题的解决结果如何，我都会总结经验教训，明白成功的原因和失败的原因，以便将这些经验运用到未来的挑战中。
保持乐观：在面对挑战时，我会保持乐观的态度。我相信每个问题都有解决的方法，而挑战也是成长和进步的机会。

xss攻击怎么解决

跨站脚本攻击（XSS）是一种常见的网络安全漏洞，攻击者通过在网页中注入恶意脚本，来获取用户信息或利用用户的权限进行攻击。以下是一些常见的方法来解决 XSS 攻击：

输入过滤和验证：
- 对用户输入的数据进行严格的过滤和验证，确保不含有恶意脚本。可以使用白名单机制，只允许特定类型的输入，过滤掉潜在的恶意代码。
转义输出：
- 在将用户输入的数据输出到网页上时，需要对其进行合适的转义处理，以防止其中的 HTML、JavaScript 或其他脚本代码得以执行。比如将 < 转义为 <，> 转义为 > 等。

CSRF避免方式：

添加验证码

使用token

服务端给用户生成一个token，加密后传递给用户

webpack如何实现代码分离

1．入口起点：使用 entry 配置手动地分离代码。

2．防止重复：使用 CommonsChunkPlugin 去重和分离 chunk。

3．动态导入：通过模块的内联函数调用来分离代码。

常见的Webpack Loader? 如何实现一个Webpack Loader(NO)

loader: 是一个导出为函数的javascript模块，根据rule匹配文件扩展名，处理文件的转换器。

file-loader：把文件输出到一个文件夹中，在代码中通过相对 URL 去引用输出的文件 (处理图片和字体)

url-loader：与file-loader类似，区别是用户可以设置一个阈值，大于阈值会交给file-loader处理，小于阈值时返回文件base64 形式编码 (处理图片和字体)

babel-loader：把 ES6 转换成 ES5

sass-loader：将SCSS/SASS代码转换成CSS