前端面试题-小结

star_tan
244 阅读16分钟

1、 什么是回流，什么是重绘，有什么区别？

回流：当render tree中的一部分(或全部)因为元素的规模尺寸，布局，隐藏等改变而需要重新构建。这就称为回流(reflow)。每个页面至少需要一次回流，就是在页面第一次加载的时候，这时候是一定会发生回流的，因为要构建render tree。在回流的时候，浏览器会使渲染树中受到影响的部分失效，并重新构造这部分渲染树，完成回流后，浏览器会重新绘制受影响的部分到屏幕中，该过程成为重绘。

重绘：当render tree中的一些元素需要更新属性，而这些属性只是影响元素的外观，风格，而不会影响布局的，比如background-color。则就叫称为重绘。

区别：回流必将引起重绘，而重绘不一定会引起回流。比如：只有颜色改变的时候就只会发生重绘而不会引起回流当页面布局和几何属性改变时就需要回流。

2、HTML几种布局方式？

静态布局：最为传统的一种布局方式，网页上的所有元素都是用px为单位进行设定的。

流式布局：当屏幕分辨率大小发生变化时，页面里的元素大小会变化但布局不会发生变化。

自适应布局：当屏幕的大小发生变化时，页面里面的元素的位置会变化而大小不会变化。

响应式布局：每个屏幕分辨率下面会有一个布局样式，即元素位置和大小都会变。媒体查询+流式布局。通常使用@media媒体查询和网格系统配合相对布局单位进行布局，实际上就是综合响应式。

弹性布局：使用em或rem单位进行布局，相对%更加灵活，同时可以支持浏览器的字体大小调整和缩放等的正常显示，因为em是相对父级元素的原因没有得到推广。

3、http与https的区别？

http协议和https协议的区别：传bai输信息安全性du不同zhi、连接方式不同、端口不同、证书dao申请方式不同。

传输信息安全性不同

  • http协议：是超文本传输协议，信息是明文传输。如果攻击者截取了Web浏览器和网站服务器之间的传输报文，就可以直接读懂其中的信息。
  • https协议：是具有安全性的ssl加密传输协议，为浏览器和服务器之间的通信加密，确保数据传输的安全。

连接方式不同

  • http协议：http的连接很简单，是无状态的。
  • https协议：是由SSL＋HTTP协议构建的可进行加密传输、身份认证的网络协议。

端口不同

  • http协议：使用的端口是80。
  • https协议：使用的端口是443。

证书申请方式不同

  • http协议：免费申请。
  • https协议：需要到ca申请证书，一般免费证书很少，需要交费。

4、你如何理解 HTML的语义化？

所谓 HTML 语义化，就是用恰当的标签去展示恰当的内容，像 HTML5 中新增的 header、nav、footer 等标签，而非什么都用 div 这种不具备语义化的标签来显示。

  • 方便代码的维护，语义化的 HTML 代码更具可读性
  • 有利于 SEO，提高搜索引擎的有效爬取

5、html有那些行内元素、有哪些块级元素？

块级元素： address、center、h1-h6、hr、p、pre、ul、ol、table、form、div

行内元素： span、a、br、b、strong、img、sup、sub、i、input、textarea、select

6、数组相关的方法？

  1. shift 删除数组中的第一个元素

  2. pop 删除数组中的最后一个元素

  3. unshift 增加元素在数组的前面

  4. push 增加元素在数组的后面

  5. map 循环，并且返回新的数组

  6. forEach 循环，遍历

  7. filter 过滤，筛选出数组中的满足条件的，并且返回新的数组

  8. concnt 合并数组

  9. find 查找出第一个符合条件中的数组元素

  10. findIndex 查找出第一个符合条件中的数组元素，所在的索引位置

  11. flat 将多维数组转为一维数组

  12. join将数组转为字符串

  13. reverse 颠倒数组中的顺序

  14. every检测数组中元素是否都是符合条件 === bollean

  15. some检测数组中元素是否有满足条件的元素 === bollean

  16. splice(start,n,添加元素) 开始位置 删除个数，添加元素

  17. sort 排序

  18. slice(start,end) 选中[start.end)之间的元素

  19. indexOf 查找值所在的位置

  20. includes 查看数组中是否存在此元素

7、什么是防抖和节流？有什么区别？

函数防抖(debounce)

  • 定义：当持续触发事件时(如连续点击按钮多次)，一定时间段内没有再触发事件，事件处理函数才会执行一次，如果设定的时间到来之前，有一次触发了事件，就重新开始延时。
  • 原理：维护一个计时器，规定在延时时间后触发函数，但是在延时时间内再次被触发的话，就取消之前的计时器而重新设置，这样就能够保证只有最后一次操作被触发。即将所有操作合并为一个操作进行，并且只有最后一次操作是有效操作。

函数节流(throttle)

  • 定义：按照设定的固定时间执行一次函数，比如200ms一次。注意：固定就是你在mousemove过程中，执行这个节流函数，它一定是200ms（你设定的定时器延迟时间）内执行一次。没到200ms，一定会返回，不会执行回调函数的。
  • 原理：原理是通过判断是否达到一定时间来触发函数，使得一定时间内只触发一次函数。

8、call 和 apply 的区别是什么？

  1. call()和apply()都可以用来间接调用函数，都可以显式调用所需的this。即，任何函数可以作为任何对象的方法来调用。
  2. 两个方法都可以指定调用实参。

区别：

  • call()和apply()的基本区别：在于将参数传递给函数。
  • call():使用其自有的实参列表作为函数的参数；
  • apply()：要求以数组的形式传入参数。

9、什么是闭包？

闭包是指有权访问另外一个函数作用域中的变量的函数。可以理解为(能够读取另一个函数作用域的变量的函数)。

10、let、const和var的区别？

let与var

  1. let不允许重复声明变量，var可以
  2. let没有变量提升，也就是不会在预解析的时候进行解析。
  3. 声明的变量只在let命令所在的代码块内{}有效。

const

  1. 常量一定要赋值，否则报错
  2. 常量的值不能改变，改变会报错
  3. 常量不能重复声明，否则报错

11、cookies、sessionStorage和localStorage的区别？

  1. 相同点是都是保存在浏览器端、且同源的
  2. cookie数据始终在同源的http请求中携带（即使不需要），即cookie在浏览器和服务器间来回传递，而sessionStorage和localStorage不会自动把数据发送给服务器，仅在本地保存。cookie数据还有路径（path）的概念，可以限制cookie只属于某个路径下
  3. 存储大小限制也不同，cookie数据不能超过4K，同时因为每次http请求都会携带cookie、所以cookie只适合保存很小的数据，如会话标识。sessionStorage和localStorage虽然也有存储大小的限制，但比cookie大得多，可以达到5M或更大
  4. 数据有效期不同，sessionStorage：仅在当前浏览器窗口关闭之前有效；localStorage：始终有效，窗口或浏览器关闭也一直保存，因此用作持久数据；cookie：只在设置的cookie过期时间之前有效，即使窗口关闭或浏览器关闭
  5. 作用域不同，sessionStorage不在不同的浏览器窗口中共享，即使是同一个页面；localstorage在所有同源窗口中都是共享的；cookie也是在所有同源窗口中都是共享的
  6. web Storage支持事件通知机制，可以将数据更新的通知发送给监听者
  7. web Storage的api接口使用更方便

12、Es6的新特性有哪些？

Let和const关键字

变量的解构赋值

字符串，数值的扩展

数组，对象的扩展

函数的扩展

for...of

13、箭头函数与普通函数的区别？

  1. 没有this、super、arguments和new.target绑定， 箭头函数中的this、super、arguments及new.target这些值由外围最近一层非箭头函数决定
  2. 不能通过new关键字调用箭头函数没有construct方法，所以不能被用作构造函数，如果通过new关键字调用箭头函数，程序会抛出错误
  3. 没有原型 由于不可以通过new关键字调用箭头函数，因而没有构建原型的需求，所以箭头函数不存在prototype这个属性
  4. 不可以改变this的绑定 函数内部的this值不可被改变，在函数的生命周期内始终保持一致
  5. 不支持argument对象 箭头函数没有argument绑定，所以你必须通过命名参数和不定参数这两种形式访问函数的参数
  6. 不支持重复的命名参数 无论在严格还是非严格模式下，箭头函数都不支持重复的命名参数；在传统函数的规定中，只有在严格模式下才不能有重复的命名参数

14、Js的基本数据类型与引用数据类型？

基本数据类型： Number、String、Boolean、Null、 Undefined、Symbol（ES6），这些类型可以直接操作保存在变量中的实际值。

引用数据类型： Object（在JS中除了基本数据类型以外的都是对象，数据是对象，函数是对象，正则表达式是对象）

15、HTTP 协议中，GET 和 和 POST 有什么区别？

  1. get（默认值）是通过URL传递表单值，数据追加在action属性后面。
  2. post传递的表单值是隐藏到http报文体中，url中看不到。
  3. get是通过url传递表单值，post通过url看不到表单域的值；
  4. get传递的数据量是有限的，如果要传递大数据量不能用get，比如type=“file”上传文章、type=“password”传递密码，post则没有这个限制。
  5. post区别：网址隐藏；只要当前页面请求是POST请求，那么刷新就是重新发出POST，部分浏览器会提示“是否重复提交”。
  6. 只要在地址栏中输入一个网址回车访问，那么就是GET。

16、HTTP 状态消息状态码有哪些？

  • 200 OK //客户端请求成功
  • 301 Moved Permanently（永久移除)，请求的 URL 已移走。Response 中应该包含一个 Location URL, 说明资源现在所处的位置
  • 302 found 重定向
  • 400 Bad Request //客户端请求有语法错误，不能被服务器所理解
  • 401 Unauthorized //请求未经授权，这个状态代码必须和 WWW-Authenticate 报头域一起使用
  • 403 Forbidden //服务器收到请求，但是拒绝提供服务
  • 404 Not Found //请求资源不存在，eg：输入了错误的 URL
  • 500 Internal Server Error //服务器发生不可预期的错误
  • 503 Server Unavailable //服务器当前不能处理客户端的请求，一段时间后可能恢复正常

17、Js中的Set和Map的区别？

  • Set 对象类似于数组，且成员的值都是唯一的。
  • Map 对象是键值对集合，和 JSON 对象类似，但是 key 不仅可以是字符串还可以是对象

18、简述下对Promise的理解？

  1. Promise是最早由社区提出和实现的一种解决异步编程的方案，比其他传统的解决 方案（回调函数和事件）更合理和更强大。
  2. Promise对象的状态不受外界影响，有3个状态：
  • pending 初始状态
  • fulfilled 成功状态
  • rejected 失败状态
  1. Promise的状态一旦改变，就不会再变。
  2. Promise,一旦新建，它就会立即执行，无法中途取消。
  3. Promise如果不设置回调函数，Promise内部就会报错，不会反映到外部。
  4. 当处于pending状态时，无法得知目前进展到哪一个阶段，是刚刚开始还是即将完成。

19、对于MVVM的理解？

  • 模型（Model）：数据保存—存放着各种数据，有的是固定写死的，大多数是从后端返回的数据
  • 视图（View）：用户界面，也就是DOM
  • 视图模型（View-Model）:连接View和Model的桥梁，当数据变化时，ViewModel够监听到数据的变化（通过Data Bindings），自动更新视图，而当用户操作视图，ViewModel也能监听到视图的变化（通过DOM Listeners），然后通知数据做改动，这就实现了数据的双向绑定。

20、Vue的生命周期有哪些？

  1. Vue生命周期是什么？

Vue实例在被创建时，会经历一系列的初始化过程：从开始创建-》初始化数据=》编译模板=》实例挂载DOM=>渲染，更新=》渲染，卸载，这个过程我们称为vue生命周期，同时在这个过程中会运行一些叫做生命周期钩子函数。

  1. 生命周期钩子函数都有哪些？
  • beforeCreate:组件实例创建之前，这个阶段data和methods还未初始化；
  • created:组件实例化创建，属性绑定，但是真实DOM还未生成，$el不可用，data和methods初始化完成，可以在这个阶段调用方法和操作data数据。
  • beforeMount:挂载之前，模板已经编译，还未挂载到页面中
  • mounted：el被vm.$el所代替，并挂载到实例上。这个时候整个初始化完毕
  • beforeUpdate：数据更新之前
  • Updated :数据更新之后
  • beforeDestroy:组件销毁之前
  • destroyed:组件销毁之后

21、Vue中常用的指令有哪些？

  • v-if：根据表达式的值的真假条件渲染元素，在切换时元素及它的数据绑定/组件被销毁并重建。
  • v-show：根据表达式之真假值，切换元素的display CSS 属性。
  • v-for：循环指令，基于一个数组或对象渲染一个列表，Vue 2.0 以上必须需配合key值使用。
  • v-bind：动态地绑定一个或多个特性，或一个组件prop到表达式。
  • v-on：用于监听指定元素的DOM事件，比如点击事件。绑定事件监听器。
  • v-model：实现表单输入和应用状态之间的双向绑定。
  • v-pre：跳过这个元素和它的子元素的编译过程。可以用来显示原始Mustache标签。跳过大量没有指令的节点会加快编译。
  • v-once：只渲染元素和组件一次，随后的重新渲染，元素/组件及其所有的子节点将被视为静态内容并跳过。这可以用于优化更新性能。

22、v-if和v-show的区别？

  • 两个都是让元素不可见。但是两个选项有区别
  1. v-if 在条件切换时，会对标签进行适当的创建和销毁，而v-show则仅在初始化时加载一次，因此v-if的开销比v-show大
  2. v-show控制的时元素的display属性，无论初始条件是否成立，都会渲染标签。而v-if是惰性的，只有在条件成立时才渲染为真实的标签，条件为假，不会去渲染标签
  • 项目中如何使用？
  1. 当初始条件为假时，v-show初始渲染开销较高,使用v-if
  2. 当我们频繁切换开关是，v-if切换开销较高,使用v-show
  3. 多路分支，只能选择v-if
  4. 具体看开发项目的时候是否频繁操作DOM

23、Vue的双向数据绑定原理是什么？

  • vue是采用数据劫持，并且使用发布-订阅者的开发模式。原理是观察者observer通过Object.defineProperty()来劫持到各个属性的getter setter，在数据变动的时候，会被observer观察到，会通过Dep通知数据的订阅者watcher，之后进行相应的视图上面的变化。

** 具体实现步骤：**

  • 第一步：需要observe的数据对象进行递归遍历，包括子属性对象的属性，都加上 setter和getter 这样的话，给这个对象的某个值赋值，就会触发setter，那么就能监听到了数据变化
  • 第二步：compile解析模板指令，将模板中的变量替换成数据，然后初始化渲染页面视图，并将每个指令对应的节点绑定更新函数，添加监听数据的订阅者，一旦数据有变动，收到通知，更新视图
  • 第三步：Watcher订阅者是Observer和Compile之间通信的桥梁，主要做的事情是:
  1. 在自身实例化时往属性订阅器(dep)里面添加自己
  2. 自身必须有一个update()方法
  3. 待属性变动dep.notice()通知时，能调用自身的update()方法，并触发Compile中绑定的回调，则功成身退。
  • 第四步：MVVM作为数据绑定的入口，整合Observer、Compile和Watcher三者，通过Observer来监听自己的model数据变化，通过Compile来解析编译模板指令，最终利用Watcher搭起Observer和Compile之间的通信桥梁，达到数据变化 -> 视图更新；视图交互变化(input) -> 数据model变更的双向绑定效果。

24、Vue的路由实现模式?

  • vue路由的两种模式，hash与history
  1. hash ——即地址栏URL中的#符号（此hsah 不是密码学里的散列运算）。
  2. history ——利用了HTML5 History Interface 中新增的pushState() 和replaceState() 方法。

25、Vue的路由有哪几种导航守卫?

  1. router.beforeEach 注册一个全局前置守卫
  2. router.afterEach 注册一个全局后置守卫
  • 每个守卫方法接收三个参数：
  1. to: Route: 即将要进入的目标 路由对象
  2. from: Route: 当前导航正要离开的路由
  3. next: Function: 一定要调用该方法来 resolve 这个钩子。执行效果依赖 next 方法的调用参数。
avatar
文章
阅读
粉丝