前言
- 又至一年金九银十,笔者不知道是幸运呢还是不幸,笔者也再一次加入到了换工作的大流中,经历过大大小小
10
多家公司的洗礼。连肝三天整理记下一些常问和笔者碰见的不常见问题(但却重要的)问题,涉及HTML、CSS、JavaScript、TypeScript、Vue、React、Webpack
、浏览器、手撕代码及其他问题。
HTML
HTML5
有哪些新特性?
- 拖拽释放
(Drag and drop) API
; - 语义化更好的内容标签
(header,nav,footer,aside,article,section)
; - 音频、视频
API (audio,video)
; - 画布
(Canvas) API
、矢量图SVG
; - 地理
(Geolocation) API
; - 本地离线存储
localStorage
长期存储数据,浏览器关闭后数据不丢失;sessionStorage
的数据在浏览器关闭后自动删除; - 表单控件,
calendar、date、time、email、url、search...
; - 新的技术
Web Worker, WebSocket...
; SVG
。
对 HTML5
语义化的理解?列举一些废弃及新增的标签?
- 语义化
-
页面的 内容结构化,结构更清晰,便于对浏览器、搜索引擎解析;即使在没有样式
CSS
情况下也以一种文档格式显示,并且是容易阅读的; -
搜索引擎的爬虫也依赖于
HTML
标记来确定上下文和各个关键字的权重,利于SEO
; -
使阅读源代码的人对网站更容易将网站分块,便于阅读维护理解。
-
- 新增标签
header、footer、section、nav、article、hgroup、aside、video、audio
...
- 移除标签
- 纯表现的元素:
basefont、big、center、font、s、strike、tt、u
; - 对可用性产生负面影响的元素:
frame、frameset、noframes
。
- 纯表现的元素:
meta
标签有什么作用?介绍一下?
行内元素和块级元素的区别?
- 行内元素会在一条直线上排列,都是同一行的,水平方向排列。块级元素各占据一行,垂直方向排列。块级元素从新行开始结束接着一个断行。
- 块级元素可以包含行内元素和块级元素。行内元素不能包含块级元素。
- 行内元素设置
width
无效,height
无效(可以设置line-height
),margin、padding
上下无效。
什么是渐进增强和优雅降级?
- 渐进增强(
progressive enhancement
):针对低版本浏览器进行构建页面,保证最基本的功能,然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。 - 优雅降级(
graceful degradation
):一开始就构建完整的功能,然后再针对低版本浏览器进行兼容。
iframe
如何和父窗口通信?
iframe
内部打开一个链接会发生什么?
areaObject.target=_blank|_parent|_self|_top
- 当设置
iframe
内部的a
标签target
属性为_black
时,无论嵌套多少层iframe
都会在最外层的网页中新开一个页面; - 当设置
iframe
内部的a
标签target
属性为_parent
时,会把当前iframe
的父级页面替换; - 当设置
iframe
内部的a
标签target
属性为_self
时,会把 iframe 自身替换; - 当设置
iframe
内部的a
标签target
属性为_top
时,无论嵌套多少层iframe
都会替换最外层的网页。
CSS
CSS3
有哪些新增属性?
box-shadow
、text-shadow
、animate
、transfrom
、transition
、border-radius
等等。
animate
、transfrom
和 transition
有什么区别?
CSS
动画如何优化性能?
will-change
属性:在浏览器执行动画之前,提前告诉浏览器,此处需要GPU
加速,提高显示效果,但动画结束后要及时去除这个属性。translate3d
进行GPU
加速。requestAnimationFrame API
。
position
属性有哪些值?介绍下?
inherit、static、relative、absolute、fixed、sticky
;- position(五种属性,以及每个属性的特点)
不使用 position:sticky;
属性如何实现相应效果?
- 滚动添加事件,获取滚动高度,判断滚动高度改变对应需要粘性定位的元素的
position
属性; - 滚动添加事件,通过元素的
getBoundingClientRect
方法,通过top
值判断距离顶部的高度(适用于不易获取滚动高度的情况),改变对应需要粘性定位的元素的position
属性。
如何使一个元素不可见?有哪些方式?
display: none;
visibility: hidden;
position
移除可是区域position index
负值transform
opacity: 0; filter:Alpha(opacity=0)
height: 0; overflow: hidden;
background-color: transparent;
重绘和回流?哪些情况重绘,哪些回流?
- 回流:
Render Tree
中部分或全部元素的尺寸、结构、或某些属性发生改变时,浏览器重新渲染部分或全部文档的过程称为回流。每个页面至少需要一次回流,就是在页面第一次加载的时候。 - 重绘:当页面中元素样式的改变并不影响它在文档流中的位置时(例如:
color、background-color、visibility
等),这些属性只是影响元素的外观,风格,而不会影响布局的,浏览器会将新样式赋予给元素并重新绘制它,这个过程称为重绘。 - 回流必将引起重绘,而重绘不一定会引起回流。
九宫格,使用 CSS
如何实现鼠标移入显示不同的边框(不额外占用格子宽度)?
怎么实现一个 9/16
自适应的的区域?
padding-bottom: 56.25%;
.
padding
的百分比基于什么?
- 父级对象的
width
。
移动端适配1px问题?
- 使用
transform: scale(0.5)
。
选择器的优先级?
!important > 内联样式 > id选择 > (class选择 = 伪类选择) > (标签选择 = 伪元素选择)
伪类和伪元素的区别?举例。
元素水平垂直居中方法?定宽高和不定宽高。
flex
和 grid
介绍?
双飞翼布局实现方式有哪些?
BFC、IFC、GFC、FFC
的区别?
如果需要手动写动画,你认为最小时间间隔是多久,为什么?
JavaScript
什么是原型和原型链?
JavaScript
实现继承的几种方式?
- JS实现继承的几种方式
ES6 class
语法。
JavaScript
的基本数据类型有哪些?
String、Number、Boolean、Null、Undefined、Symbol、BigInt
。
如何判断数据类型?有哪些方式?
typeof
instanceof
- 特殊:
isNaN、isArray、prototype、constructor...
- 最好:
Object.prototype.toString.call()
new 操作做了什么事情?
什么是闭包?有什么作用?
- 什么是闭包
- 定义:闭包是指有权访问另一个函数作用域中的变量的一个函数。简单的说,你可以认为闭包是一个特别的函数,他能够读取其他函数内部变量的函数。
- 自由变量:在当前作用域没有定义,在父作用域及以上定义了,他会一层一层的往上找。闭包的中那个没有被回收的变量就是自由变量。自由变量是在函数定义的那里一层层的往上找。
- 作用
- 希望变量长期驻扎在内存当中(一般函数执行完毕,变量和参数会被销毁);
- 避免全局变量的污染。
什么是内存泄漏?哪些情况会造成?
介绍一下垃圾回收机制?
事件委托?
ES6
有哪些新特性?
模块化有哪些方式?
CommonJS
和 ES6
模块化有什么区别?
数组哪些方法会改变原属组?
push、pop、shift、unshift、splice、reverse、sort
。
for, for...in,for...of,forEach, map
的区别?
- 返回值:
for, for...in,for...of
无返回值,forEach
返回undefined
,map
返回操作后数组。 - 空位:
for...in,forEach,map
跳过空位,for,for...of
不跳过空位。 break、continue
:for,for...of,for...in
可以打断,forEach,map
语法错误;代码无法执行。
深拷贝和浅拷贝的区别?怎么实现一个深拷贝?
B
复制了A
,当修改A
时,看B
是否会发生变化,如果B
也跟着变,说明这是浅拷贝;如果 `B 没变,那就是深拷贝。
...
、concat
和 slice
是深拷贝还是浅拷贝?
...
对基本数据类型是深拷贝,引用类型是浅拷贝。concat
和slice
是浅拷贝。
介绍一下 Promise
?
Promise
可以一直执行 then
方法吗?
- 可以
const promise = new Promise(function(resolve, reject) {
// ... some code
});
promise.then().then()
Proxy
的作用?有哪些方法?
防抖、节流区别及实现?
虚拟 Dom
一定比真实 Dom
快吗?什么情况下不是?
- 不一定;仅仅是一个元素或较少元素,那么后者还是最快的。
- 虚拟
Dom
VS 真实Dom
虚拟Dom | 真实Dom | | ------------------------------------ | ------------------------------------ | | 更新的更快 | 更新的较慢 | | 不能直接更新HTML | 可以直接更新HTML | | Dom操作非常便利 | Dom操作非常昂贵 | | 内存无浪费 | 内存浪费严重
公众号打开浏览器,JavaScript
如何关闭浏览器回到公众号窗口?
WeixinJSBridge.call('closeWindow')
TypeScript
TypeScript
有哪些基本数据类型?
- 原始数据类型:
boolean、number、string、null、undefined、Symbol
; - 非原始数据类型:数组、
Tuple、enum、never、void、any
、联合类型、函数类型。
interface 和 type 的区别?
interface
能够声明合并,type
不能;type
可以声明 基本类型,联合类型,元组 的别名,interface
不行;type
语句中可以使用typeof
获取类型实例;type
支持类型映射,interface
不支持。
void
和 never
的区别?
void
类型表示没有任何类型。 一般用于一个方法没有返回值的情况。(方法没有返回值将得到undefined
,但是我们需要定义成void
类型,而不是undefined
类型。)never
类型表示的是那些永不存在的值的类型,包括null
和undefined
。(never
类型是不会有返回值的函数表达式,或箭头函数表达式的返回值类型,也可以是永远不会为真的变量。)
怎么声明一个函数既可以接受字符串返回字符串也可以接受数值返回数值?
- 声明两个同名函数、泛型
泛型的作用?常用的泛型有哪些?
- 作用:参数化类型
- TS 一些工具泛型的使用及其实现
Vue
为什么 Vue
叫渐进式框架?
- 渐进式的含义:没有多做职责之外的事。
Vue
没有强主张(每个框架都不可避免会有自己的一些特点,从而会对使用者有一定的要求)
,你可以在原有大系统的上面,把一两个组件改用它实现,当jQuery
用;也可以整个用它全家桶开发,当Angular
用;还可以用它的视图,搭配你自己设计的整个下层用。你可以在底层数据逻辑的地方用OO(object-oriented)
和设计模式的那套理念,也可以函数式,都可以,它只是个轻量视图而已,只做了自己该做的事,没有做不该做的事,仅此而已。
介绍一下 Vue
的生命周期?
diff
算法原理?
父子组件渲染及卸载的流程?
双向绑定原理?
Vue3.0
的变化有哪些?
为什么替换 defineProperty
为 Proxy
?两者有什么优缺点?
v-if
和 v-for
优先级?
2.0 v-for
高于v-if
,3.0 v-if
高于v-for
。
watch
和 computed
有什么区别?
nextTick
的原理及使用场景?
Vue3
的 composition
解决了什么问题?
data
、method
重名的问题;- 隐形依赖的问题: 项目大时一个页面几十个
mixin
模块混入,然后各个mixin
之间还有data
参数和method
相互调用。
React
介绍下 React
生命周期(16前、16.3、16.4
)?
React
和 Vue
的区别?
Component
和 PureComponent
的区别?
PureComponent
通过props
和state
的浅对比来实现shouldComponentUpdate()
。- 注意:在
PureComponent
中,如果包含比较复杂的数据结构,当深层的数据发生变化的时候,因为浅对比所以导致界面不会更新。
受控组件 和 非受控组件 的区别?
受控组件 | 非受控组件 |
---|---|
1. 没有维持自己的状态 | 1. 保持着自己的状态 |
2.数据由父组件控制 | 2.数据由 DOM 控制 |
3. 通过 props 获取当前值,然后通过回调通知更改 | 3. Refs 用于获取其当前值 |
有状态 和 无状态的区别?
有状态组件 | 无状态组件 |
---|---|
1. 在内存中存储有关组件状态变化的信息 | 1. 计算组件的内部的状态 |
2. 有权改变状态 | 2. 无权改变状态 |
3. 包含过去、现在和未来可能的状态变化情况 | 3. 不包含过去,现在和未来可能发生的状态变化情况 |
4. 接受无状态组件状态变化要求的通知,然后将 props 发送给他们。 | 4.从有状态组件接收 props 并将其视为回调函数。 |
组件传值有哪些情况,对应有哪些方式?
React
和 Vue
的 diff
算法比较?
setState
是同步还是异步?
知道 Fiber
吗?介绍一下?
路由实现方式,与常规路由区别?
- react-router的实现原理
- 常规路由 VS
React
路由 主题 | 常规路由 | React 路由 | | ---------- | ----------------------------- | ---------------- | | 参与的页面 | 每个视图对应一个新文件 | 只涉及单个HTML页面 | | URL 更改 | HTTP 请求被发送到服务器并且接收相应的 HTML 页面 | 仅更改历史记录属性 | | 体验 | 用户实际在每个视图的不同页面切换 | 用户认为自己正在不同的页面间切换
Hooks
有什么优缺点?
useMemo
和 useCallback
的区别?
-
相同:
useMemo
和useCallback
接收的参数都是一样,第一个参数为回调 第二个参数为要依赖的数据- 仅仅依赖数据发生变化, 才会重新计算结果,起缓存作用。
-
不同:
useMemo
计算结果是return
回来的值, 主要用于缓存计算结果的值 ,应用场景如: 需要计算的状态useCallback
计算结果是函数, 主要用于缓存函数,应用场景如: 需要缓存的函数,因为函数式组件每次任何一个state
的变化 整个组件 都会被重新刷新,一些函数是没有必要被重新刷新的,此时就应该缓存起来,提高性能,和减少资源浪费。
-
不要滥用会造成性能浪费,
react
中减少render
就能提高性能,所以这个仅仅只针对缓存能减少重复渲染时使用和缓存计算结果。
useEffect
有什么作用?
Hooks
使用有遇到什么问题?
Hooks
如何判断子组件是否需要更新?
useMemo
将变化需要更新子组件的数据放入依赖(第二个参数)中。
有自己封装过 Hooks
吗?介绍一下?
useWinSize
:window size
变化返回变化后的宽高。
有做过性能优化吗?有哪些方式?
Webpack
Webpack
有哪些配置项?
Webpack
构建流程?
热更新原理?
dev-server
解决跨域原理?
Babel
的原理?
loader
和 plugin
的作用?有自己实现过吗?
如何提高 Webpack
的构建速度?
CommonsChunkPlugin
来提取公共代码externals
配置来提取常用库- 利用
DllPlugin
和DllReferencePlugin
预编译资源模块 通过DllPlugin
来对那些我们引用但是绝对不会修改的npm
包来进行预编译,再通过DllReferencePlugin
将预编译的模块加载进来。 Happypack
实现多线程加速编译。webpack-uglify-parallel
(多核并行压缩来提升压缩速度)提升uglifyPlugin
的压缩速度。- Tree-shaking 和
Scope Hoisting
来剔除多余代码。
浏览器
cookie、session
和 token
的区别?
地址栏输入 URL
发生了什么?
浏览器缓存策略?
浏览器缓存方式有哪些?
DNS
域名解析过程?
http
三次握手和四次挥手?
HTTP1.0、HTTP1.1
和 HTTP2.0
的区别?
https 加密过程?
什么是事件循环?
如何区分任务是微任务还是宏任务?
- 宿主环境(使javascript完美运行的环境,常见的有浏览器和
Node
)提供的叫宏任务,由语言标准提供的叫微任务。 - 常见的
macrotask
有:<script>
(同步的代码执行)setTimeout
setInterval
setImmediate
(Node
环境中)requestAnimationFrame
I/O
UI rendering
- 常见的microtask有:
process.nextTick
(Node
环境中)Promise.then()
Object.observe
(基本上已经废弃)MutationObserver
什么是跨域?有哪些解决方案?
- 由
浏览器的同源策略
造成的,是浏览器对JavaScript
实施的安全限制。URL 中协议、域名、端口有一个不同即视为非同源,会产生跨域。 - 九种跨域方式实现原理(完整版)
ajax
、fetch
和 axios
的区别?
页面间通信有哪些方式?
WebSocket
和 http
的区别?
XSS
和 CSRF
区别及防范?
手写代码
Promise
柯里化
发布订阅模式
LRU
淘汰算法
二叉树求和
多维数组扁平去重
其他
前端性能优化有哪些方式?
如何实现埋点?保持数据不丢失?
base64
的作用及优缺点?
git
常用命令?merge
和 rebase
的区别?
git submodule
知道吗?
怎么去选择一个框架或者插件(例如React、Vue
,Moment.js、Day.js
)呢?
你未来的职业规划是怎样的?
哪个项目是你做得最好的?介绍一下。
你对下一份工作的期望,更看重哪些方面?
面试好文
- ES6 入门教程
- 前端面经 - 看这篇就够了(帮你拿到大厂offer
- 「面试题」20+Vue面试题整理
- 关于webpack的面试题
- 必须要会的 50 个React 面试题
- React Hooks面试题
- Git常用操作指南
往期精彩
- 前端开发基本规范
- 从0搭建Vite + Vue3 + Element-Plus + Vue-Router + ESLint + husky + lint-staged
- 「前端进阶」JavaScript手写方法/使用技巧自查
- JavaScript设计模式之简介及创建型模式
- 公众号打开小程序最佳解决方案(Vue)
- Axios你可能不知道使用方式
「点赞、收藏和评论」
❤️关注+点赞收藏+评论+分享❤️,手留余香,谢谢🙏大家。