前端相关技术知识点

面试总结

1.投其所好:比如说,面试的公司有大屏项目的话,那么在自我介绍的时候可以说自己做过大屏项目,再详细介绍自己做的大屏项目
2.把握主动权:不要问答模式,要把面试官的问题或者兴趣带到自己熟悉的领域,比如说,在介绍项目过程中,插入自己在项目中比较亮眼的工作,自然而然的把面试官带到你熟悉的领域去
3.活跃气氛:在面试过程中需要适当的活跃气氛(自己体会)
4.面试题链接

1.原型链

深入熟悉构造函数、实例对像、原型对象之前的关系
深入熟悉什么是原型链,原型链最终的指向是什么
深入熟悉如何拓展对象的属性与方法
深入熟悉为什么判断数组是否等于对象的时候使用instanceof,结果为true

2.类型判断

深入熟悉基本类型、引用类型有哪些,以及基本类型和引用类型存放在堆内存还是栈内存
深入熟悉类型判断的方法以及实现原理

3.继承

深入熟悉继承的多种方式和优缺点

4.作用域

深入熟悉var、let、const的特点以及区别
深入熟悉this指向
深入熟悉call、apply、bind的使用以及区别
深入熟悉箭头函数以及原理

5.函数

深入熟悉闭包、函数柯理化,了解偏函数和高阶函数
熟悉了解函数柯理化在vue框架实现中的使用(举例:判断真正的html标签还是自定义组件标签;抽象语法树ast转化成虚拟dom使用函数柯理化已经模板的缓存)
熟悉闭包的优缺点、以及内存溢出(内存泄漏)的原因和解决方案

6.事件循环机制

「事件循环机制学习视频」
深入熟悉事件循环机制的整个过程和原理
深入熟悉浏览器、eventLoop、call stack(执行栈)、web APIS、callback quene之间的关系以及执行顺序
深入熟悉宏任务和微任务,深入熟悉更新dom的时机,以及宏任务、微任务、更新dom的执行顺序前后
js为什么是单线程语言,能否多线程
js是单线程语言,为什么可以执行setTimeout等异步操作

7.异步编程

深入熟悉promise原理和实现,深入熟悉promise相关api「promise学习视频」
深入熟悉generator原理和实现「generator学习视频」
深入熟悉async/await原理和实现「async/await学习视频」

8.类

「类学习视频」
深入熟悉类的原理和实现
如何继承父类以及调用父类的方法(super)
new操作符的作用以及实现

9.ES6-ES11

「ES6-ES11学习视频」
ES6的新特性在面试过程中都会有被问到,所以学习视频多刷两边哦!

proxy的实现原理和使用

10.缓存策略

深入熟悉缓存策略机制
强制缓存和协商缓存的特点和区别
如何判断缓存结果是否过期(Expires/Cache-Control)
浏览器的缓存存放在哪里,如何在浏览器中判断强制缓存是否生效?
from memory cache 和 from disk cache又分别代表的是什么呢?
什么时候会使用from disk cache,什么时候会使用from memory cache呢?
状态码304是什么意思
如何判断服务器端请求资源发生改变(Last-Modified / If-Modified-Since和Etag / If-None-Match)

11.重绘和重排

深入熟悉重绘和重排,以及如何进行优化

12.防抖和节流

深入熟悉防抖和节流,防抖和节流的区别以及实现

13.事件冒泡、事件捕获和事件委托

深入熟悉事件冒泡、事件捕获和事件委托的区别、实现和运用场景

14.vue框架

「vue框架源码解析学习视频」
vue框架源码解析学习视频个人刷了两遍,最主要理解vue的实现原理,要做好笔记!!
底层框架问题:
(1)深入熟悉vue从编写页面代码到渲染页面的整个过程,以及vue做了什么事情?(字符串模板-抽象语法书-虚拟dom-真正dom的一系列过程)
(2)vue从编写页面代码到渲染页面的整个过程,哪一环节最消耗性能,vue的优化方案是?
(3)vue的双向绑定原理(数据劫持+发布订阅者模式)
(4)改变数据到视图更新的整一个过程(observe+deps+watcher+diff)
(5)observe进行数据劫持
(6)deps调控中心,dep.depend()/dep.notify()
(7)watcher(计算watch > 监听watch > 渲染watcher)
(8)diff算法原理
(9)什么是虚拟dom,虚拟dom的数据结构和作用,以及虚拟dom的二次提交
(10)数据劫持object.defineproperty
(11)发布订阅者模式和观察者模式的区别
(12)vue对数组api进行重写

vue原理问题:
(1)vue的生命周期,vue父组件和子组件的生命周期(父created - 子created - 子mounted - 父mounted)
(2)在mounted钩子函数里能否获取真正的dom(不能,在mounted使用setTimeout或者this.nextTick)
(3)nextTick的作用和使用
(4)为什么vue里面data是一个函数,而不是对象
(5)v-model的实现
(6)通讯方式:props、refs、eventBus、emit/on、attr/listener
(7)v-for和v-if为什么不能在同一个标签里公用(v-for和v-if的渲染顺序问题)
(8)v-for里的key属性作用(diff算法相关)
(9)路由hash和history的实现原理和区别,为什么hash改变,页面不会重新渲染(单页面应用)
(10)插槽,如何添加多个插槽
(11)mixins的作用是使用场景

vue路由
(1)路由hash和history的实现原理和区别,为什么hash改变,页面不会重新渲染(单页面应用)
(2)动态路由(addRouter)
(3)路由权限控制的实现
(4)路由缓存keepAlive的作用以及实现
(5)路由钩子(路由守卫):全局、组件级、单路由享用

vuex状态管理库
(1)深入熟悉状态管理库的整个流程
(2)为什么不直接改变state,而是要通过mutation来改变state(记录问题)
(3)mutation和action的区别,为什么mutation不能进行异步操作
(4)如何查看状态管理库的更新记录(vue-devtools)
(5)当页面进行刷新,状态管理库的数据消失了怎么处理

axios
(1)深入熟悉axios的二次封装
(2)axios的请求拦截以及响应拦截分别可以做什么配置

15.webpack

「webpack学习视频」
(1)webpack的实现原理(webpack_required引入依赖)
(2)webpack的性能优化(速度和体积,自动(tree-sharking和scope-hasting)和手动(happypack、ignorePlugin、externals、动态链接库、splitChunks))
(3)web-loader的执行顺序(从下往上,从右往左)
(4)sass-loader、css-loader、style-loader的区别以及作用
(5)file-loader和ulr-loader的区别以及作用
(6)实际项目中使用过哪些loader和plugin
(7)结合实际项目使用webpack做了哪些工作或者是性能优化

16.其他

(1)深拷贝和浅拷贝的区别,如何实现深拷贝
(2)Cookie、session和localStorage、以及sessionStorage之间的区别
(3)Echart的性能问题,修改数据使用setOptions api,使用dispose销毁Echart实例
(4)git合并部分代码使用cherry pick
(5)vue3发布日期2020.9.18,时间允许的话也去了解vue3新增特性以及实现原理,加分项
(6)前端微服务,加分项

17.css相关知识点

(1)CSS选择器
元素选择器、类选择器、ID选择器、属性选择器、通用选择器、伪类和伪元素

(2)盒子模型
盒子模型 = margin + border + padding + content
标准盒模型 和 IE盒模型区别在于width
标准盒模型:width = content
IE盒模型:width = content + padding + border

box-sizing: border-box / content-box
// 假如设置元素宽度为100px
box-sizing: border-box // IE盒模型:width = content + padding + border = 100px
box-sizing: content-box // 标准盒模型:width = content = 100px

(3)弹性布局

display: flex/inline-flex
flex-direction: row/row-reverse/column/column-reverse // 设置主轴方向
justify-content: flex-star/flex-end/center/space-between/space-around // 横坐标对齐
align-items: flex-star/flex-end/center/baseline/stretch // 纵坐标对齐
flex-wrap:  nowrap/wrap/wrap-reverse // 换行
order: 1(number) // 排序
flex-grow: 0 // 剩余空间按比例放大,默认为0
flex-shrink: 1 // 剩余空间按比例缩小,默认为1
flex-basis: auto // 如果主轴为水平,则设置这个属性,相当于设置项目的宽度。 原width将会失效
flex: 1 // flex属性是flex-grow, flex-shrink 和 flex-basis的简写,默认值为0 1 auto。后两个属性可选

(4)响应式布局和自适应布局
响应式布局与自适应布局原理相似,都是通过检测设备,根据不同设备的分辨率作适配。

响应式布局:根据设备的不同展示不同的网站风格(通过媒体查询判断,在不同的设备和分辨率下展示不同的网站风格),通过响应式设计能使网站在不同的设备上有更好的浏览阅读体验。

自适应布局:根据设备的不同而作出一些自适应样式的调整(不需要媒体查询判断,直接让每个元素通过相对宽度,不如说%,vw,em等改变容器的大小,字体的大小)

(5)BFC

Formatting context(格式化上下文) 是 W3C CSS2.1 规范中的一个概念。它是页面中的一块渲染区域,并且有一套渲染规则,它决定了其子元素将如何定位,以及和其他元素的关系和相互作用。

那么 BFC 是什么呢?
BFC 即 Block Formatting Contexts (块级格式化上下文),它属于上述定位方案的普通流。

具有 BFC 特性的元素可以看作是隔离了的独立容器,容器里面的元素不会在布局上影响到外面的元素,并且 BFC 具有普通容器所没有的一些特性。

通俗一点来讲,可以把 BFC 理解为一个封闭的大箱子,箱子内部的元素无论如何翻江倒海,都不会影响到外部。

创建或触发 BFC

只要元素满足下面任一条件即可触发 BFC 特性:
body 根元素
浮动元素:float 除 none 以外的值
绝对定位元素:position (absolute、fixed)
display 为 inline-block、table-cells、flex
overflow 除了 visible 以外的值 (hidden、auto、scroll)

BFC 特性及应用

同一个 BFC 下外边距会发生折叠(如果想要避免外边距的重叠,可以将其放在不同的 BFC 容器中。)
BFC 可以包含浮动的元素(即清除浮动)

(6)盒子居中
flex 布局实现 (元素已知宽度)

CSS 代码:

HTML 代码:

position (元素已知宽度)
父元素设置为:position: relative;
子元素设置为:position: absolute;
距上50%,据左50%,然后减去元素自身宽度的一半距离就可以实现

CSS代码:


HTML 代码:
love

position transform (元素未知宽度)
如果元素未知宽度,只需将上面例子中的 margin: -50px 0 0 -50px;替换为:transform: translate(-50%,-50%);

CSS 代码:


position(元素已知宽度)(left,right,top,bottom为0,maigin:auto )

CSS 代码:

HTML 代码:
 
love

table-cell 布局实现



HTML:

(7)position定位
熟悉了解定位每个属性值的作用:
static: 默认值。没有定位,元素出现在正常的流中。
absolute:生成绝对定位的元素,相对于 static 定位以外的第一个父元素进行定位。
relative:生成相对定位的元素,相对于其正常位置进行定位。
fixed:生成绝对定位的元素,相对于浏览器窗口进行定位。
inherit:规定应该从父元素继承 position 属性的值。

(8)float浮动
熟悉使用浮动进行页面布局以及清空浮动

你可能感兴趣的:(前端相关技术知识点)