2024《》

vue-cli到哪做了那些事

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

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

1.ES6代码转换成ES5代码

2. scss/sass/less/stylus转css

3. .vue文件转换成js文件

4. 使用 jpg、png，font等资源文件

5. 自动添加css各浏览器产商的前缀

6. 代码热更新

7. 资源预加载

8. 每次构建代码清除之前生成的代码

浏览器存储的方式有哪些

 

浏览器 cookie 和 session 的认识 

介绍下304过程 

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

 

304 状态码的过程：

1. 浏览器缓存检查：

   • 当浏览器向服务器请求资源时，会携带上次请求该资源时服务器返回的缓存标识（如 ETag 或 Last-Modified）。

2. 服务器检查资源状态：

   • 服务器接收到请求后，会检查请求中携带的缓存标识与服务器当前资源的标识是否一致。

3. 资源未修改：

   • 如果服务器检测到请求的资源自上次请求以来未发生变化，即资源未被修改，则服务器会返回 304 状态码给浏览器。

4. 浏览器处理：

   • 浏览器收到 304 状态码后，表示本地缓存的资源仍然有效，浏览器会从本地缓存加载资源，而不是重新请求服务器获取资源。

304 状态码的优势：

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

网页颜色变灰 

// 获取 body 元素
var body = document.getElementsByTagName("body")[0];// 修改背景色为灰色
body.style.backgroundColor = "gray";// 修改文本颜色为灰色
body.style.color = "gray";

 

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

原理：

1. 配置 Nginx：

   • 在 Nginx 的配置文件中，可以使用 add_header 指令来添加 CORS 相关的响应头部。
   • 通常需要在目标服务器的代理位置或者对应的 location 块中进行配置。

2. 添加响应头：

   • 使用 add_header 指令，可以向响应头部添加 CORS 相关的信息，如允许的 Origin、允许的方法（GET、POST 等）、允许的头部字段等。

3. 示例配置：

   • 下面是一个简单的示例配置，用于在 Nginx 中处理跨域请求：

4. 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 服务使配置生效。

 

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

1. 加载时间：

   • 页面加载时间（Page Load Time）：从用户发起请求到页面完全加载显示所需的时间。
   • 首次内容渲染时间（First Contentful Paint）：页面上首次有内容渲染的时间，用户能够看到页面内容的时间。
   • DOM 加载时间（DOM Load Time）：DOM 树加载完成的时间，影响页面的可交互性。

2. 资源加载：

   • 资源加载时间：各种资源（如图片、CSS、JavaScript 文件）加载完成的时间。
   • 缓存利用率：浏览器是否有效利用缓存，减少不必要的资源请求。

3. 交互性能：

   • 响应时间（Response Time）：用户与页面交互后，页面作出响应的时间。
   • 滚动性能（Scroll Performance）：页面滚动时的流畅度和响应速度。

4. 渲染性能：

   • 重绘与重排（Repaint & Reflow）：页面的布局和样式改变时，浏览器重新绘制和重排元素的次数。
   • 帧率（Frame Rate）：页面的动画和交互效果是否达到流畅的 60 FPS。

 

优化手段 从几秒到几毫秒 

1. 减少 HTTP 请求：

   • 合并 CSS 和 JavaScript 文件，减少文件数量和大小。
   • 使用 CSS 精灵将多个小图片合并为一个大图，减少图片请求次数。

2. 使用 CDN 加速：

   • 将静态资源部署到内容分发网络（CDN），加速资源的加载速度。

3. 压缩资源：

   • 压缩 HTML、CSS、JavaScript 代码，减小文件大小。
   • 使用图片压缩工具对图片进行压缩，减小图片文件大小。 

4. 延迟加载：

   • 对于非关键资源，可以延迟加载，等页面主要内容加载完毕后再加载其他资源。

5. 使用缓存：

   • 设置合适的缓存策略，让浏览器能够缓存页面资源，减少重复请求。

6. 减少重排和重绘：

   • 通过合并样式表、优化 DOM 结构等方式减少页面的重排和重绘操作。
7. 使用 Web Workers：
   • 将一些耗时的任务交给 Web Workers 处理，以减轻主线程的负担，提高页面响应速度。

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

分析问题：

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

1. 持续学习：解决问题的过程也是一个学习的过程。无论问题的解决结果如何，我都会总结经验教训，明白成功的原因和失败的原因，以便将这些经验运用到未来的挑战中。

2. 保持乐观：在面对挑战时，我会保持乐观的态度。我相信每个问题都有解决的方法，而挑战也是成长和进步的机会。

 

 xss攻击 怎么解决 

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

1. 输入过滤和验证：

   • 对用户输入的数据进行严格的过滤和验证，确保不含有恶意脚本。可以使用白名单机制，只允许特定类型的输入，过滤掉潜在的恶意代码。

2. 转义输出：

   • 在将用户输入的数据输出到网页上时，需要对其进行合适的转义处理，以防止其中的 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