面试题合集-CSS-HTML-JS-VUE 问题
CSS + HTML
CSS3有哪些新特性
1、css3选择器；
E:last-child 匹配父元素的最后一个子元素E。
E:nth-child(n)匹配父元素的第n个子元素E。
E:nth-last-child(n) CSS3 匹配父元素的倒数第n个子元素E。
2、边框特性；
圆角边框、多层边框、边框色彩与图片
3、多背景图；
4、颜色与透明度；
css3新增了新的颜色表示方式rgba与hsla
rgba分为两部分，rgb为颜色值，a为透明度
hala分为四部分，h为色相，s为饱和度，l为亮度，a为透明度
5、多列布局与弹性盒模型布局；
6、盒子的变形；
7、过渡与动画；
- 2D转换：transform
位移：transform：translate（100px，100px）
缩放：transform：scale（1，1）
旋转：transform：rotate（45deg） - 3D转换：transform
位移：transform：translate（100px，100px，100px）
旋转：transform：rotate（0，0，1，45deg）
3D呈现：transform-style
flat：子元素不开启3d空间
preserve-3d：子元素开启3d空间
透视：perspective（单位px）
人的眼睛到屏幕的距离；近大远小。 - 过渡：transition
transition包括四个子属性：transition-property transition-duration transition-timing-function transition-delay
transition：all（要过渡的属性） 2s（过渡时间） linear（速度方式） 1s（开始延迟时间） - 动画
animation-name: 动画名称(默认值为none)
animation-duration: 持续时间(默认值为0)
animation-timing-function: 时间函数(默认值为ease)
animation-delay: 延迟时间(默认值为0)
animation-iteration-count: 循环次数(默认值为1)
animation-direction: 动画方向(默认值为normal)
animation-play-state: 播放状态(默认值为running)
animation-fill-mode: 填充模式(默认值为none)
@keyframes test{
// from等同于0%，to等同于100%
0%{background-color: lightblue;}
30%{background-color: lightgreen;}
60%{background-color: lightgray;}
100%{background-color: black;}
}
8、web字体；
- word-wrap: normal | break-word
normal：使用浏览器默认的换行
break-all：允许在单词内换行 - text-overflow：clip | ellipsis
text-overflow设置或检索当当前行超过指定容器的边界时如何显示，属性有两个值选择：
clip：修剪文本
ellipsis：显示省略符号来代表被修剪的文本 - text-shadow
text-shadow可向文本应用阴影。能够规定水平阴影、垂直阴影、模糊距离，以及阴影的颜色 - text-decoration：text-fill-color | text-stroke-color | text-stroke-width
CSS3里面开始支持对文字的更深层次的渲染，具体有三个属性可供设置：
text-fill-color: 设置文字内部填充颜色
text-stroke-color: 设置文字边界填充颜色
text-stroke-width: 设置文字边界宽度
9、媒体查询；
10、阴影。
text-shadow: [<颜色><水平偏移><纵向偏移><模糊半径>] || [<水平偏移><纵向偏移><模糊半径><颜色>];
HTML5有哪些新特性
垂直居中几种方式
css的盒模型
css选择器有哪些？权重如何计算?
css 中哪些属性可继承，哪些不可以？
css 单位中 px、em 和 rem 的区别？
单位 rpx px vw和vh em rem
position的值有哪些，分别有什么作用？
简述你对BFC规范的理解
为什么会出现浮动？浮动元素会引起什么问题？怎么清除浮动？
::before和:after中单冒号和双冒号的区别是什么
css3新增伪类，和为元素有哪些？
rgba和opacity的透明效果有什么不同？
opacity: 0、visibility: hidden、display: none 区别？
简述弹性盒子flex布局及rem布局？
flex:1 到底代表什么?
如何解决margin“塌陷”？为什么会出现？
iframe 有哪些优缺点？
link与@import的区别
使用 css 怎么让 chrome 支持小于 12px 的文字比如 10px？
元素的alt和title有什么区别？
table的作用和优缺点是什么呢？
常见兼容性问题？
DOM和BOM有什么区别？
HTML全局属性(global attribute)有哪些（包含H5）？
其他
1.在移动端如何做好用户体验
2.如何解决长时间按住页面出现闪退的问题
3.解决iPhone以及iPad输入框的默认内阴影的问题
4.如何解决安卓手机圆角失效问题
5.如何解决ios设置中input按钮样式会被默认样式覆盖的问题
6.如何解决移动端click事件有300ms延迟问题
7.如何解决移动端html5中的date类型的input标签不支持placeholder属性的问题
8.如何禁止复制或选中文本
9.解决上下拖动滚动条时的卡顿问题
============================================================
JavaScript
数据类型
基本数据类型：String、Number、Boolean、Null、Undefined、Symbol、BigInt
引用数据类型：Object【Object是个大类，function函数、array数组、date日期…等都归属于Object】
null 和 undefined 的区别？
undefined是表示变量声明过但并未赋过值,它是所有未赋值变量默认值;
null表示一个变量将来可能指向一个对象,一般用于主动释放指向对象的引用。
数组操作
map set 区别
写一个数组去重的方法
写一个获取数组的最大值、最小值的方法
JS有哪些内置的对象
统计某一字符或字符串在另一个字符串中出现的次数
javascript的作用域的理解
什么是闭包？优缺点分别是什么？
javascript的内存(垃圾)回收机制？
微任务 、宏任务、js事件循环机制
Promise
Promise 是异步编程的一种解决方案，其实是一个构造函数，自己身上有all、reject、resolve这几个方法，原型上有then、catch等方法。
两个特点：对象的状态不受外界影响。一旦状态改变，就不会再变，任何时候都可以得到这个结果。
第一个对应resolve的回调，
第二个对应reject的回调
catch就是用来捕获异常的
all方法，所有异步操作执行完后并且执行结果都是成功的时候才执行回调。
race方法，相反的，谁先执行完成就先执行回调。先执行完的不管是进行了race的成功回调还是失败回调，其余的将不会再进入race的任何回调，但是会继续执行
all，race 接收一个数组参数,返回Promise对象，all使用.then 返回 所有方法结果的数组，race 使用.then 返回 最先成功的值
Promise.all([promiseClick3(), promiseClick2(), promiseClick1()])
.then(function(results){
console.log(results); // [1,2,3]
});
Promise.race([promiseClick3(), promiseClick2(), promiseClick1()])
.then(function(results){
console.log(‘成功’,results); // 2
},function(reason){
console.log(‘失败’,reason); // 3
});
说说bind、call、apply的区别？并手写实现一个bind的方法
call可以接收一个参数列表，apply只接受一个参数数组。 bind绑定完之后返回一个新的函数，不执行。
http都有哪些状态码？
状态码200表示服务器响应成功，也就是服务器找到了客户端请求的内容，并且将内容返回给客户端。
状态码302代表临时跳转。例如：URL地址A可以向URL地址B上跳转，但这并不是永久性的，在经过一段时间后，URL地址A还可能向URL地址C上跳转。
状态码301和状态码302相似，不同的是状态码301往往代表的是永久性的重定向，值得注意的是，这种重定向跳转，从严格意义来讲不是服务器跳转，而是客户端跳转的。这个“跳”的动作是服务器是通过回传状态码301来下达给客户端的，让客户端完成跳转。
状态码304服务器通过返回状态码304可以告诉客户端请求资源成功，但是这个资源不是由服务器提供返回给客户端的，而是客户端本地浏览器缓存中就有的这个资源，因为可以从缓存中获取这个资源，从而节省传输的开销。
状态码403代表请求的服务器资源权限不够，也就是说，没有权限去访问服务器的资源，或者请求的IP地址被封掉了。
状态码404代表服务器上没有该资源，或者说服务器找不到客户端请求的资源，是最常见的请求错误码。
状态码500代表程序错误，也就是说请求的网页程序本身报错了。在服务器端的网页程序出错。由于现在的浏览器都会对状态码500做一定的处理，所以在一般情况下会返回一个定制的错误页面。
如何取消http请求
XHR abort()
axios cancel()
fetch signal
提取链接的href
输入 URL 到页面展示
DNS 解析:将域名解析成 IP 地址
TCP 连接：TCP 三次握手
发送 HTTP 请求
服务器处理请求并返回 HTTP 报文
浏览器解析渲染页面
断开连接：TCP 四次挥手
浏览器内多个标签页之间的通信方式有哪些？
优雅降级和渐进增强
typeof(‘abc’)和typeof 'abc’都是string, 那么typeof是操作符还是函数？
Iframe 有什么好处，有什么坏处？
说说你对SVN和GIT的理解和区别
箭头函数有哪些特点？
说说你对this的理解
new操作符的理解是什么？手动实现一个new方法
new操作符具体干了什么呢？
聊下类 ，什么是类 class
构造函数的特点
javascript中继承的实现方法
如何通过new构造对象。
面向对象的特性
面向对象编程三大特点概述
原型 原型链
JSONP实现跨域
ajax请求
异步加载的方式
请解释一下 JavaScript 的同源策略？
什么是回流，什么是重绘
循环中怎么等待异步方法执行结束在循环
ts 怎么定义类型
============================================================
VUE
谈谈你对MVVM开发模式的理解？
说说你对 SPA 单页面的理解，它的优缺点分别是什么？
怎样理解 Vue 的单向数据流？
谈谈你对 Vue 生命周期的理解？
Vue 的父组件和子组件生命周期钩子函数执行顺序？
父组件可以监听到子组件的生命周期吗？
Vue 是如何实现数据双向绑定的？
Vue 框架怎么实现对象和数组的监听？
直接给一个数组项赋值，Vue 能检测到变化吗？
Vue 怎么用 vm.$set() 解决对象新增属性不能响应的问题
虚拟 DOM 的优缺点？
虚拟 DOM 实现原理？
computed 和 watch 的区别和运用的场景？
Vue 中的 key 有什么作用？
你有对 Vue 项目进行哪些优化？
v-if 和 v-show 的区别
vue - router 路由守卫
vuex怎么实现的
vuex怎么运行的
对于 vue3.0 特性你有什么了解的吗？
vue2 和 vue3 的区别
为什么vue3 要用 proxy？
============================================================
Node
请介绍一下 node 里的模块是什么
请介绍一下 require 的模块加载机制
加载模块时，为什么每个模块都有__dirname,__filename 属性呢，new Module 的时候我们看到 1.1 部分没有这两个属性的，那么这两个属性是从哪里来的
我们知道 node 导出模块有两种方式，一种是 exports.xxx=xxx 和 Module.exports={}有什么区别吗
请介绍一下 Node 事件循环的流程
Node 的异步 I/O
1、 请介绍一下 Node 事件循环的流程
2 、在每个 tick 的过程中，如何判断是否有事件需要处理呢？
3 、请描述一下整个异步 I/O 的流程
V8 的垃圾回收机制
1、如何查看 V8 的内存使用情况
2、V8 的内存限制是多少，为什么 V8 这样设计
3、V8 的内存分代和回收算法请简单讲一讲
新生代
老生代
标记清楚算法的问题
哪些情况会造成 V8 无法立即回收内存
请谈一下内存泄漏是什么，以及常见内存泄漏的原因，和排查的方法
Buffer 模块
1、新建 Buffer 会占用 V8 分配的内存吗
2、Buffer.alloc 和 Buffer.allocUnsafe 的区别
3、Buffer 的内存分配机制
4、Buffer 乱码问题
webSocket
1、webSocket 与传统的 http 有什么优势
2、webSocket 协议升级时什么，能简述一下吗？
https
1、https 用哪些端口进行通信，这些端口分别有什么用
2、身份验证过程中会涉及到密钥， 对称加密，非对称加密，摘要的概念，请解释一下
3、为什么需要 CA 机构对证书签名
4、https 验证身份也就是 TSL/SSL 身份验证的过程
进程通信
1、请简述一下 node 的多进程架构
2、请问创建子进程的方法有哪些，简单说一下它们的区别
3、请问你知道 spawn 在创建子进程的时候，第三个参数有一个 stdio 选项吗，这个选项的作用是什么，默认的值是什么。
4、请问实现一个 node 子进程被杀死，然后自动重启代码的思路
5、在 7.4 的基础上，实现限量重启，比如我最多让其在 1 分钟内重启 5 次，超过了就报警给运维
6、如何实现进程间的状态共享，或者数据共享
中间件
1、如果使用过 koa、egg 这两个 Node 框架，请简述其中的中间件原理，最好用代码表示一下
响应性是一种可以使我们声明式地处理变化的编程范式。简单来讲就是当更改响应式数据时，视图会随即自动更新。而实现这个功能的原理就是劫持数据，收集依赖，当数据发生变化时，执行相应的依赖（副作用/更新视图）。
双向绑定是数据变化驱动视图更新，视图更新触发数据变化。其实就是v-model的功能，而我们知道v-model只是一个语法糖。因此如果要问双向绑定的原理，思路应该是如何实现这个语法糖。其原理是把input的value绑定data的一个值，当原生input的事件触发时，用事件的值来更新data的值。
BTW: 其实最初并没有关注这个问题，但是碰到面试的人也是这样的想法，同时发现网上有好多类似的观点，因此觉得有必要把这些概念理清。当然这也是个人观点，如有不对，还请指出。
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
