华为od前端面试题

目次
es6新特性
闭包及其应用场景
防抖节流
HTTP强缓存和协商缓存
Promise的三种状态
Vue-router的两种模式
宏任务和微任务
Js的缺点
数据范例
异步、变乱循环
原型
继承
xss和csrf是什么，怎样防御
讲讲vue框架
讲讲css
数组和字符串有哪些方法
Let和var
对http有哪些了解？
Js分片具体怎么做
懒加载的原理
哪些方法能脱离文档流
垂直居中有哪些方法
Js中堆和栈的储存方式
箭头函数和平凡函数区别
v-model原理
vue响应式原理
vue组件通讯
diff算法
webpack打包配置
欣赏器输入url到网页出现的过程
前端的优化方法

---

es6新特性

• let、const、块级作用域；解构赋值
  
• 一些原生对象新增了方法，比如string的模板字符串；函数的默认值、箭头函数；数组的扩展运算符；对象名可以简写（key，value类似时可以只写一个）、Object.is()、Object.assign()、遍历对象：for-in、Object.keys()、Object.getOwnerPrototypeNames()；Symbol范例，创建要调用函数
  
• 新增了Set和Map两种数据结构，set不可重复，map键值可以是任何范例
  
• Proxy和Reflect
  
• Promise、Generator和Async（Generator的语法糖，自带实行器，返回是promise）
  
• 支持class（实例的原型，static的方法不会被继承，必须new调用）
  
• module（export，import，编译时确定）
  

闭包及其应用场景

一个函数假如访问了外层作用域的变量，就是闭包
作用：制止命名冲突、办理循环绑定引发的索引题目、使函数内部变量不被烧毁
应用场景：

• 单例模式，变量封装在闭包内部，只向全局暴露一个访问接口
  
• 节点循环绑定click变乱，比如点击哪个按钮就输出哪个
  
• 函数柯里化，制止频仍调用具有类似参数函数
  
• 防抖节流
  

缺点：会出现内存走漏的题目
防抖节流

对于高频触发的时间，用防抖节流来淘汰调用频率

• 防抖：n秒后再实行该变乱，假如n秒内重复触发，则重新计时
  

  搜索框输入、窗口巨细调解等

• 节流：n秒内只运行一次，n秒内重复触发，只有一次收效
  

  滚动加载、搜索遐想
HTTP强缓存和协商缓存

• 强制缓存
  

强制缓存在未失效的时间会直接用欣赏器的缓存，不会向服务器发送哀求
强制缓存收效时状态码为200
相干哀求头：cache-control / Expires / Pragma

• 协商缓存
  

当第一次哀求时服务器返回的响应头没有cache-control / Expires或过期或属性设置为no-cache，欣赏器第二次哀求时就会与服务器协商，假如没有修改返回304，告诉欣赏器可以使用缓存，假如数据有更新则返回200，将更新数据一起返回
相干哀求响应头：ETag/If-Not-Match 、Last-Modified/If-Modified-Since
Promise的三种状态

Pending 举行中
Fulfilled 已乐成
Rejected 已失败
.then第一个参数是resolve状态的回调函数，第二个是rejected
.catch方法是 .then(null, rejection)的别名，一样平常用来取代then方法的第二个参数
.finally方法用于不管promise末了状态怎样都会实行的操纵
all() 多个promise包装成一个新的，都fulfilled才完成，有一个rejected就rejected，但假如promise自己有catch就不会进入all方法的catch
race() 只要有一个promise状态改变就改变
Vue-router的两种模式

Hash和history

• Hash路由：
  

工作原理是hashChange变乱，url后添加#xxx触发这个变乱。#后的hash变革不会导致欣赏器向服务器发出哀求，即不会革新页面，触发hashChange变乱，通过监听hash值来实现更新页面部分内容
Vue-router默认的是hash模式。
会创建HashHistory对象，访问不同路由时使用HashHistory.push()或HashHistory.replace()

• History路由：
  

 用H5的pushState()和replaceState()两个api团结window.popstate变乱

• 区别：
  

pushState设置的url可以试当前url同源的恣意url，而hash只能修改#后的部分
pushState设置的url和当前千篇一律也会记录到栈中，hash设置的必须不一样才会记录
pushState通过stateObject可以添加恣意范例的数据到记录中，hash只可是短字符串
hash兼容IE8以上，history兼容IE10以上
history模式需要后端共同将全部访问都指向index.html，否则会导致404
宏任务和微任务

宏任务 Macrotask是指Event Loop在每个阶段实行的任务
  script、setTimeout、setInterval、setImmediate、I/O、UI rendering
微任务 Microtask是指Event Loop在每个阶段间实行的任务
  promise.then、process.nextTick、Object.observe、MutationObserve
Js的缺点

• 没有命名空间，不好模块化
  
• 全局变量在全部模块中都可见，函数内部也能界说全局变量
  
• 隐式转换：+可以表现相加大概字符毗连，==在两个值范例不同的时间会自动转换
  
• NaN表现超出了解释器的极限的数字，有许多奇怪的特性，比如NaN===NaN false
  
• 行尾自动分号插入
  

数据范例

Number、String、Boolen、Symbol、Null、Undefined、Object
异步、变乱循环

Event Loop：主线程会不停从任务队列中按序次取任务实行，每实行完一个任务都会查抄微任务队列是否为空，假如不为空会一次性实行完全部微任务，再进入下一个循环去任务队列中取下一个任务实行。
Async/await：实行到await时若返回的是promise对象会壅闭当前async代码块下面的代码，先实行await中的同步代码，然后实行当前async外的同步代码，等同步代码都实行完后再回到async中，等promise状态到达fulfilled再实行之后的代码。若await返回的不是promise对象，同步代码实行完会回到当前async中实行。
原型

• JS的每个对象拥有一个原型，当访问一个对象的属性时，不仅会在对象上搜索还会搜索其原型、原型的原型，层层向上搜索。
  
• 对象的原型有个属性constructor，指向对象自己
  
• 原型分为显式原型和隐式原型，每个对象都有一个隐式原型，指向其构造函数的显式原型，多个_proto_组成的聚集称为原型链
  
• 全部的prototype都是对象，所以他们的_proto_指向Object()的prototype
  
• 全部的构造函数的隐式原型都是Funciton的prototype（包括Object._proto_）
  
• Object.prototype的隐式原型是null
  

继承

子类具有父类的各种属性和方法，不需要再次编写
实现方式：

• 原型继承：父类实例作为子类的原型，let child = Object.create(father)
  

 不能传参；
Object.create是浅拷贝，多个实例的引用范例指向同一地点，会被篡改

• 组合继承：子类中用Father.call(this)，而且child.prototype = new Father()、child.prototype.constructor = Son，手动挂上构造器，指向自己
  

可传参，不共享父类引用属；
调用了两次父类构造函数

• 寄生组合继承：将组合继承的child.prototype = new Father()改成child.prototype = Object.create(Father.prototype)
  
• ES6的extend就是寄生组合继承的方式，可以不写constructor，假如写的话第一句要写super，super(200)  Father.call(this,200)
  

xss和csrf是什么，怎样防御

• csrf：跨站哀求伪造
  

  登录了信任网站的情况下，欣赏器自动保存了cookie，进入攻击网站，并在攻击网站的诱导下触发对信任网站的哀求。由于cookie还在有用期内，哀求会被处置惩罚
步调：

• 使用cookie的sameSite属性的strict，仅允许当前网址与哀求的url完全划一时携带cookie（Lax允许部分，get允许，post不允许；None都允许）
  
• 涉及到数据修改的操纵严格使用post而非get
  
• HTTP协议中用Refer属性，验证refer是否为自己的域名，来确定哀求来源
  
• 哀求地点添加token，或自界说属性验证
  
• 表现验证方式，如密码输入，验证码输入等
  

• xss：跨站脚本攻击
  

  通过页面计划时间的缺陷，使用欣赏器对某处代码的分析，让欣赏器实行恶意代码。如，HTML中内嵌的文本、内联JS、标签的href、src属性、onload/onerror/onclick等变乱中注入突破本来限定的代码
  长期型xss：将脚本植入服务器数据库里，导致每个访问的用户都会实行
  非长期型：恶意代码存在url里
步调：
 （大部分欣赏器都自带xss筛选器，vue等框架也对xss有一些防护）

• 对用户输入内容和服务端返回内容举行过滤和转译
  
• 使用cookie的httponly属性，防止用过document.cookie获取cookie
  
• 告急内容加密传输
  
• 对于URL携带的参数谨慎使用
  
• 使用CSP，Content-security-policy哀求头，在meta中配置：限定加载其他域的文件、克制向第三方域提交数据、克制实行未授权脚本等
  

讲讲vue框架

Vue是一个用于创建用户界面的js框架，它的焦点特性是：

• MVVM数据驱动
  

Model模型层：负责处置惩罚业务逻辑和服务器举行交互
View视图层：负责将数据模型转化为UI展示出来
ViewModel视图模型层：用来毗连M和V，与View之间双向绑定，资助我们完全制止了对DOM的操纵（只操纵数据，界面的变更是根据数据双向绑定出来的）
MVC模式：模型 / 视图 / 控制

• 组件化
  

 Vue允许通过组件来拼装一个页面，每个组件都是一个可复用的Vue实例，组件里可以包含自己的数据，视图和代码逻辑，方便复用

• 指令系统
  

 带有v-前缀的特殊属性，当表达式的值改变时，响应式地作用于DOM
 自界说指令：Vue.directive()，第一个参数是指令名，不带v-；组件options选项中设置directive属性，directive:{ focus:{} }。然后再模板中使用v-focus
讲讲css

• 盒模型
  

content、border（粗细，样式，颜色）、padding（受盒子background影响）、margin
尺度盒模型：width/height + padding + border + margin
怪异盒模型：width/height + margin，width/height包含了padding和border

• 选择器
  

 ID（#box）、class（.one）、标签 （p）、通用、属性（[attribute] 全部带有attribute属性的元素）、伪类（:hover）、伪元素（::first-line）、子选择器（.one>one_1），相邻选择器（.one+.two 紧接在.one后的全部.two）
 !import > 内联 > ID > 类、伪类 > 标签、伪元素 > 子选择器、相邻选择器
数组和字符串有哪些方法

• 数组
  

遍历：reduce、map、filter、every、some、forEach
改变：push、pop、shift、unshift、splice、sort、reserve
不变：join、slice、concat

• 字符串
  

concat
返回子串：slice、substr、substring
删除空格：trim、trimLeft、trimRight
repeat复制、toLowerCase转小写、toUpperCase转大写
chatAt、indexOf、includes
split转数组
Let和var

• var 
  

有变量提升，未赋值时是undefined    
可重复声明
作用域是方法作用域，在非函数作用域中界说就是全局变量

• let
  

声明的变量只在局部起作用
声明前使用会报错
不可重复声明

• const
  

有let的全部特性      
声明时必须初始化，之后不可更改（实际是地点不可更改）
对http有哪些了解？

• get、post
  

get方法哀求一个指定资源，应只被用于获取数据；post方法用于将实体提交到指定资源，通常会导致服务器上的状态变革
get回退无害，post会再次提交哀求
get哀求参数会被完备保存在欣赏器汗青记录里，post不会
get在url中传送的参数是有长度限定的，post没有
get不安全，由于参数直接暴露在url上，所以不能用来转达敏感信息
get参数通过url转达，post放在request body中

• 响应码
  

1消息，2乐成，3重定向，4哀求错误，5服务器错误
200返回数据；201服务器创建了新资源
301永世移动；302暂时移动；
401未授权；403拒绝哀求；404找不到哀求；405方法错误
502网关错误，上游出题目；503服务不可用；504超时

• 常见header
  

Accept 可以或许继承的回应内容范例
Authorization 认证信息
Cache-control 指定缓存机制
Connection 欣赏器想要优先使用的毗连范例
Cookie 服务器发送的一个超文本传输协议cookie
Content-Type 哀求体的多媒体范例
 Content-Type: application/x-www-form-urlencoded
Date 发送该消息的日期
Expect 客户端要求服务器做出的特定举动
Host 服务器的域名和端标语
User-Agent 欣赏器的身份标识
Js分片具体怎么做

读取文件的内容，用MD5实现文件的唯一性，然后对文件举行分割（用Blob的slice方法，包含md5值，文件巨细，共多少块，第多少块），上传
后端可以根据前端传的md5值，到服务器查找之前文件的合并信息，返回数据告诉前端从第几节上传，实现断点续传
懒加载的原理

访问页面时，先把图片的路径更换成一张占位图的路径，当图片进入可视区域才把图片路径更换成真实路径
监听页面滚动，当元素到欣赏器窗口的隔断（offsetTop）小于document到欣赏器窗口的隔断(scrollTop)+可视区域的高度（document.body. clientHeight），img.src改成真实路径
哪些方法能脱离文档流

• float 使用时其他盒子会无视该元素，但盒子内的文本依然会为这个元素让出位置，围绕
  
• absolute 绝对定位，相对该元素的父类（不满意就继承向上查询）元素举行定位
  
• fixed 完全脱离文档流，相对于欣赏器窗口举行定位
  

垂直居中有哪些方法

• position: absolute
  

1) top/left/right/bottom都设置为0，margin: auto
2) top: 50%，margin：负自身的50%，如margin：-50px
3) top：50%，transform：translate(-50%,-50%)

• 父类元素display: flex，align-items：center（justify-content：center 程度居中）
  

Js中堆和栈的储存方式

根本范例存储在栈中，引用范例额对象存储在堆中，引用地点放在栈中
箭头函数和平凡函数区别

• 箭头函数的this指向它界说时所在对象，而非调用它的对象
  
• 不会举行变量提升
  
• 不可以作为构造函数，不能使用new
  
• 没有arguments对象，假如要用可以用rest
  
• 不可以使用yield下令，所以不能用作Generator函数
  

v-model原理

实际是v-bind和input变乱
:value=”value” @input=”value = $event.target.value”
vue响应式原理

• vue2是接纳发布-订阅者的模式，通过Object.defineProperty()来挟制各个属性的setter、getter。Vue实例创建时，会遍历全部DOM对象，为每个数据属性添加get和set，但添加或删除属性并不会触发；数组是通过重写数组的Array.prototype对应的方法（push/pop/shift/unshift/sort/reverse/splice），触发方法时视图更新
  
• Vue3是通过ES6的Proxy，在目标对象外设置一层拦截，外界的操纵都会通过这层拦截，可以拦截到对象属性的读取、设置、新增删除等，还可以直接监听数组的变革
  

vue组件通讯

• props
  

父传子，子组件设置props属性，继承父组件传来的参数

• $emit
  

 子传父，通过$emit触发自界说变乱，第二个参数为转达的数值，父组件绑定监听器获取组组件传来的参数

• ref
  

 父组件在使用子组件的时间设置ref属性ref=” xxx”，this.$refs.xxx获取子组件实例

• EventBus
  

 兄弟组件传值，创建一个中央时间总线EventBus，兄弟组件通过$emit触发自界说变乱，另一个兄弟组件通过$on监听自界说变乱

• $parent或$root
  

 兄弟组件传值，通过共同祖辈或root，一个this.$parent.emit(‘add’)，另一个this.$parent.on(‘add’, this.add)

• Attrs和listeners
  
• Provide和Inject
  
• Vuex
  

是状态管理工具，会合式存储管理应用的全部组件的状态
State：用来存放共享变量
Getters：相当于盘算属性，返回的值会根据它的依靠被缓存起来，只有依靠值发生变革才会被重新盘算
Mutations：用来存放修改state中数据的方法，store.commit方法更改数据
Action：通常用来做异步操纵，需要在mutation的底子上举行
Module：分割的模块，每个模块拥有自己的state、getters、mutation、actions
diff算法

通过同层的树节点举行比力的算法，只比力同层，循环从两边向中间比力
Vue中用于假造DOM渲染成真实DOM的新旧节点比力，
先同级比力，类似则直接复用。
然后比力子节点，假如旧的有子节点，新的没有，会把旧的删除；假如旧的没有新的有，会把新增的子节点插入旧的。
都有子节点时，先比力第一个是否一样，一样的话移动新旧的start指针，不一样则会从末了一个开始比力；假如头尾都不相称则比力新头和旧尾，一样就把旧尾移到前面去，然后end指针往前一位，start指针以后一位。假如存在key则会直接用key去旧的子节点中找，找到就移动到最前面，start以后一位，没有就直接插入。
末了把旧的多余节点删掉。

webpack打包配置

webpack是用于JS应用程序静态模块的打包工具

• 初始化：从配置文件和shell中读取并合并参数，初始化需要使用的插件和配置插件
  
• 编译构建：从Entry出发，对每个Module串行调用对应的Loader举行翻译，再找到该Module依靠的module，递归举行编译
  
• 输出：对编译后的Module组合成chunk，转换成文件输出
  

常用配置：
 entry：入口文件，从哪个开始打包
 output：输出，打包好的文件输出到那里
 module：配置loader，webpack自己只能打包js/json，打包css、img、html等需要各种loader，通过npm下载即可
plugins：插件
mode：打包模式，development和production
欣赏器输入url到网页出现的过程

• url分析：协议、域名（确定服务器）、端口（确定服务器中的具体应用）、路径（访问的资源位置）、查询字符串（具体描述）
  
• DNS查询：获取到域名对应的服务器的IP地点
  
• TCP毗连：发送syn，收到发送SYM/ACK的数据包，收到发送标有ACK的数据包
  
• 发送http哀求：创建tcp毗连后发送哀求
  
• 响应哀求：欣赏器收到服务器响应的资源，举行分析，开始页面渲染
  
• 页面渲染：
  
•  分析HTML，构建DOM树
  
•  分析CSS，构建CSS规则树
  
•  合并DOM树和CSS规则，生成Render树
  
•  结构render树，针对欣赏器的各种状态，盘算各元素的尺寸、位置
  
•  绘制render树，绘制页面像素信息
  
•  欣赏器将各层信息发送给GPU，GPU会将各层合成，表现
  

前端的优化方法

• 加载
  

 淘汰http哀求数，合并css和js，使用css精灵图
 缓存资源
 压缩代码，多余的缩进和换行
 样式放在头部使用link引入，脚本放在尾部使用异步加载
 懒加载、滚屏加载等按需加载方法
 进入页面时先使用loading，加载完成后再表现页面
 压缩图像，使用css取代图像
 静态资源不实用cookie

• 实行
  

 制止img、iframe的src为空，空的话会重新加载
 制止重置图像巨细，会引发重绘

• 渲染
  

 淘汰DOM节点
 动画只管使用css3动画，5个元素以上的话使用canvas
 使用requestAnimationFrame取代setTimeout
 对滚动、鼠标移动这类高频时间使用防抖节流

• 样式
  

 只管不在html中写style
 制止css表达式
 不滥用float，float渲染时盘算量比力大
 不声明太多的font-size，会影响css树的服从
 值为0时不写单元

• 脚本
  

 只管改变class而不是style
 只管使用id选择器

来源：https://blog.csdn.net/weixin_44783161/article/details/127452069
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！