面试考点复盘(一)CSS 盒子模型 一个盒子模型由四个部分组成:content、padding、border、margi
CSS
盒子模型
一个盒子模型由四个部分组成:content、padding、border、margin
标准盒子模型: 盒子总宽度=宽度(content)+padding+border+margin
IE怪异盒子模型: 盒子总宽度=宽度(content+padding+border)+margin
行内元素和块级元素的区别
特性 | 行内元素 | 块级元素 |
---|---|---|
布局行为 | 只占据内容的宽度,不独占一整行 | 独占一整行,其他元素会被推到下一行 |
常见元素 | <a> , <span> , <img> , <input> | <div> , <p> , <h1> -<h6> , <ul> |
能否嵌套 | 通常不能包含块级元素 | 可以包含其他块级或行内元素 |
CSS 控制 | 宽高、内边距和边框只影响内容 | 可以设置宽度和高度,独占容器宽度 |
使用场景 | 用于内容的一部分(如链接、强调文字) | 用于结构布局(如段落、容器) |
实现水平垂直居中
- 定位+margin:auto;
- 定位+margin:负值;
- 定位+transform;
- table布局
- 父元素:display:table-cell + vertical-align:middle + text-align:center
- 子元素:display:inline-block
- flex布局
- display:flex
- align-items:center
- justify-content:center
- grid布局
BFC
BFC(Block Formatting Context),即块级格式化上下文,它是页面中的一块渲染区域,并且有一套自己的渲染规则:
- 内部盒子会在垂直方向上一个接一个放置。
- Box垂直方向的距离由margin决定,属于同一个BFC的两个相邻Box的margin会发生重叠。
- 每个元素的margin box的左边,与包含border box的左边相接触。
- BFC的区域不会与float box重叠。
- BFC是页面上的一个隔离的独立容器,容器里的子元素不会影响到外面的元素。
- 计算BFC的高度时,浮动元素也会参与计算。
触发条件:
- 根元素,即html
- float的值不为none(默认)
- overflow的值不为visible(默认)
- display的值不为inline-block、table-cell、table-caption
- position的值为absolute或fixed
实现隐藏元素的方式
- display:none;
- visibility:hidden;
- opacity:0;
- height,width属性均设为0;
- position:absolute;
- clip-path;
用纯CSS创建一个三角形
-
将元素的宽高设置为
0
。 -
设置上下左右边框的样式:
- 上边框和左右边框设置为透明。
- 下边框设置为想要的颜色。
.triangle {
width: 0;
height: 0;
border-left: 50px solid transparent; /* 左边框 */
border-right: 50px solid transparent; /* 右边框 */
border-bottom: 100px solid #ff0000; /* 下边框,设置颜色 */
}
如何实现蒙尘效果
- 模糊效果:使用
filter:blur()
+半透明图层background:rgba(0,0,0,0.2)
- 灰尘覆盖层:使用蒙尘纹理图像
background-image: url('dust-texture.png')
+opacity: 0.3
- 噪点背景:使用 CSS 的渐变生成噪点,也可以模拟灰尘感。
JS
AJAX
AJAX指的是通过JavaScript的异步通信,从服务器中获取XML文档中的数据进行读取,在更新当前网页对应部分,而不用刷新整个网页。
创建AJAX请求的步骤:
- 创建一个XMLHttpRequest对象。
- 在这个对象使用open方法创建一个HTTP请求,open方法所需的参数是请求的方法、请求的地址、是否异步和用户的认证信息。
- 使用
send
方法发送请求 - 监听服务器的响应
0
(UNSENT): 客户端已创建XMLHttpRequest
对象,但尚未调用open()
方法。1
(OPENED): 调用了open()
方法,但请求还未发送。2
(HEADERS_RECEIVED): 请求已经发送,并且服务器已经返回响应头。3
(LOADING): 正在下载响应体。4
(DONE): 整个响应已经完成,数据已经完全接收。
- 处理服务器的响应数据
深浅拷贝方法
浅拷贝
- Object.assign({},a)
- Object.create()
- [].concat()
- 扩展运算符
- arr.slice(0)
- arr.toReverser().reverse()
深拷贝
- JSON.parse(JSON.stringify())
- structedClone()
Vue
组件通讯
父子组件通讯
- props:父组件通过
props
方式向子组件传递数据(prop只可以从上一级组件传递到下一级组件,即所谓的单项数据流。prop只读,不可进行修改)。父组件将值v-bind
绑定传给子组件,子组件使用defineProps
接收。
子父组件通讯
- 发布订阅:子组件负责发布事件并携带参数,父组件订阅该事件通过事件获取子组件提供的值;子组件触发添加含有参数的分布事件,父组件添加订阅事件读取该值。
- v-model数据绑定:父组件借助v-model将数据绑定给子组件,子组件创建
update:xxx
事件,并将接收到的数据修改后emit出来。 - 父组件通过获取子组件中defineExpose()暴露出来的数据。
watch和computed区别
watch
用途:监听数据变化并执行特定操作
依赖性:手动指定要监听的属性
缓存:不具备缓存
适用场景:需要在数据变化时执行异步操作或复杂逻辑
数据类型:支持处理复杂逻辑(异步请求、执行副作用)
computed
用途:基于依赖的值进行计算并返回结果
依赖性:自动追踪依赖的属性
缓存:具备缓存
适用场景:需要基于已有数据计算出新的值
数据类型:主要用于返回一个新值,不处理异步或副作用
响应式原理
Vue2
vue2使用Object.defineProperty来实现对于对象属性的劫持和监听。 关键流程:
-
初始化阶段:
- Vue通过
Object.defineProperty
对数据进行劫持 - 将每个属性转换成getter/setter形式
- Vue通过
-
渲染阶段:
- 渲染时,依赖的响应式属性getter被触发,收集依赖(watcher)
-
更新阶段:
- 当数据发生变化时,setter被触发,依赖被通知,触发视图重新渲染。
Vue3
核心步骤
- Proxy数据代理
- 依赖收集与触发更新
Node.js
Koa
Koa 是一个基于 Node.js 的轻量级 Web 框架,由 Express 原始开发团队创建。它采用异步函数(async/await
)处理请求,提供灵活的中间件架构,允许开发者自由选择和自定义中间件。Koa 的设计旨在避免回调地狱,简化错误处理,使代码更易读。由于其小巧和高性能,Koa 适合构建现代 Web 应用和 API。
特点:
- 轻量级
- 基于异步函数
- 中间件架构
- 灵活性
- 更好的错误处理
uniapp
生命周期
应用生命周期
- onLaunch:应用初始化时触发,只触发一次。
- onShow:应用启动或从后台进入前台时触发。
- onHide:应用从前台进入后台时触发。
- onError:应用发生错误时触发。
- onUniNViewMessage:多端统一自定义组件消息监听函数。
页面生命周期
- onLoad:页面加载时触发,可以在此获取页面参数。
- onShow:页面显示时触发,每次打开页面都会触发。
- onReady:页面初次渲染完成时触发。
- onHide:页面隐藏时触发。
- onUnload:页面卸载时触发。
- onPullDownRefresh:页面下拉刷新时触发。
- onReachBottom:页面上拉触底时触发。
- onShareAppMessage:用户点击分享按钮或右上角菜单分享时触发。
- onPageScroll:监听页面滚动事件。
- onResize:页面尺寸变化时触发。
- onTabItemTap:点击tab时触发,仅在页面为tab页时触发。
浏览器相关
JWT鉴权流程
- 用户登录:用户向服务端发送包含凭证的登录请求。
- 验证凭证:服务器验证用户的凭证。如果验证成功,服务器生成一个JWT,通常包含用户的基本信息和权限。
- 生成JWT:服务器使用特定算法对JWT进行签名。
- 返回JWT:服务器将生成的JWT返回给用户。
- 存储JWT:用户将JWT存储在客户端
- 请求受保护资源:用户在后续请求中将JWT附加到请求头中的Authorization。
- 验证JWT:服务器接收到请求后,验证JWI签名的有效性,如果有效,允许用户访问受保护的资源。
- 返回响应
浏览器的存储类型
以下是浏览器的存储类型及其区别的表格:
存储类型 | 存储大小 | 数据类型 | 作用域 | 数据持久性 | 访问方式 |
---|---|---|---|---|---|
Cookie | 4KB(每个) | 字符串 | 每个域名 | 过期后失效 | document.cookie |
Local Storage | 5MB(一般) | 字符串 | 每个域名 | 永久存储 | localStorage.setItem() |
Session Storage | 5MB(一般) | 字符串 | 每个标签页 | 会话结束时失效 | sessionStorage.setItem() |
IndexedDB | 允许更大(可达数MB) | 结构化数据(对象) | 每个域名 | 永久存储 | 使用异步 API,如 indexedDB.open() |
Web SQL | 允许更大(可达数MB) | 结构化数据(SQL) | 每个域名 | 永久存储 | 使用 SQL 查询 |
总结:
- Cookie: 主要用于服务器与客户端之间的状态管理,数据较小,适用于存储少量信息,如会话 ID。
- Local Storage: 适合存储较大的数据,数据在关闭浏览器后依然保留,通常用于客户端数据持久化。
- Session Storage: 与 Local Storage 类似,但数据仅在当前标签页或窗口中有效,关闭标签页后数据会消失。
- IndexedDB: 提供更强大的存储能力,适用于存储大量结构化数据,支持异步操作。
- Web SQL: 类似于 IndexedDB,但已被废弃,不建议使用,适用于需要 SQL 数据库操作的场景。
输入URL到页面渲染的整个流程
-
URL解析
- 浏览器解析输入的URL,协议、主机名、端口、路径、查询字符串和锚点。
-
DNS查询
- 浏览器通过域名系统(DNS)查询,将域名解析为IP地址。
-
建立TCP连接
- 使用TCP与服务器建立连接。对于HTTPS,还会进行TLS/SSL握手以建立安全连接。
-
发送HTTP请求
- 浏览器向服务器发送HTTP请求,通常是GET请求,包含请求头。
-
服务器处理请求
- 服务器接收到请求后,处理该请求并生成响应,可能涉及:
- 查询数据库
- 处理后端逻辑
- 生成HTML、JSON或其他格式的响应
- 服务器接收到请求后,处理该请求并生成响应,可能涉及:
-
发送HTTP响应
- 服务器将生成的响应发送回浏览器,包括状态码、响应头和响应体(如HTML内容)。
-
浏览器接收响应
- 浏览器接收到服务器的响应,并根据响应头进行处理,例如缓存控制和内容类型。
-
渲染页面
- 解析HTML
- 解析CSS
- 构建渲染树
- 布局计算
- 绘制
-
执行JavaScript
-
事件处理
-
持续更新
HTTP和HTTPS的区别
特性 | HTTP | HTTPS |
---|---|---|
端口 | 默认使用端口 80 | 默认使用端口 443 |
安全性 | 数据明文传输,易被截取和篡改 | 数据经过加密传输,确保安全性 |
加密方式 | 不提供加密,数据直接在客户端和服务器之间传输 | 使用 TLS/SSL 加密,数据传输时是加密状态 |
证书 | 不需要证书 | 需要 SSL/TLS 证书来验证服务器的身份 |
数据完整性 | 无法确保数据在传输过程中不被篡改 | 通过加密和签名机制,确保数据未被篡改 |
速度 | 由于不涉及加密,传输速度相对较快 | 由于涉及加密和解密,速度稍慢,但现代硬件下差异较小 |
SEO 优势 | 对搜索引擎优化无帮助 | 搜索引擎(如 Google)优先考虑 HTTPS 站点 |
浏览器提示 | 浏览器会显示“不安全”警告,尤其是处理敏感信息时 | 浏览器显示绿色挂锁,表示连接安全 |
总结:
- HTTP适用于传输不敏感的信息,但存在安全风险。
- HTTPS提供了更高的安全性,通过加密、身份验证和数据完整性保证,适合传输敏感信息,是现代Web开发的首页协议。
虚拟列表
虚拟列表是一种用于优化列表渲染性能的技术,当需要显示大量数据时,他只渲染用户当前可见的部分内容,而不是一次性渲染整个列表。这种方式可以减少DOM元素数量,提升页面渲染速度和滚动性能。
核心原理:
- 视口内加载:仅加载并渲染出现在用户视口中的列表项。
- 动态更新:当用户滚动时,新的可见项被渲染,超出视口的项则被移除。
- 占位策略:保持滚动条的正常显示,保证用户可以顺畅滚动。
适用场景:
- 数据量很大的列表或表格。
转载自:https://juejin.cn/post/7426298186791059467