1. 学校读的专业是?
2. 自学前端

Css

z-index属性在什么情况下会失效

通常 z-index 的使用是在有两个重叠的标签，在一定的情况下控制其中一个在另一个的上方或者下方出现。z-index值越大就越是在上层。z-index元素的position属性需要是relative，absolute或是fixed。

z-index属性在下列情况下会失效：

• 父元素position为relative时，子元素的z-index失效。解决：父元素position改为absolute或static；
• 元素没有设置position属性为非static属性。解决：设置该元素的position属性为relative，absolute或是fixed中的一种；
• 元素在设置z-index的同时还设置了float浮动。解决：float去除，改为display：inline-block；

html

iframe的作用以及优缺点

优点

• 可以在页面上独立显示一个页面或者内容,不会与页面其他元素产生冲突。
• 可以在多个页面中重用同一个页面或者内容,可以减少代码的冗余。
• 加载是异步的,页面可以在不等待 iframe 加载完成的情况下进行展示。
• 方便地实现跨域访问

缺点

• 搜索引擎可能无法正确解析 iframe 中的内容
• 会阻塞主页面的 onload 事件
• 和主页面共享连接池,影响页面并行加载

js

es6新特性

for in 和 for of

判断数组有哪些

事件循环机制

如何判断元素是否到达可视区域

window.innerHeight 是浏览器可视区的高度；

document.body.scrollTop || document.documentElement.scrollTop 是浏览器滚动的过的距离；

imgs.offsetTop 是元素顶部距离文档顶部的高度（包括滚动条的距离）；

内容达到显示区域的：img.offsetTop < window.innerHeight + document.body.scrollTop;

http

从输入URL到看到页面发生的全过程

从输入URL到看到页面，这一过程涉及了多个步骤和组件之间的交互。以下是这个过程的大致概述：

1. 用户输入URL：用户首先在浏览器地址栏中输入想要访问的网站的URL。
2. 浏览器解析URL：浏览器内部代码会解析这个URL。它首先会检查本地hosts文件，看是否有对应的域名。如果有，浏览器就会直接向该IP地址发送请求。如果没有，浏览器会将域名发送给DNS服务器进行解析，将域名转换成对应的服务器IP地址。
3. 建立TCP连接：浏览器得到IP地址后，会通过TCP协议与服务器建立连接。TCP/IP协议是Internet的基础，它负责确保数据在网络中的可靠传输。这一过程中会进行三次握手，确保双方都已准备好进行通信。
4. 发送HTTP请求：TCP连接建立后，浏览器会向服务器发送HTTP请求。这个请求包含了请求行（如GET方法、请求的URI、HTTP版本等）、请求头部（如Accept-Charset、Accept-Encoding等）以及可能存在的请求正文。
5. 服务器处理请求：服务器收到请求后，会根据请求的内容进行相应的处理。这可能包括查询数据库、生成动态内容等。
6. 发送HTTP响应：服务器处理完请求后，会发送一个HTTP响应给浏览器。这个响应包含了状态行（如HTTP版本、状态码、状态描述等）、响应头部（如Content-Type、Content-Length等）以及响应正文（即实际要显示的页面内容）。
7. 浏览器解析和渲染页面：浏览器收到响应后，会解析响应正文中的HTML代码，并下载所需的CSS、JavaScript等资源文件。然后，浏览器会根据这些资源来渲染页面，最终将页面呈现给用户。

需要注意的是，这个过程可能还涉及到其他的步骤和组件，如重定向、缓存、代理服务器等，具体取决于网络环境和浏览器设置。此外，对于HTTPS协议，还涉及到SSL/TLS加密和证书验证等步骤，以确保数据传输的安全性。

总的来说，从输入URL到看到页面是一个复杂且多步骤的过程，涉及了用户、浏览器、DNS服务器、服务器等多个实体之间的交互和通信。

### web安全攻击方式及防御方法

1、SQL注入

SQL注入是一种常见的Web应用安全漏洞，攻击者通过在Web应用的输入参数中注入恶意的SQL代码，从而执行未经授权的数据库操作。这种类型的攻击允许攻击者访问，删除或修改数据库中的数据。

防御方法：使用参数化查询、输入验证和限制数据库权限等方法来防止SQL注入攻击。移除或转义特殊字符，如单引号等，防止恶意SQL代码的执行。为数据库用户分配最小必要的权限，以减少攻击者能够利用SQL注入漏洞对数据库进行的操作。使用ORM（对象关系映射）框架可以减少直接操作数据库的需求，并且ORM通常有内置的参数化查询等安全特性。定期进行安全审计和漏洞扫描，以及对Web应用程序进行安全测试，确保及时发现和修复潜在的SQL注入漏洞。

2、跨站脚本攻击 (XSS)

是一种常见的网络安全漏洞，攻击者通过在网页上注入恶意脚本，以获取用户的敏感信息或劫持用户的会话。XSS攻击通常分为存储型XSS、反射型XSS和DOM型XSS。

防御方法：对用户输入的数据进行严格的验证和过滤，移除或转义潜在的恶意脚本。在把用户输入的数据输出到网页时，进行适当的编码，以防止恶意脚本的执行。通过设置CSP（Content Security Policy） HTTP头部，限制网页可以加载的资源和执行的脚本，防止XSS攻击。选择使用经过安全审计和有良好安全记录的框架和库，以减少XSS攻击的风险。对敏感信息进行加密存储和传输，防止泄露。

3、跨站请求伪造 (CSRF)

攻击者利用受害者在已登录的情况下身份验证的权限，对受害者进行操作。攻击者通过伪装的请求来执行未经授权的操作，比如修改密码、发送电子邮件或进行资金转账等。

防御方法：使用CSRF令牌，验证referer头部信息，将CSRF令牌存储在Cookie中，并同时将该令牌作为参数发送给服务器。服务器将比较这两个值是否匹配，从而验证请求的合法性。在每个请求中添加一个随机或不可预测的参数，攻击者无法获得该参数的值，因此无法伪造有效请求。通过使用CSP，可以帮助防止恶意脚本的注入和执行，从而减少CSRF攻击的风险。

4、未经授权的访问

可能导致未经授权的个人或实体获取敏感信息、pc系统功能或资源。

防御方法：加强身份认证，实施访问控制和权限管理，强化密码策略，强化操作系统和应用程序安全。定期对系统进行审计和监控，以及实时监控系统日志，以检测异常操作和未经授权的访问尝试。使用网络防火墙来限制流量，阻止未经授权的访问，并使用IDS来检测和响应来自未经授权用户的攻击。

5、重定向攻击

这种在一些钓鱼网站中经常见到，一般会发送给用户一个合法链接，这个链接被用户点击的时候，导向进入一个非法网站，从而达到骗取用户信任、窃取用户资料的目的。

避免攻击：一般来说我们需要审核重定向的网址，通过加入黑白名单的方式监控。

6、文件上传漏洞

恶意用户通过应用程序的文件上传功能，将恶意文件（如病毒、木马、恶意脚本等）上传到服务器上，从而导致网站安全漏洞和潜在的安全威胁。

防御方法：严格限制上传文件类型和大小，对上传的文件进行合理的检查和过滤，设定合理的文件权限。在服务器端对上传的文件进行扩展名检查，以确保上传的文件扩展名与其真实类型一致，防止对文件伪装的攻击。使用安全的文件内容检测工具，对上传的文件进行扫描和检测，以确保文件不包含恶意代码。如果发现恶意代码，立即将文件视为不安全并予以阻止或删除。

7、目录遍历攻击

通过输入恶意构造的文件路径来获取未经授权的文件或目录访问权限。

防御方法：限制用户访问权限，严格控制访问文件路径，过滤用户输入的目录遍历字符。对URL进行编码处理，以防止用户输入中包含恶意路径分隔符，从而避免目录遍历攻击。确保关闭不必要的文件和目录访问权限，避免出现目录遍历漏洞。

8、代码执行漏洞

应用程序在处理输入时未正确进行过滤和验证，导致恶意用户能够向应用程序提交恶意代码，从而在服务器上执行任意指令。这种漏洞很容易被黑客利用，造成严重的安全风险。

防御方法：将应用程序运行在沙盒环境中，对用户输入进行严格过滤和验证，限制用户的执行权限，定期对代码进行安全审计。

9、点击劫持攻击

攻击者创建一个透明的图层，并在上面放置一个看似吸引人的元素，例如按钮、链接或表单，然后诱使用户在不知情的情况下点击这个看似无害的元素，实际上用户的点击被重定向到攻击者想要的网页或执行特定的操作。点击劫持攻击可能导致用户执行意外的操作，例如在未经许可的情况下购买商品或泄露个人敏感信息。

防御方法：使用X-Frame-Options头部，限制网页被嵌套，并提示用户外部引用。在网页上增加一层透明的DIV，并检查用户点击的位置是否在预期范围内。在编写网页时，需要对用户的操作做合适的限制和验证，确保用户的点击不会被误导到其他页面或执行危险的操作。

10、cookie攻击

主要是利用JavaScript能够在当前域名下获取网站cookie的特性来攻击（javascript:alert(doucment.cookie)），一般来说可以配合XSS和CSRF来进行攻击，

避免攻击：现在主流浏览器都支持在cookie上加上HttpOnly的属性,这样cookie就无法通过Java Script来取得,如果能在关键cookie上打上这个标记，对cookie的安全性的提高有很大作用。

11、DOS攻击

拒绝服务攻击（denial-of-service attack, DoS）亦称洪水攻击，这也是网络安全领域不得不提到的一个攻击，主要攻击方式为不断的向目标服务器进行强烈多次的攻击，这种攻击及其消耗服务器的带宽和资源，最终使得服务器资源耗尽而崩塌。

避免攻击：这种攻击一般可以通过一些防火墙策略和报警机制来解决，同时配上人为监控。简单的讲可以对访问过多的IP进行封禁。深入一点讲，可以做一些流量清洗方案。采用抗 DDoS 软件，将正常流量和恶意流量区分开。

vue

### SPA首屏加载优化有哪些方案？

Vue2和Vue3的区别

vue-router

1.Vue-Router 4.X核心变化

1.创建路由实例

import { createRouter, createWebHistory } from 'vue-router';
const router = createRouter({
    history: createWebHistory(),  // 或 createWebHashHistory
    routes: [...]
});

2.组合式API支持

• useRouter()：获取路由实例（替代this.$router）
• useRoute()：获取当前路由对象（替代this.$route）

4.路由模式

• createWebHistory()：History模式（需服务器支持）
• createWebHashHistory()：Hash模式
• createMemoryHistory()：SSR或测试环境

5. 路由组件如何复用并响应参数变化

Keep-alive

1.作用

2.背包的组件生命周期的变化

3.关键属性

4.注意

通讯

项目

项目部署上线流程是什么

taro 用什么ui ,输入框过快的时候会出现什么情况

一个 Web 管理系统，使用越来越慢，如何排查

这个问题的核心是：慢在哪里，要先定位瓶颈，再针对性优化。一般分网络、前端、后端三个方向进行定位。

先定位问题，用 Chrome DevTools：

• Network：看接口是否变慢（TTFB、响应时间）
• Performance：看是否卡在 JS 执行或渲染
• Memory：是否有内存泄漏（页面越用越卡）

前端常见的问题有

• 页面组件越来越多，重复渲染 / 状态管理混乱
• 大列表一次性渲染（上千条数据）
• 事件监听未释放，导致内存泄漏
• 打包体积变大，首屏加载慢

对应的解决方案有：

• 虚拟列表（只渲染可视区域）
• 减少不必要的 re-render（memo、拆组件）
• 检查未销毁的定时器、监听器
• 按需加载（懒加载模块）

接口慢常见的问题有

• 接口响应时间变长
• 一次请求返回数据过多
• 串行请求过多

对应的解决方案有

• 分页 / 按需加载数据
• 合并接口 or 并行请求
• 开启 gzip / CDN / 缓存

后端接口返回几万条数据 前端表格如何去展示处理

1. 先和后端沟通：能否改成分页？（90% 的场景下,这是最佳答案。）
2. 如果必须全量展示：采用虚拟滚动（利用成熟的 UI 库或第三方组件）。
3. 如果只是做数据导入预览：采用数据分片,给用户一个加载中的提示。
4. 如果极其复杂且卡顿：考虑 Canvas 方案。

如何排查网页白屏问题

白屏问题本质：页面没渲染出来或 JS 报错中断了渲染。排查要有顺序，从外到内、从简单到复杂。

先快速定位问题方向

• 看有没有 JS 报错（语法错误、接口报错、资源 404）。
• 看 HTML、JS、CSS 文件是否加载成功？核心接口是否返回 500 / 超时？
• 看 DOM 是否渲染出来？还是 body 是空的？

如果是 JS 报错了，就需要

• try/catch 关键逻辑
• 接入全局错误监控（window.onerror、unhandledrejection）

如果是 HTML、JS、CSS 文件加载失败，就检查 CDN 是否配置错误？这一般不会是程序问题。

如果核心接口返回 500 / 超时，那就在前端做容错方案，例如展示“获取数据失败，请刷新重试”

还可以加 ErrorBoundary 容错组件，来最大范围的概括各类组件渲染报错，给用户提示友好信息。

总之，先看控制台和网络请求，确认是 JS 报错、资源加载失败还是接口问题；再定位到具体代码。工程上通过错误监控、兜底 UI 和自动化监控来预防和快速发现白屏问题。