前端面试题6

最新推荐文章于 2023-08-14 17:09:28 发布

Cheryl71

最新推荐文章于 2023-08-14 17:09:28 发布

阅读量238

点赞数

分类专栏：前端面试题

本文链接：https://blog.csdn.net/Day71/article/details/118771060

版权

前端面试题专栏收录该内容

12 篇文章 2 订阅

订阅专栏

map
https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/map
promise
https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Promise
diff算法
react生命周期

1.初始化阶段

constructor：构造函数，最先被执行，通常在构造函数中初始化 state 对象或者给自定义方法绑定 this
getDerivedStateFromProps：static
getDerivedStateFromProps(nextProps, prevState)，这是个静态方法，当我们接收到新的属性想去修改我们 state，可以使用getDerivedStateFromProps。
render：
render 函数是个纯函数，只返回需要渲染的东西，不应该包含其他的业务逻辑，可以返回原生 DOM、React 组件、Fragment、Portals、字符串和数字等内容。
componentDidMount：组件装载之后调用，此时我们可以获取到DOM 节点并操作，比如对 Canvas、SVG 等操作。服务器请求、订阅都可以写这个里面，但是记得在componentWillUnmount 中取消订阅。

2.运行中阶段

getDerivedStateFromProps：此方法在更新阶段也会被调用。
shouldComponentUpdate：
shouldComponentUpdate(nextProps,nextState)，有两个参数，表示新的属性和变化之后的 state，返回一个布尔值。
如果是 true 表示会触发重新渲染，false表示不会触发重新渲染，默认返回 true。可以利用这个生命周期来优化 React 程序性能。
render：同挂载阶段 render。
getSnapshotBeforeUpdate：
getSnapshotBeforeUpdate(prevProps, prevState)，这个方法会在 render 之后，componentDidUpdate 之前调用，有两个参数，表示之前属性和之前的 state。这个函数有一个返回值，会作为第三个参数传给 componentDidUpdate，如果不需要返回值，可以返回 null，这个方法必须和 componentDidUpdate 配合使用。
componentDidUpdate：
componentDidUpdate(prevProps, prevState, snapshot)，在 getSnapshotBeforeUpdate 之后调用，有三个参数，表示之前的 props，之前的state，以及 snapshot。参数 snapshot getSnapshotBeforeUpdate
返回的，如果触发某些回调函数时需要用到 DOM 元素的状态，则将对比或者计算过程迁移到getSnapshotBeforeUpdate，然后在 componentDidUpdate 中统一触发回调或者更新状态。

3.销毁阶段
当组件被销毁之前的一刹那，会触发componentWillUnmount，做一些善后工作比如说你切换路由的时候上一个路由还在请求数据但是你已经销毁了那个组件这个时候就会警告你不能对已经已经销毁的组件获取数据，所以就可以设置一个开关当销毁的时候停止获取数据

4.错误处理
当渲染过程，生命周期，或子组件的构造函数中抛出错误时，会调用如下方法:
static getDerivedStateFromError()
componentDidCatch()

原型链

原型
①所有引用类型都有一个__proto__(隐式原型)属性，属性值是一个普通的对象
②所有函数都有一个prototype(原型)属性，属性值是一个普通的对象
③所有引用类型的__proto__属性指向它构造函数的prototype

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

es6
菜鸟教程
w3c

1、W3C标准不是一个标准，而是一系列标准的集合，包含三部分的标准：结构标准、表现标准和动作标准。与结构标准对应的代表语言是HTML，与表现标准对应的代表语言是CSS，与动作标准对应的代表语言是JavaScript。
2、HTML是网页内容的载体。内容就是网页制作者放在页面上想要让用户浏览的信息，可以包含文字、图片、视频等。
3、CSS样式是表现。就像网页的外衣。比如，标题字体、颜色变化，或为标题加入背景图片、边框等。所有这些用来改变内容外观的东西称之为表现。
4、JavaScript是用来实现网页上的特效效果。如：鼠标滑过弹出下拉菜单或鼠标滑过表格的背景颜色改变。可以这么理解，有动画的，有交互的一般都是用JavaScript来实现的。

前端框架和生态圈
ssr流程
server side rending
服务器渲染，有服务器进行渲染并返回给客户端渲染完成的html
优点：超快的响应速度，易做seo
缺点：增加服务器压力
vue websocket打包
webpack

webpack 是一个现代 JavaScript 应用程序的静态模块打包器 (module bundler) 。当 webpack 处理应用程序时，它会递归地构建一个依赖关系图 (dependency graph) ，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个 bundle 。
webpack 主要有四个核心概念:

入口 (entry)
输出 (output)
loader
插件 (plugins)

spa单页面

单页面web应用，通俗易懂就是整个网站由一个html构成，
优点：服务器压力小，响应速度快
缺点：难以进行搜索引擎优化，首屏打开速度很慢，因为需要一次性加载多种依赖包

object.defineProperty

Object.defineProperty() 方法会直接在一个对象上定义一个新属性，或者修改一个对象的现有属性，并返回此对象。
object.defineProperty

css布局
冒泡
html5， css3新特性
浏览器的渲染过程

浏览器渲染的过程主要包括以下五步：

浏览器将获取的HTML文档解析成DOM树。
处理CSS标记，构成层叠样式表模型CSSOM(CSS Object Model)。
将DOM和CSSOM合并为渲染树(rendering tree)，代表一系列将被渲染的对象。
渲染树的每个元素包含的内容都是计算过的，它被称之为布局layout。浏览器使用一种流式处理的方法，只需要一次绘制操作就可以布局所有的元素。
将渲染树的各个节点绘制到屏幕上，这一步被称为绘制painting。
需要注意的是，以上五个步骤并不一定一次性顺序完成，比如DOM或CSSOM被修改时，亦或是哪个过程会重复执行，这样才能计算出哪些像素需要在屏幕上进行重新渲染。而在实际情况中，JavaScript和CSS的某些操作往往会多次修改DOM或者CSSO

null是一个表示"无"的对象，转为数值时为0；undefined是一个表示"无"的原始值，转为数值时为NaN。

object.assign()方法

Object.assign() 方法用于将所有可枚举属性的值从一个或多个源对象分配到目标对象。它将返回目标对象。

搜索引擎优化

搜索引擎优化（search engine optimization）简称SEO，是一种透过了解搜索引擎的运作规则来调整网站，以提高目的网站在有关搜索引擎内排名的方式

v-model原理
v-model的实现原理
v-model其实是个语法糖，它实际上是做了两步动作：
1、绑定数据value
2、触发输入事件input
js改变样式宽度

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .w1 {
      width: 100px;
      height: 100px;
      background: orange;
      margin: 0 auto;
    }
  </style>
</head>

<body>
  <div class="w1"></div>
  <div>
    <button id="btn">click me</button>
    <button id="btn2" onclick="removeStyle()">dont click me</button>
  </div>
  <script>
    var s = document.getElementById("btn");
    function editwidth() {
      console.log(1);
      let obj = document.querySelector('.w1');
      obj.style.width = "200px";
      obj.style.height = "200px";
      console.log(2);
    };
    function removeStyle() {
      console.log(3);
      let obj = document.querySelector('.w1');
      obj.style.width = "100px";
      obj.style.height = "100px";
      console.log(4);
    };
   	s.onclick = editwidth;
    s.addEventListener('click', editwidth);
  </script>
</body>

</html>

回流、重绘

页面加载时，浏览器把html代码解析成1个dom树，把所有样式(用户定义的CSS和用户代理)解析成样式结构体
DOM Tree 和样式结构体组合后构建render tree
当render tree中的一部分(或全部)因为元素的规模尺寸，布局，隐藏等改变而需要重新构建。这就称为回流(reflow)
当render tree中的一些元素需要更新属性，而这些属性只是影响元素的外观，风格，而不会影响布局的，比如background-color。则就叫称为重绘。

js中的new

(1) 创建一个新对象
(2) 将构造函数的作用域赋给新对象（因此 this 就指向了这个新对象）
(3) 执行构造函数中的代码（为这个新对象添加属性
(4) 返回新对象。

ie: 不包含margin，
标准：包含margin

为什么要语义化？
代码结构: 使页面没有css的情况下，也能够呈现出很好的内容结构
有利于SEO: 爬虫依赖标签来确定关键字的权重，因此可以和搜索引擎建立良好的沟通，帮助爬虫抓取更多的有效信息
提升用户体验：例如title、alt可以用于解释名称或者解释图片信息，以及label标签的灵活运用。
便于团队开发和维护: 语义化使得代码更具有可读性，让其他开发人员更加理解你的html结构，减少差异化。
方便其他设备解析: 如屏幕阅读器、盲人阅读器、移动设备等，以有意义的方式来渲染网页。

动态路由
$set和 $nextTick
websocket，webworker
inject和provide
array.some filter map foreach
let const var
字符串去空格
trim
react特性、生命周期、优势
数据类型

请注意：JS的数据类型有8种。
在ES5的时候，我们认知的数据类型确实是 6种：Number、String、Boolean、undefined、object、Null。
ES6 中新增了一种 Symbol 。这种类型的对象永不相等，即始创建的时候传入相同的值，可以解决属性名冲突的问题，做为标记。
谷歌67版本中还出现了一种 bigInt。是指安全存储、操作大整数。（但是很多人不把这个做为一个类型）。

react和vue的区别
整体功能相似，组件化，设计思路不同。
react整体是函数式思想，把组件设计成纯组件，单项数据流。React 数据经常变化，构建大型项目内复杂组件。
vue:更小更灵活的开发SPA单页面程序的简单化组件。
React :创建可重用且有吸引力的UI组件的库
Vue:开源js框架.可以用作Web应用程序框架，允许构建可重用。可以随时添加组件
React :只有css可重用，虚报DOM.
Reaet.native成熟且泛使用的本机渲染应用程序平台.可用作开发SPA单页面式移动应用程序的基础、有状态所姐件，虚拟dom，jsx。超越html的架构. CRA。
Vue:重用性更高,基于虚拟DOM的HTML模板: vue-cli将应用程序划分成小可重用独立组件、路由和集成
React和Vue的选择
Vue:更小更快更灵适，需要丰富的html模板，最新文档和最简单的语法.
React:构建的移动应用程序，构建大型应用程序，轻量级易于版本迁移。
深拷贝、浅拷贝
深拷贝只是增加一个指针执行已有的内存地址，会随之改变，深拷贝增加指针并申请新内存，使指针指向新内存。浅拷贝是指被复制的内存地址，深拷贝是开辟一块新的内存地址，用于复制对象。
浅拷贝实现方法：1.使用递归的方式，2.用了json对象，3.用了jq的$extend方法实现
对象继承
包括原型链继承，组合继承，构造函数继承，寄生式组合继承
node，express启动服务

//1.创建名为app.js的文件
mkdir myapp
//2.使用 npm init 命令为应用程序创建 package.json 文件
npm init
//3.安装express
npm install express --save
//4.在 myapp 目录中，创建名为 app.js 的文件，然后添加以下代码：
const express = require('express')
const app = express()
const port = 3000

app.get('/', (req, res) => {
  res.send('Hello World!')
})

app.listen(port, () => {
  console.log(`Example app listening at http://localhost:${port}`)
})

vuex

vuex主要包括
state：用于存放全局变量，
getters：衍生状态，类似于组建中的computed，
mutations：唯一可以更改状态的方法，所有更改数据操作都需要经过mutaions，且只能进行同步的状态修改，
actions：使所有异步更改状态的集中，主要用于区分mutations，利于状态的维护，state和getters都是响应式的，当某一个状态改变时，能够驱动试图发生相应的改变

v-if， v-for哪个优先级更高

显然 v-for优先级高于v-if；
两者同级出现，每次渲染都会先执行循环再判断条件，无论如何循环都不可避免的浪费性能；
避免出现这种情况，可在外层嵌套一层进行v-if判断，然后在内部进行v-for循环；
如果条件出现在循环内部，可通过计算属性提前过滤掉那些不需要显示的项，减少dom操作；

v-if, v-show区别

显示来看v-if 是“真正的”条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建；而v-show 不管初始条件是什么，元素总是会被渲染，并且只是简单地基于 CSS 进行切换。
一般来说， v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件不太可能改变，则使用 v-if 较好。

http缓存机制
原型链
echarts地图再作业
uni-app打包小程序只打包了微信小程序吗
react用的哪个版本
未知元素width， height，居中元素的几种方法
require和import的区别
Watch/computed 在哪个周期创建完成，有什么区别
active/disactive
query/params
回流重绘
数据类型，判断数据类型的方法
Js递归的理解
Spa优缺点
强缓存，协商缓存

Cheryl71

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
3
评论
前端面试题6

mappromisediff算法react生命周期原型链es6w3c前端框架和生态圈ssr流程server side rending服务器渲染，有服务器进行渲染并返回给客户端渲染完成的html优点：超快的响应速度，易做seo缺点：增加服务器压力vue websocket打包webpackspa单页面单页面web应用，通俗易懂就是整个网站由一个html构成，优点：服务器压力小，响应速度快缺点：难以进行搜索引擎优化，首屏打开速度..
复制链接

扫一扫

专栏目录