前端面试常见问题

ops/2024/12/23 7:24:58/

CSS

盒模型和box-sizing

​ 内容(content)，内边距(padding)，边框(border)，外边距(margin)

​ 标准：box-sizing: content-box; widtd=content

​ 怪异：box-sizing: border-box; width= content+padding +border（推荐）

清除浮动
  1. 使用空标签清除浮动
    在浮动元素后面添加一个空标签，并为其应用样式clear: both;
<div class="container">  <div class="float-box"></div>  <div style="css language-css">clear: both;"></div>  
</div>
  1. 使用CSS伪元素清除浮动
    使用:after伪元素在父容器的内容后面添加一个看不见的块级元素，并为其应用clear: both;样式。
css">.container::after {  content: "";  display: table;  clear: both;  
}
  1. 使用BFC清除浮动
    为父元素设置
css">.container{overflow: auto/flow-root/hidden;
}
position定位居中

  1. 已知宽高，绝对定位+margin

    css">.box { position: relative }.center {position: absolute;top: 50%;left: 50%;height:xxx;width:xxx;margin-top: -height/2;margin-left: -width/2;}

  2. 已知宽高，绝对定位+margin

    .box { position: relative	}.center {position: absolute;top: 0; left: 0; bottom: 0; right: 0;width: 200px;height: 200px;margin: auto;		
}

  3. 未知宽高，绝对定位+transform

    .box{ position: relative }.center{position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%);
}

  4. 未知宽高，flex+margin

    .box { display: flex }.center{ margin: auto }
块级格式化上下文 BFC

Block formatting context 块级格式化上下文，可以看做是元素的一种属性，当元素拥有这一种属性之后，会形成独立的渲染区域，内部元素的渲染不会影响到外界

开启BFC的条件：

  1. 根元素（<html>）
  2. 浮动元素（float不为none)
  3. 绝对定位元素（元素的position为absolute 或 fixed)
  4. display为inline-block、table-cell、table-caption、table、table-row、table-row-group、table-header-group、table-footer-group、inline-table、flow-root、flex或 inline-flex、grid 或inline-grid
  5. overflow值不为visible的块元素
  6. contain值为layout、content 或 paint的元素
  7. 多列容器（元素的column-count或 column-width 不为 auto，包括column-count为1）

BFC的作用：

  • 清除子元素浮动带来的影响
  • 清除默认合并块元素的上下外边距
  • 阻止元素被浮动元素覆盖
堆叠上下文

堆叠上下文决定了元素及其子元素在z轴（垂直于屏幕方向）上的显示顺序。当元素的定位属性（position）为relative、absolute、fixed或sticky时，该元素会生成新的堆叠上下文。在一个堆叠上下文中，元素按照其堆叠顺序（通过z-index属性指定）进行堆叠

css_133">scss定义全局变量

​ Vue下定义全局变量：通过（$）定义变量，并在【main.js】或【App.vue】中引入

JavaSrcipt

ES6+ 常用新语法和新特性

  1. 新语法

    • 箭头函数：更简洁的语法来定义函数，不绑定自己的this值，更方便地处理回调函数和this指向问题

    • 模板字符串： 使用反引号（`${}`）来定义字符串，可以在其中插入变量或表达式

    • 解构赋值：通过解构赋值从数组或对象中提取数据，赋值给变量

    • 扩展运算符：（…）用于数组和对象的展开。

    • 默认参数和剩余参数：使得函数参数的处理更加灵活

    • let 和 const 声明：替代 var 关键字，提供了块级作用域，并且 const 声明的变量是不可变的

  2. 新特性

    • Promise：异步编程的一种解决方案，用于处理异步操作，避免了回调地狱

    • async/await：async声明函数为异步函数 ，之后函数内部可以使用 await 来等待 Promise 的请求结果

    • Map 和 Set: 提供了更加灵活的键值对存储和集合操作

    • 模块化 (Module)：ES6 引入了模块化的概念，使用 import 和 export 关键字来导入和导出模块

作用域和作用域链

  • 作用域：指的是变量的可访问范围，JavaScript 中有全局作用域和局部作用域。

  • 作用域链：当你要访问一个变量时，首先会在当前作用域下查找，如果当前作用域下没有查找到，则向上一级作用域进行查找，直到找到全局作用域，这个查找过程形成的链条叫做作用域链。

  • **作用：**起到隔离变量，防止冲突

原型和原型链

原型：每个对象都有一个原型，可以通过原型实现继承和共享属性

原型链：当试图访问一个对象的某个属性时，JS引擎会首先在该对象自身的属性中查找，如果没有找到，就会去它的原型对象上查找，如果还是没找到，就会继续去原型的原型上查找，直到找到为止或到达原型链的末尾（即Object.prototype）。这个过程中这种隐式的链条就构成了原型链。

Person.prototype = {height : 1400，lang : 4900
}
function Person (width){this.width = width
}
var person1 = new Persion(200)Person.prototype === person1.__proto__
闭包

​ 当内部函数被保存到外部时，将会生成闭包。闭包会导致原有作用域链不释放，造成内存泄露。

​ 作用：可以读取函数内部的变量，让这些变量的值始终保持在内存中。

function text(){var a = 1return function log(){console.log(a)}
}
text（）//如此，便通过return的方式把log函数就被保存下来了
网络请求二次封装

​ 将网络请求操作进行封装，以提高代码复用性和可维护性，根据项目的需求和实际情况进行调整和扩展

  • 封装 HTTP 请求库: 可以使用现有的 HTTP 请求库（如 Axios、Fetch 等）进行封装，添加统一的请求拦截器和响应拦截器，处理公共逻辑（如添加 token、错误处理等）。
  • 统一错误处理: 将网络请求的错误统一处理，可以根据不同的错误码或错误类型进行相应的处理，如提示用户、重新请求等。
  • 封装请求函数: 将不同类型的请求（如 GET、POST、PUT、DELETE 等）封装成函数，方便调用和管理。
  • 设置默认配置: 可以设置默认的请求配置，如基础 URL、超时时间、请求头等，减少重复代码。
  • Promise 封装: 将网络请求封装成 Promise，使得可以使用 async/await 或者 Promise 的链式调用来处理异步操作。
防抖、节流

​ 在实际开发过程中，可以通过lodash库的debounce（防抖）和throttle（节流）来现实

  • 防抖：只执行最后一次，如：根据输入框输入的内容，实时不断的从数据库或本地检索结果，由于输入内容在不断的变化，这个检索的结果也在不断的更新。但是本质上我们的内容还没有真正的输入完，所以需要等待一定的时间来判定我们的内容已经输入完毕。在这个时间的倒计时为0的这一段时间内，我们的内容发生变化，这个时间又重置为初始值，当初始值不为0时，不执行操作。

    • 应用场景：搜索框实时搜索、文本编译器实时保存等

    • 代码实现

      let timerId = null
function fn () {if (timer1d !== null){clearTimeout(timerId)}timerId = setTimeout(() =>{consgle.log( ... )},1000)
}

  • 节流：在设定的一段时间内只执行一次，如：我们通过不断点击按钮来请求数据，这样就会极大的耗费服务器资源，还会造成页面堵塞等。假设，这时我们设定时间为2s，在距离上一次执行的时间不到2s，那这个时间段内的请求我们在前端直接驳回，不让他执行。

    • 应用场景

      • 高频事件：快速点击、鼠标滑动、resize事件（像素）、scroll事件（像素）等

      • 下拉加载、图片懒加载

      • 视频播放记录时间

    • 代码实现

      let timerId = null
function fn() {if (timerId !== null) returntimerId = setTimeout(() =>{console.log( ... )timerId = null},100)
}
清除字符串前后的空格
trs.trim();  存在小部分不兼容
数组去重
let arr1 = [...new Set(arr)]
数组倒序
let arr1 = arr.reverse()

浏览器

回流和重绘

  • 回流：浏览器为了重新渲染部分或整个页面而重新计算元素的位置和几何结构的过程。回流必定会引起重绘。

  • 重绘：是指当元素的外观发生变化，但不影响布局的情况下，浏览器会重新绘制这些元素的过程。

  • 如何避免：

    • 减少对 DOM 的操作，合并多次修改样式或者属性的操作

    • 使用 CSS 动画代替 JavaScript 操作样式

    • 改变子元素样式尽可能不要影响父元素和兄弟元素的大小和尺寸

storage存储

​ sessionStorage：用于本地存储一个会话中的数据，这些数据同一会话中的页面才能访问，且会话结束后数据销毁。

​ localStorage：用于持久化的本地存储，除非主动删除数据，否则数据是永远存在。

浏览器渲染原理
  1. 解析HTML：浏览器从服务器接收HTML文档，然后解析成一个DOM（文档对象模型）树。
  2. 解析CSS：浏览器解析CSS样式，生成CSSOM（CSS对象模型）树。
  3. 合并DOM和CSSOM：浏览器将DOM和CSSOM合并成一个渲染树（Render Tree）。这个树只包含需要显示在页面上的节点和样式。
  4. 布局：浏览器根据渲染树中每个节点的样式信息，计算其在屏幕上的确切位置和大小。
  5. 绘制：浏览器遍历渲染树，将每个节点转换成屏幕上的实际像素。
  6. 合成与显示：浏览器将各层的像素信息发送给GPU，GPU将这些信息合成并显示在屏幕上。
跨域

  • 跨域：请求url的协议、域名、端口任意一个与当前页面url不同

  • 同源策略：浏览器不允许非同源的 URL 之间进行资源的交互 ，简称不允许跨域

  • 解决方案：前端开发阶段可通过设置proxy反向代理，跨域一般由后端处理

V8 垃圾回收机制

​ V8 是 Google Chrome 浏览器使用的 JavaScript 引擎，它采用了垃圾回收机制来管理内存。V8 使用分代垃圾回收算法，将内存分为新生代和老生代两个区域，通过不同的策略对不同区域的对象进行垃圾回收。常见的垃圾回收算法包括标记清除、标记整理等。

Vue2和Vue3

Vue2和Vue3的区别

  1. 性能提升

    • 重写虚拟DOM的实现

    • 编译器优化：Vue 3 的编译器进行了优化，生成的代码更加紧凑和高效

    • Tree-shaking 支持：Vue 3 提供了更好的 Tree-shaking 支持，可以更好地优化打包后的代码

  2. Composition API

    • Vue3新增 Composition 组合式API：允许开发者根据逻辑组织代码，而不是按照选项分散编写
    • Vue2选项式API

  3. TypeScript 支持

    • 原生支持 TypeScript：Vue 3 对 TypeScript 的支持更加完善

  4. 响应式系统

    • Proxy 替代 Object.defineProperty：Vue 3 使用 Proxy 替代了 Vue 2 中的 Object.defineProperty

  5. Fragment

    • Fragment 支持：Vue 3 支持了 Fragment，可以在模板中使用 <template> 标签来包裹多个根节点

  6. 更小的体积

    • 体积优化：Vue 3 的体积相比 Vue 2 有所减小，打包后的代码更加精简

  7. 其他改进

    • 新的生命周期钩子：Vue 3 新增了一些生命周期钩子，如 beforeUnmount

    • 全局 API 的修改：一些全局 API 发生了修改，如 Vue.observable 替代了 Vue.set 和 Vue.delete

构建工具

Vue.js 2 的构建工具 Vue CLI 是基于 Webpack 的。Vue CLI 提供了一套基于 Webpack 的开发环境和构建流程，用于快速搭建和开发 Vue.js 项目。

Vue.js 3 的构建工具 Vite，则不是基于 Webpack，而是一种新型的构建工具。Vite 旨在提供更快的开发体验，它使用了现代的 ES 模块原生支持和开发服务器的优化，通过利用浏览器原生的模块化支持来消除热更新的等待时间，从而提供了极速的开发启动和热更新速度。


http://www.ppmy.cn/ops/2018.html

相关文章

js 使用Object.toString.call()判断数据类型

js 使用Object.toString.call()判断数据类型

使用Object.toString.call()判断数据类型 使用Object.toString.call()可以用来判断: 判断基本数据类型 判断复杂数据类型 判断null和undefined 需要注意的是&#xff0c;Object.prototype.toString 方法返回的字符串格式为 “[object 数据类型]”&#xff0c;其中数据类型和 J…
阅读更多...
分布式快照算法 Chandy-Lamport

分布式快照算法 Chandy-Lamport

0. 引言 上一篇文章最后说到 Spark 的 Structured Streaming 的 Continuous Processing Mode 的容错处理使用了分布式快照&#xff08;Distributed Snapshot&#xff09;算法 Chandy-Lamport 算法&#xff0c;那么分布式快照算法可以用来解决什么问题呢&#xff1f; A snapsho…
阅读更多...
黄金投资对于普通人来说难吗？

黄金投资对于普通人来说难吗？

黄金&#xff0c;自古以来就被视作财富的象征。在投资市场上&#xff0c;黄金投资更是备受关注的话题。然而&#xff0c;对于普通人来说&#xff0c;黄金投资是否真的难呢&#xff1f;实际上&#xff0c;只要掌握了正确的方法和策略&#xff0c;普通人完全有可能在黄金投资中取…
阅读更多...
注意力机制基本思想（一）

注意力机制基本思想（一）

​&#x1f308; 个人主页&#xff1a;十二月的猫-CSDN博客&#x1f525; 系列专栏&#xff1a; &#x1f3c0;《深度学习基础知识》 相关专栏&#xff1a; ⚽《机器学习基础知识》 &#x1f3d0;《机器学习项目实战》 &#x1f94e;《深度学习项目实战…
阅读更多...
【LeetCode每日一题】706. 设计哈希映射

【LeetCode每日一题】706. 设计哈希映射

文章目录 [706. 设计哈希映射](https://leetcode.cn/problems/design-hashmap/)思路&#xff1a;链地址法代码&#xff1a;思路&#xff1a;静态数组代码&#xff1a;思路&#xff1a;开放地址法代码&#xff1a; 706. 设计哈希映射 思路&#xff1a;链地址法 代码&#xff1a…
阅读更多...
Java 算法篇-深入了解 BF 与 KMP 算法

Java 算法篇-深入了解 BF 与 KMP 算法

&#x1f525;博客主页&#xff1a; 【小扳_-CSDN博客】 ❤感谢大家点赞&#x1f44d;收藏⭐评论✍ 文章目录 1.0 BF 算法概述 1.1 BF 算法实际使用 2.0 KMP 算法概述 2.1 KMP 算法实际使用 2.2 相比于 BF 算法实现&#xff0c;KMP 算法的重要思想 2.3 为什么要这样设计&#x…
阅读更多...
查看apk是64位32位（三种方法）

查看apk是64位32位（三种方法）

通过检查APK文件&#xff0c;你可以确定该APK支持的架构类型&#xff0c;包括它是为64位&#xff08;例如arm64-v8a、x86_64&#xff09;还是32位&#xff08;例如armeabi-v7a、x86&#xff09;架构准备的。Android应用程序可以包含多个不同的二进制文件&#xff0c;每个文件针…
阅读更多...
基于Python网络招聘数据可视化分析系统的设计与实现

基于Python网络招聘数据可视化分析系统的设计与实现

基于Python网络招聘数据可视化分析系统的设计与实现 Design and Implementation of Python-based Network Recruitment Data Visualization Analysis System 完整下载链接:基于Python网络招聘数据可视化分析系统的设计与实现 文章目录 基于Python网络招聘数据可视化分析系统的…
阅读更多...
最新文章

Copyright @ 2022~2023