likes
comments
collection
share

面试考点复盘(一)CSS 盒子模型 一个盒子模型由四个部分组成:content、padding、border、margi

作者站长头像
站长
· 阅读数 20

CSS

盒子模型

一个盒子模型由四个部分组成:content、padding、border、margin

标准盒子模型: 盒子总宽度=宽度(content)+padding+border+margin

IE怪异盒子模型: 盒子总宽度=宽度(content+padding+border)+margin

行内元素和块级元素的区别

特性行内元素块级元素
布局行为只占据内容的宽度,不独占一整行独占一整行,其他元素会被推到下一行
常见元素<a>, <span>, <img>, <input><div>, <p>, <h1>-<h6>, <ul>
能否嵌套通常不能包含块级元素可以包含其他块级或行内元素
CSS 控制宽高、内边距和边框只影响内容可以设置宽度和高度,独占容器宽度
使用场景用于内容的一部分(如链接、强调文字)用于结构布局(如段落、容器)

实现水平垂直居中

  1. 定位+margin:auto;
  2. 定位+margin:负值;
  3. 定位+transform;
  4. table布局
    • 父元素:display:table-cell + vertical-align:middle + text-align:center
    • 子元素:display:inline-block
  5. flex布局
    • display:flex
    • align-items:center
    • justify-content:center
  6. grid布局

BFC

BFC(Block Formatting Context),即块级格式化上下文,它是页面中的一块渲染区域,并且有一套自己的渲染规则:

  1. 内部盒子会在垂直方向上一个接一个放置。
  2. Box垂直方向的距离由margin决定,属于同一个BFC的两个相邻Box的margin会发生重叠。
  3. 每个元素的margin box的左边,与包含border box的左边相接触。
  4. BFC的区域不会与float box重叠。
  5. BFC是页面上的一个隔离的独立容器,容器里的子元素不会影响到外面的元素。
  6. 计算BFC的高度时,浮动元素也会参与计算。

触发条件

  1. 根元素,即html
  2. float的值不为none(默认)
  3. overflow的值不为visible(默认)
  4. display的值不为inline-block、table-cell、table-caption
  5. position的值为absolute或fixed

实现隐藏元素的方式

  1. display:none;
  2. visibility:hidden;
  3. opacity:0;
  4. height,width属性均设为0;
  5. position:absolute;
  6. clip-path;

用纯CSS创建一个三角形

  1. 将元素的宽高设置为 0

  2. 设置上下左右边框的样式:

    • 上边框和左右边框设置为透明。
    • 下边框设置为想要的颜色。
        .triangle {
            width: 0;
            height: 0;
            border-left: 50px solid transparent;  /* 左边框 */
            border-right: 50px solid transparent; /* 右边框 */
            border-bottom: 100px solid #ff0000;   /* 下边框,设置颜色 */
        }

如何实现蒙尘效果

  1. 模糊效果:使用filter:blur()+半透明图层background:rgba(0,0,0,0.2)
  2. 灰尘覆盖层:使用蒙尘纹理图像background-image: url('dust-texture.png') + opacity: 0.3
  3. 噪点背景:使用 CSS 的渐变生成噪点,也可以模拟灰尘感。

JS

AJAX

AJAX指的是通过JavaScript的异步通信,从服务器中获取XML文档中的数据进行读取,在更新当前网页对应部分,而不用刷新整个网页。

创建AJAX请求的步骤:

  1. 创建一个XMLHttpRequest对象。
  2. 在这个对象使用open方法创建一个HTTP请求,open方法所需的参数是请求的方法、请求的地址、是否异步和用户的认证信息。
  3. 使用send方法发送请求
  4. 监听服务器的响应
    • 0 (UNSENT): 客户端已创建XMLHttpRequest对象,但尚未调用open()方法。
    • 1 (OPENED): 调用了open()方法,但请求还未发送。
    • 2 (HEADERS_RECEIVED): 请求已经发送,并且服务器已经返回响应头。
    • 3 (LOADING): 正在下载响应体。
    • 4 (DONE): 整个响应已经完成,数据已经完全接收。
  5. 处理服务器的响应数据

深浅拷贝方法

浅拷贝

  1. Object.assign({},a)
  2. Object.create()
  3. [].concat()
  4. 扩展运算符
  5. arr.slice(0)
  6. arr.toReverser().reverse()

深拷贝

  1. JSON.parse(JSON.stringify())
  2. structedClone()

Vue

组件通讯

父子组件通讯

  1. props:父组件通过props方式向子组件传递数据(prop只可以从上一级组件传递到下一级组件,即所谓的单项数据流。prop只读,不可进行修改)。父组件将值v-bind绑定传给子组件,子组件使用defineProps接收。

子父组件通讯

  1. 发布订阅:子组件负责发布事件并携带参数,父组件订阅该事件通过事件获取子组件提供的值;子组件触发添加含有参数的分布事件,父组件添加订阅事件读取该值。
  2. v-model数据绑定:父组件借助v-model将数据绑定给子组件,子组件创建update:xxx事件,并将接收到的数据修改后emit出来。
  3. 父组件通过获取子组件中defineExpose()暴露出来的数据。

watch和computed区别

watch

用途:监听数据变化并执行特定操作

依赖性:手动指定要监听的属性

缓存:不具备缓存

适用场景:需要在数据变化时执行异步操作或复杂逻辑

数据类型:支持处理复杂逻辑(异步请求、执行副作用)

computed

用途:基于依赖的值进行计算并返回结果

依赖性:自动追踪依赖的属性

缓存:具备缓存

适用场景:需要基于已有数据计算出新的值

数据类型:主要用于返回一个新值,不处理异步或副作用

响应式原理

Vue2

vue2使用Object.defineProperty来实现对于对象属性的劫持和监听。 关键流程:

  1. 初始化阶段:

    • Vue通过Object.defineProperty对数据进行劫持
    • 将每个属性转换成getter/setter形式
  2. 渲染阶段:

    • 渲染时,依赖的响应式属性getter被触发,收集依赖(watcher)
  3. 更新阶段:

    • 当数据发生变化时,setter被触发,依赖被通知,触发视图重新渲染。

Vue3

核心步骤

  1. Proxy数据代理
  2. 依赖收集与触发更新

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鉴权流程

  1. 用户登录:用户向服务端发送包含凭证的登录请求。
  2. 验证凭证:服务器验证用户的凭证。如果验证成功,服务器生成一个JWT,通常包含用户的基本信息和权限。
  3. 生成JWT:服务器使用特定算法对JWT进行签名。
  4. 返回JWT:服务器将生成的JWT返回给用户。
  5. 存储JWT:用户将JWT存储在客户端
  6. 请求受保护资源:用户在后续请求中将JWT附加到请求头中的Authorization。
  7. 验证JWT:服务器接收到请求后,验证JWI签名的有效性,如果有效,允许用户访问受保护的资源。
  8. 返回响应

浏览器的存储类型

以下是浏览器的存储类型及其区别的表格:

存储类型存储大小数据类型作用域数据持久性访问方式
Cookie4KB(每个)字符串每个域名过期后失效document.cookie
Local Storage5MB(一般)字符串每个域名永久存储localStorage.setItem()
Session Storage5MB(一般)字符串每个标签页会话结束时失效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到页面渲染的整个流程

  1. URL解析

    • 浏览器解析输入的URL,协议、主机名、端口、路径、查询字符串和锚点。
  2. DNS查询

    • 浏览器通过域名系统(DNS)查询,将域名解析为IP地址。
  3. 建立TCP连接

    • 使用TCP与服务器建立连接。对于HTTPS,还会进行TLS/SSL握手以建立安全连接。
  4. 发送HTTP请求

    • 浏览器向服务器发送HTTP请求,通常是GET请求,包含请求头。
  5. 服务器处理请求

    • 服务器接收到请求后,处理该请求并生成响应,可能涉及:
      • 查询数据库
      • 处理后端逻辑
      • 生成HTML、JSON或其他格式的响应
  6. 发送HTTP响应

    • 服务器将生成的响应发送回浏览器,包括状态码、响应头和响应体(如HTML内容)。
  7. 浏览器接收响应

    • 浏览器接收到服务器的响应,并根据响应头进行处理,例如缓存控制和内容类型。
  8. 渲染页面

    • 解析HTML
    • 解析CSS
    • 构建渲染树
    • 布局计算
    • 绘制
  9. 执行JavaScript

  10. 事件处理

  11. 持续更新

HTTP和HTTPS的区别

特性HTTPHTTPS
端口默认使用端口 80默认使用端口 443
安全性数据明文传输,易被截取和篡改数据经过加密传输,确保安全性
加密方式不提供加密,数据直接在客户端和服务器之间传输使用 TLS/SSL 加密,数据传输时是加密状态
证书不需要证书需要 SSL/TLS 证书来验证服务器的身份
数据完整性无法确保数据在传输过程中不被篡改通过加密和签名机制,确保数据未被篡改
速度由于不涉及加密,传输速度相对较快由于涉及加密和解密,速度稍慢,但现代硬件下差异较小
SEO 优势对搜索引擎优化无帮助搜索引擎(如 Google)优先考虑 HTTPS 站点
浏览器提示浏览器会显示“不安全”警告,尤其是处理敏感信息时浏览器显示绿色挂锁,表示连接安全

总结:

  • HTTP适用于传输不敏感的信息,但存在安全风险。
  • HTTPS提供了更高的安全性,通过加密、身份验证和数据完整性保证,适合传输敏感信息,是现代Web开发的首页协议。

虚拟列表

虚拟列表是一种用于优化列表渲染性能的技术,当需要显示大量数据时,他只渲染用户当前可见的部分内容,而不是一次性渲染整个列表。这种方式可以减少DOM元素数量,提升页面渲染速度和滚动性能。

核心原理:

  • 视口内加载:仅加载并渲染出现在用户视口中的列表项。
  • 动态更新:当用户滚动时,新的可见项被渲染,超出视口的项则被移除。
  • 占位策略:保持滚动条的正常显示,保证用户可以顺畅滚动。

适用场景:

  • 数据量很大的列表或表格。
转载自:https://juejin.cn/post/7426298186791059467
评论
请登录