web前端面试题总结

泉水中的Luna
121 阅读8分钟

1.vue2 vue3的区别

vue3新特性：
  • 性能的提升
  • Tree-shaking 支持（tree shaking的作用是把项目中没必要的代码全部抖落掉，消除被引用，删除没被调用的无用模块代码，该优化最终实现的是代码体积的减少，也属于项目性能优化的一部分。）
  • Composition API
  • 更好的 TS 支持（ts和js的区别）点击链接查看区别+学习
  • 自定义渲染 API
vue3性能方面的优化：
  • 引入 tree-shaking 的技术，减少打包体积
  • 数据劫持优化，使用 Proxy 代替 defineProperty 实现数据响应式。
  • 由于改进了补丁算法，将避免不必要的 parent/children 重新渲染
  • 输出代码将更易于针对 JavaScript 编译器进行优化
  • 输出代码将会更好地优化

SPA单页面应用与多页面应用

  • 多页面：每次页面发生跳转，后台都会返回一个新的html
  • 单页面：用vue写的项目就是单页面应用，刷新页面会请求一个html文件，切换页面的时候，并不会发起新的请求 只是页面的内容发生了变化。
多页面优缺点：

首屏加载时间快 seo效果好/但是页面切换慢

单页面优缺点：

页面切换快，首屏加载时间慢 seo差

补充：SEO是搜索引擎优化的意思

npm淘宝镜像

由于 npm 的服务器位于国外, 所以一般建议 将 npmm 设置成国内的淘宝镜像

  • $ npm config set registry registry.npm.taobao.org/ #设置淘宝镜像地址
  • $ npm config get registry #查看镜像地址

图片懒加载

（一个页面上有大量的图片，加载很慢，你有哪些方法优化这些图片的加载，给用户更好的体验？）

  • 图片懒加载：在页面上不可见的区域添加一个滚动条事件，显示在屏幕之外的图片默认不加载，随着页面的滚动，图片进入了显示的范围，则触发图片的加载显示
  • 这样做的好处，一是页面加载速度快(浏览器进度条和加载转圈很快就结束了，这样用户的体验也比较好)，而是节省流量，因为不可能每一个用户会把页面从上到下滚动完
图片懒加载的原理

存储图片的真实路径，把图片的真实路径绑定给一个以data开头的data-url即可，页面中的img元素，如果没有src属性，浏览器就不会发出请求去下载图片（没有请求就提高了性能）

原型链和原型的理解

  • JavaScript 的函数对象中都包含了一个” prototype”内部属性，这个属性所对应的就是该函数对象的原型。 prototype作为函数对象的内部属性，不能被直接访问。
  • 为方便查看一个对象的原型，Firefox 和 Chrome 内核的 JavaScript 引擎中提供了”proto“这个非标准的访问器 原型的主要作用就是为了实现继承与扩展对象

原型链：

当访问一个对象的某个属性时，会先在这个对象本身属性上查找，如果没有找到，则会去 它的__proto__隐式原型上查找，如果还没有找到就会再在构 造函数的 prototype 的__proto__中查找，这样一层一层向上查找就会形成一个链式结构，称为原型链。

特点： JavaScript 对象是通过引用来传递的，我们创建的每个新对象实体中并没有一份属于自己的原型 副本。当我们修改原型时，与之相关的对象也会继承这一改变

变量提升原理：

  • 原理：JS引擎的工作方式是先解析代码，获取所有被声明的变量，然后运行，也就是预处理和执行两个阶段
  • 定义：所有变量的声明语句都会被提升到代码头部，这就是变量提升。

函数提升：

  • 函数提升只会提升函数声明式写法，函数表达式的写法不存在函数提升
  • 函数提升的优先级大于变量提升的优先级，即函数提升在变量提升之上

常见的 js 中的继承方法有哪些

ES5 继承有以下六种方法：
  1. 原型链继承
  2. 借用构造函数继承
  3. 组合继承
  4. 寄生式继承
  5. 寄生组合式继承
  6. 型式继承

ES6 继承有以下六种方法：

git常用方法：

  1. image.png
2. git的作用：
  1. 在工作目录中修改某些文件
  2. 对修改后的文件进行快照，然后保存到暂存区域
  3. 提交更新，将保存在暂存区域的文件快照永久转储到 git 目录中
常见的git指令：
  1. git branch -a 查看所有分支
  2. git clone克隆代码
  3. git pull origin master 拉取线上 master 最新代码
  4. git checkout dev:切换到开发分支
  5. 合并master本地分支git merge master
  6. 查看当前文件更改的状态git status
  7. 将缓存区内容添加到仓库 git commit -m "添加注释"
  8. 上传代码 git push origin dev
  9. 切换到分支master git checkout master
  10. 拉取 master 最新分支:git pull origin master
  11. 代码上线后，用 tag 标签标记发布结点(命名规则：prod_+版本_+上线日期) git tag -a prod_V2.1.8_20200701
  12. 将tag标签推到gitLab :git push origin prod_V2.1.8_20200701
缓存区的应用：
  1. 需要合并别人的代码进来
  2. 把自己的代码放入暂存git stash
  3. 若需要释放出来用 git stash pop 恢复最近一次的暂存
  4. 查看有哪些队列：git stash list
  5. 删除队列 git stash drop stash@{0}
补充指令：

Webpack：

  • Webpack 是一个打包模块化 javascript 的工具，在 Webpack 里一切文件皆模块，通过 loader 转换文件，通过 plugin 注入钩子，最后输出由多个模块组合成的文件

如何进行前端性能优化？

  1. 减少 http 请求（合并 JavaScript 和 CSS 文件、图片懒加载）
  2. 减少对dom操作（修改和访问 DOM 元素会造成页面的重绘和重排 所以需要合理的使用 JavaScript 变量储存内容，考虑大量 DOM 元素中循环的性能开销， 在循环结束时一次性写入，减少对 DOM 元素的查询和修改，查询时可将其赋值给局部变量）
  3. 使用JSON（轻量级数据交换格式）格式来进行数据交换（JSON 是 JavaScript 原生格式，在 javaScript 中处理 JSON 数据不需要任何特殊的 API 或工具包。）
  4. 高效使用HTML标签和CSS样式
  5. CDN加速
  6. 将CSS和JS放在外部文件引用 CSS放在头部 JS尾部
  7. 精简CSS和JS文件
  8. 压缩图片和使用用图片Sprite 技术

JS常用方法总结

  • toString()把数组转化为字符串
  • join()把数组转化为字符串，并且可以规定分隔符
  • pop()方法从数组中删除最后一个元素
  • push() 方法（在数组结尾处）向数组添加一个新的元素
  • shift() 方法会删除首个数组元素
  • unshift() 方法（在开头）向数组添加新元素
  • splice() 方法可用于向数组（添加/删除）元素 第一个参数定义了应添加新元素的位置（拼接）。 第二个参数（0）定义应删除多少元素。其余参数（“Lemon”，“Kiwi”）定义要添加的新元素。
  • concat() 合并（连接）现有数组来创建一个新数组
  • slice() 方法用数组的某个片段切出新数组（有两个参数，分别是下标）
  • sort() 方法以字母顺序对数组进行排序（默认都是升序）
  • reverse() 翻转数组中的元素（原来的顺序反过来）
  • Math.max()返回一组数中的的最大值
  • Object.assign()合并两个或多个object
  • map()方法返回一个新数组，数组中的元素为原始数组元素调用函数处理后的值

ES6新特性

1.symbol（Symbol 通过调用 symbol 函数产生，它接收一个可选的名字参数）

2. let和const（仅在块级作用域内有效，var是全局的，let与const不存在变量提升，let与const不能在同一块级作用域内重复声明，var可以重复声明）

3.解构赋值它是一种针对数组或者对象进行模式匹配，然后对其中的变量进行赋值。数组，字符串对象，以及ES6新增的Map和Set类型都可以解构赋值。

Promise setTimeout、Promise、Async/Await 的区别是什么？

  • setTimeout： 是异步执行函数，当 js 主线程运行到此函数时，不会等待 settimeout 中的回调函数，会直接进行 settimeout 下面的语句
  • Promise：① 三种状态：pending（进行中）、fulfilled（已成功）、rejected（已失败）② 原型上有 then、catch 等方法 ③ 状态一旦改变，就不会再变，任何时候都可以得到这个结果，这时可以称为 resolved （已定型）Promise 本身是同步的立即执行函数,当在执行体中执行 resolve()或者 reject()的时候，此时是异步操作，会先执行 then/catch(异步执行)，等主栈完成后，才 会去执行 resolve()/reject 中的方法

深拷贝浅拷贝

浅拷贝只复制指向某个对象的指针，而不复制对象本身，新旧对象还是共享同一块 内存。 深拷贝会另外创造一个一模一样的对象，新对象跟原对象不共享内存，修改新对象 不会改到原 对象。

深拷贝方法：

① 递归拷贝 ② 使用 Object.create()方法 ③ jquery 有提供一个$.extend 也可以实现 ④ 函数库 lodash，也有提供 cloneDeep 用来实现

Event Loop（事件循环）机制

js是单线程（假如不是，会带来很多复杂的同步问题，避免复杂）目前js主要的运行环境有两个（浏览器事件循环和node.js事件循环）

浏览器的事件循环又分为同步任务和异步任务
  • 同步任务：在主线程上排队执行
  • 异步任务：分为宏任务和微任务(在任务队列中，队列遵循先进先出原则)
  • 宏任务：script(整体代码)、setTimout、setInterval、setImmediate
  • 微任务：new promise().then(回调)、process.nextTick
  • 先微任务后宏任务

路由有哪些模式？

  1. hash:只能改变锚点后面的url片段，url改变的时候，页面不会重新加载（浏览器会记录所有发生变化的url 前进和后退都可以使用）
  2. history模式：会将url修改的和正常请求后端的url一样，会导致浏览器向后台发送请求，而hash模式不会向后台发送请求，history模式下，前进和后退并不会使得页面状态改变！

vue的路由跳转方式有哪些？

  1. router-link跳转 不带参数： ：to="{}" 带参数：

image.png

image.png 2.this.$router.push()跳转 需要在函数中调用

avatar
文章
阅读
粉丝