2019年末前端面试记录

10 阅读 作者:阿狸小师妹 2020-04-23

VUE部分

  1. 谈一谈双向数据绑定的原理
    通过Object.defineProperty来劫持 setter getter方法,当发现数据改变时,发送给订阅者。
    追问:分别什么时候触发setter,getter
    getter对应的是get方法,即 获取对应的值 时候调用的回调函数。
    setter对应的是set方法,即 监听对应的值的改变 时候调用的回调函数;并且 set 接受一个参数,即改变后的值。
  2. 3.0以上的数据绑定是怎样的
    Vue 3.0与Vue 2.0的区别仅是数据劫持的方式由Object.defineProperty更改为Proxy代理,其他代码不变
    Proxy可以直接监听对象和数组的变化,并且有多达13种拦截方法。并且作为新标准将受到浏览器厂商重点持续的性能优化。
  3. VUEX工作流程
    是一个全局集中响应式状态的管理工具,状态会保存再state内,可以被所有组件所引用,一经修改后引用state内状态的组件都会响应式的更新。state不能被直接修改,必须commit内提交mutation才行,且mutation必须是同步函数。提交action可以在内部进行异步操作,可同时提交多个mutation。
    有 State、 Getter、Mutation 、Action、 Module属性
state => 基本数据(数据源存放地)	this.$store.state.xxx
getters => 从基本数据派生出来的数据 	this.$store.getters.xxx
mutations => 提交更改数据的方法,同步! 	this.$store.commit('xxx')
actions => 像一个装饰器,包裹mutations,使之可以异步	this.$store.dispatch('yyy')
modules => 模块化Vuex
  1. VUE两种路由的实现
hash模式:

在浏览器中符号“#”,#以及#后面的字符称之为hash,用window.location.hash读取;
特点:hash虽然在URL中,但不被包括在HTTP请求中;用来指导浏览器动作,对服务端安全无用,hash不会重加载页面。
hash 模式下,仅 hash 符号之前的内容会被包含在请求中,如 http://www.xxx.com,因此对于后端来说,即使没有做到对路由的全覆盖,也不会返回 404 错误。

history模式:

history采用HTML5的新特性;且提供了两个新方法:pushState(),replaceState()可以对浏览器历史记录栈进行修改,以及popState事件的监听到状态变更。
history 模式下,前端的 URL 必须和实际向后端发起请求的 URL 一致,如 http://www.xxx.com/items/id。后端如果缺少对 /items/id 的路由处理,将返回 404 错误。Vue-Router 官网里如此描述:“不过这种模式要玩好,还需要后台配置支持……所以呢,你要在服务端增加一个覆盖所有情况的候选资源:如果 URL 匹配不到任何静态资源,则应该返回同一个 index.html 页面,这个页面就是你 app 依赖的页面。”

  1. vue中router-link和传统a链接的区别
    a:通过a标签进行跳转,页面会被重新渲染,即相当于重新打开一个新的网页,体现为视觉上的“闪烁”(如果是本地的项目基本看不出来)
    router-link:通过router-link进行跳转不会跳转到新的页面,也不会重新渲染,它会选择路由所指的组件进行渲染,避免了重复渲染的“无用功”。
    避免了不必要的重渲染,它只更新变化的部分从而减少DOM性能消耗

  2. 如何实现一个组件

  3. 子组件和父组件之间的传值,父组件如何调用子组件的方法
    父组件通过 prop 给子组件下发数据,子组件通过$emit触发事件给父组件发送消息;
    父组件通过ref 调用子组件方法;
    非父子组件间的数据传递,兄弟组件传值:
    通过当前实例的父组件的 $children属性,通过name找到对应的兄弟组件实例。
    eventBus,就是创建一个事件中心,相当于中转站,可以用它来传递事件和接收事件。项目比较小时,用这个比较合适。(虽然也有不少人推荐直接用VUEX,具体来说看需求咯。技术只是手段,目的达到才是王道。)

  4. 生命周期,以及生命周期钩子函数
    beforeCreate(创建前) 在数据观测和初始化事件还未开始
    created(创建后) 完成数据观测,属性和方法的运算,初始化事件,el属性还没有显示出来
    beforeMount(载入前) 在挂载开始之前被调用,相关的render函数首次被调用。实例已完成以下的配置:编译模板,把data里面的数据和模板生成html。注意此时还没有挂载html到页面上。
    mounted(载入后) 在el 被新创建的 vm. $el 替换,并挂载到实例上去之后调用。实例已完成以下的配置:用上面编译好的html内容替换el属性指向的DOM对象。完成模板中的html渲染到html页面中。此过程中进行ajax交互。
    beforeUpdate(更新前) 在数据更新之前调用,发生在虚拟DOM重新渲染和打补丁之前。可以在该钩子中进一步地更改状态,不会触发附加的重渲染过程。
    updated(更新后) 在由于数据更改导致的虚拟DOM重新渲染和打补丁之后调用。调用时,组件DOM已经更新,所以可以执行依赖于DOM的操作。然而在大多数情况下,应该避免在此期间更改状态,因为这可能会导致更新无限循环。该钩子在服务器端渲染期间不被调用。
    beforeDestroy(销毁前) 在实例销毁之前调用。实例仍然完全可用。
    destroyed(销毁后) 在实例销毁之后调用。调用后,所有的事件监听器会被移除,所有的子实例也会被销毁。该钩子在服务器端渲染期间不被调用。

  5. vue获取数据在哪个周期函数
    一般 created/beforeMount/mounted 皆可.
    比如如果你要操作 DOM , 那肯定 mounted 时候才能操作.

  6. 为什么使用key?
    需要使用key来给每个节点做一个唯一标识,Diff算法就可以正确的识别此节点。
    作用主要是为了高效的更新虚拟DOM。

  7. 组件中的data为什么是一个函数
    一个组件被复用多次的话,也就会创建多个实例。本质上,这些实例用的都是同一个构造函数。如果data是对象的话,对象属于引用类型,会影响到所有的实例。所以为了保证组件不同的实例之间data不冲突,data必须是一个函数。

  8. click 属性
    click事件获取当前元素属性
    currentTarget:currentTarget 事件属性返回其监听器触发事件的节点,即当前处理该事件的元素、文档或窗口。
    通俗一点说,就是你的点击事件绑定在哪一个元素上,currentTarget获取到的就是哪一个元素。

<body id="app">
  <ul>
    <li @click="say('hello!', $event)">点击当前行文本</li>
    <li>li2</li>
    <li>li3</li>
  </ul>
  <script>
   new Vue({
       el: '#app',
       data: {
        message: 'Hello Vue.js!'
       },
       methods: {
        say: function(msg, event) {
           //获取点击对象      
           var el = event.currentTarget;
           alert("当前对象的内容:"+el.innerHTML);
        }
    }
   })
  </script>
 </body>

  1. Vue与AngularJS的区别
    相同点:都支持双向数据绑定,指令,过滤器
    不同点:
    Vue.js
    组件化开发,是轻量级的开发框架,单向数据流
    灵活简单,而且还非常强大,(同时还提供双向数据绑定功能,)很适合开发灵活的 Web 应用程序
    默认情况下,Vue 不包含路由器,HTTP 请求服务等。开发者必须安装所需的“插件”。
    AngularJS 一个功能齐全的框架,是构建完整复杂应用的好选择
    性能方面,Vue 的虚拟 DOM 实现的重量较轻,Angular使用脏数据检查,所以Watcher越多越慢;Vue性能略微领先

JS部分

  1. 谈一谈原型和原型链

  2. 怎样实现继承 * 3
    1)原型继承
    2)使用构造函数继承
    利用call或者apply把父类中通过this指定的属性和方法复制(借用)到子类创建的实例中
    3)组合继承
    将原型链和借用构造函数的技术组合到一块
    4)Class继承
    https://mp.weixin.qq.com/s/psY8M9eMpWrZygHgfVYJCg

  3. 数组的方法

  4. 数组去重*2

  5. bind 和 apply 的区别

  6. 什么是跨域,跨域的解决方法
    当一个请求url的协议、域名、端口三者之间任意一个与当前页面url不同即为跨域。
    解决方法:
    1)设置document.domain解决无法读取非同源网页的 Cookie问题
    2)跨文档通信 API:window.postMessage()
    3)JSONP
    4)CORS 是跨域资源分享,需服务器端设置Access-Control-Allow-Origin
    参考链接:https://blog.csdn.net/qq_38128179/article/details/84956552

  7. 首页白屏3秒,如何优化
    https://www.jianshu.com/p/d9c20eafa67e

  8. http与https区别

  9. 怎么用webpack进行配置

  10. cookie localstorage sessionstorage区别
    cookie是存储在浏览器端,并且随浏览器的请求一起发送到服务器的,它有一定的过期时间,到了过期时间,到了过期时间会自动消失。
    sessionStorage和localeStorage也是存储在浏览器端,同属于webStorage,比cookie的存储大小要大有8M,cookie只有4kb,localeStorage是持久化存储在客户端,如果用户不手动清除的话,不会自动消失。
    sessionStorage的存活时间是一个回话期间,只要浏览器的回话关闭了就会自动消失
    应用场景
    localStorage:常用于长期登录(+判断用户是否已登录),适合长期保存在本地的数据
    sessionStorage:敏感账号一次性登录

  11. 前端和手机端如何交互

  12. 变量提示,function可以变量提升吗

  13. settimeout
    console.log()
    promise
    上述代码的执行顺序是什么

  14. 闭包
    子函数可以访问父函数中的所有局部变量
    优点:避免全局变量的污染
    希望一个变量长期存储在内存中(缓存变量)
    缺点:内存泄露(消耗)
    常驻内存,增加内存使用量
    追问:怎么解决内存泄漏

  15. 深拷贝 浅拷贝
    引用类型的时候,浅拷贝只复制地址值,实际上还是指向同一堆内存中的数据,深拷贝则是重新创建了一个相同的数据,二者指向的堆内存的地址值是不同的
    深拷贝:
    1)JSON.parse(JSON.stringify(obj))
    使用JSON.stringify()以及JSON.parse()它是不可以拷贝 undefined , function, RegExp 等等类型的

var obj = {a: 1, b: 2}
var obj1 = JSON.parse(JSON.stringify(obj))
obj1.a = 3 // 3
obj.a //1

2)递归拷贝
浅拷贝:
2) Object.assign(target, source)
一层对象没有任何问题的,但是如果对象的属性对应的是其它的引用类型的话,还是只拷贝了引用,修改的话还是会有问题
只拷贝源对象的自身属性(不拷贝继承属性),也不拷贝不可枚举的属性(enumerable: false)。
16. 创建对象

  1. 对象直接量
var a = {}
  1. new
var obj1 = new Object();
  1. Object.create()创建
    第一个参数:传入要继承的原型(prototype)对象
var obj1 = Object.create({
  name: "ys",
  age: 12
});
console.log(obj1);     //{}
console.log(obj1.age);   //12
//对象本身为空,但是原型链上数据不为空,存在obj1.age,所以可以访问到。
  1. 合并对象
Object.assign(a,b)

ES6部分

  1. 利用解构赋值获取接口返回的数据中的test,并给其默认值
  2. var let const的区别
  3. es6中用过什么
  4. promise
    可以很好的解决回调地狱。
    resolve
    reject
    Promise.all(), 同时执行结束之后
    Promise.race(),同时执行,有一个结束之后
  5. Class 翻译成 ES5 就是原型链
  6. async await

HTML5的新特性

新的内容标签:header nav content footer article aside

更好的单元格体系:

音频、视频API:video radio

画布(Canvas) API

地理(Geolocation) API

网页存储(Web storage) API:localStorage,sessionStorage

拖拽释放(Drag and drop) API

CSS部分

  1. 手机端开发,画出一个和屏幕一样宽的正方形,保证兼容性
  2. 弹性布局实现案例
  3. 媒体查询
  4. 定位,绝对定位和相对定位占文本流吗,固定定位尼
    static
    静态定位,元素默认定位。
    absolute
    绝对定位,元素会脱离文本流,相对于最近的已定位祖先元素(position:relative或position:absolute及position:fixed),如果元素的父级没有设置定位属性,则依据 body 元素左上角作为参考进行定位。
    relative
    相对定位,元素不会脱离文本流,无论是否进行移动,元素仍然占据原来的空间。相对于自己本身来进行定位。
    fixed
    固定定位,与绝对定位类似,但它是相对于浏览器窗口定位,并且不会随着滚动条进行滚动。最常见的一种用途是在页面中创建一个固定头部、固定脚部或者固定侧边栏。
    扩展:其他属性
    overflow:设置当元素的内容溢出其区域时发生的事情
    vertical-align:设置元素的垂直对齐方式
    z-index:设置元素的堆叠顺序,高的在前面,仅在定位元素上奏效,可取负值
  5. 怎么实现水平垂直居中
    display: flex;
    justify-content: center;
    align-items: center;
  6. 如何清楚浮动
    由于浮动元素不占文本流,导致父元素没有高度,边框,背景,margin padding设置值不能正确显示。
    方法:
    1)给父元素设置高度
    2)clear: both
    添加一个空div,或者父级div定义 伪类:after 和 zoom
<!-- 添加一个空div -->
<div>
	<div style="float: left">左浮</div>
	<div style="float: right">右浮</div>
	<div style="clear: both"></div>
</div>

<!-- 父级div定义 伪类:after 和 zoom -->
<style>
.clearfloat:after{display:block;clear:both;content:"";visibility:hidden;height:0}
.clearfloat{zoom:1}
</style>
<div class="clearfloat">
	<div style="float: left">左浮</div>
	<div style="float: right">右浮</div>
</div>

3)父级div定义 overflow:hidden
overflow:hidden 属性相当于是让父级紧贴内容,这样即可紧贴其对象内内容(包括使用float的div盒子),从而实现了清除浮动。

<div style="overflow:hidden">
	<div style="float: left">左浮</div>
	<div style="float: right">右浮</div>
</div>
  1. visibility: hidden 和 display: none 区别
    visibility: hidden,看不见却可以摸到,将元素隐藏,而它所占据的空间位置仍然存在,也即是说它仍具有高度、宽度等属性值。
    display: none, 将元素的显示设为无,即在网页中不占任何的位置。HTML元素(对象)的宽度、高度等各种属性值都将“丢失”。

HTTP协议

  1. http缓存
    通过http中,浏览器将最后修改时间发送请求给web服务器,web服务器收到请求后跟服务器上的文档最后修改的时间对比,如果web服务器上最新文档修改时间小于或者等于浏览器发送过来的,则发送304给浏览器,使用缓存版本
    在这里插入图片描述
    2.状态码
    400 Bad Request
    403 Forbidden:服务器禁止访问
    404 Not Found: 资源未找到
    500 Internal Server Error: 仅仅告诉你服务器出错了
    502 Bad Gateway: 服务器自身是正常的,但访问的时候出错了
    503 Service Unavailable: 表示服务器当前很忙,暂时无法响应服务
    301 Moved Permanently即永久重定向,对应着302 Found,即临时重定向。

综合性问题

  1. 浏览器兼容性
    Chrome 中文界面下默认会将小于 12px 的文本强制按照 12px 显示,可通过加入 CSS 属性 -webkit-text-size-adjust: none; 解决。
  2. JSBridge的实现原理
    构建 Native 和非 Native 间消息通信的通道,而且是 双向通信的通道。

开放性问题

  1. 为什么离职
  2. 平时项目中遇到过怎样的问题,怎样解决的

加油!!!

原文地址:https://blog.csdn.net/mwn_cookie/article/details/103400711
广告一下
热门教程
PHP7报A non well formed numeric value encountered 0
Linux系统下关闭mongodb的几种命令分享 0
mongodb删除数据、删除集合、删除数据库的命令 0
Git&Github极速入门与攻坚实战课程 0
python爬虫教程使用Django和scrapy实现 0
libnetsnmpmibs.so.31: cannot open shared object file 0
数据结构和算法视频教程 0
redis的hash结构怎么删除数据呢? 0
C++和LUA解析器的数据交互实战视频 0
mongodb errmsg" : "too many users are authenticated 0
C++基础入门视频教程 0
用30个小时精通C++视频教程可能吗? 0
C++分布式多线程游戏服务器开发视频教程socket tcp boost库 0
C++培训教程就业班教程 0
layui的util工具格式时间戳为字符串 0
C++实战教程之远程桌面远程控制实战 1
网络安全培训视频教程 0
LINUX_C++软件工程师视频教程高级项目实战 0
C++高级数据结构与算法视频教程 0
跨域问题很头疼?通过配置nginx轻松解决ajax跨域问题 0
相关文章
【译】JavaScript数据结构(3):单向链表与双向链表 16
10个JavaScript难点 16
【译】苹果拒绝支持PWA,有损Web的未来 16
iView 一周年了,同时发布了 2.0 正式版,但这只是开始... 16
nodejs+mongodb构建一个简单登录注册功能 16
【译】JavaScript数据结构(4):树 16
组件化开发与黑箱 16
TypeScript - 不止稳,而且快 16
webpack3+anujs+ReactCSSTransitionGroup 16
原生js实现图片放大镜效果 16
WEB缓存探究第二弹——实战 16
纯笔记:vfork 的一些使用场景(顺便讲一下 fork 的原理) 16
Android APP 内部捐赠实现(支付宝&amp;微信) 16
WKWebView 的一些小总结 16
模型评价(一) AUC大法 16
开始使用GraphQL 16
Webpack模块化原理简析 16
gulp使用问题记录 16
使用Angular4动画为页面添彩 16
Python27 Matplotlib (win64 python2.7) 安装及简单使用 16