金三银四前端面试题准备

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…；

什么是渐进增强和优雅降级？

渐进增强（progressive enhancement）：针对低版本浏览器进行构建页面，保证最基本的功能，然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。
优雅降级（graceful degradation）：一开始就构建完整的功能，然后再针对低版本浏览器进行兼容。

CSS

元素水平垂直居中方法？

行内元素和块级元素的区别？

行内元素会在一条直线上排列，都是同一行的，水平方向排列。块级元素各占据一行，垂直方向排列。块级元素从新行开始结束接着一个断行。
块级元素可以包含行内元素和块级元素。行内元素不能包含块级元素。
行内元素设置 width 无效，height 无效(可以设置 line-height)，margin、padding 上下无效。

CSS3 有哪些新增属性？

box-shadow、text-shadow、animate、transfrom、 transition 、border-radius等等。

animate、transfrom 和 transition 有什么区别？

css中关于transform、transition、animate的区别.

重绘和回流？哪些情况重绘，哪些回流？

回流：Render Tree 中部分或全部元素的尺寸、结构、或某些属性发生改变时，浏览器重新渲染部分或全部文档的过程称为回流。每个页面至少需要一次回流，就是在页面第一次加载的时候。
重绘：当页面中元素样式的改变并不影响它在文档流中的位置时（例如：color、background-color、visibility等），这些属性只是影响元素的外观，风格，而不会影响布局的，浏览器会将新样式赋予给元素并重新绘制它，这个过程称为重绘。
回流必将引起重绘，而重绘不一定会引起回流。

区别：

引起DOM树结构变化，页面布局变化的行为叫回流，且回流一定伴随重绘。
只是样式的变化，不会引起DOM树变化，页面布局变化的行为叫重绘，且重绘不一定会便随回流。

何时发生回流

添加或删除可见的DOM元素
元素的位置发生变化
元素的尺寸发生变化（包括外边距、内边框、边框大小、高度和宽度等）
内容发生变化，比如文本变化或图片被另一个不同尺寸的图片所替代。
页面一开始渲染的时候（这肯定避免不了）
浏览器的窗口尺寸变化（因为回流是根据视口的大小来计算元素的位置和大小的）

如何画一条0.5px的线？

tansform
渐变

 #line1 {
            border-bottom: 1px solid black;
            transform: scaleY(0.5);
        }

选择器的优先级？

!important > 内联样式 > id选择 > （class选择 = 伪类选择） > (标签选择 = 伪元素选择)

若是行内选择符，则加1、0、0、0
若是ID选择符，则加0、1、0、0
若是类选择符/伪类选择符，则分别加0、0、1、0
若是元素选择符，则分别加0、0、0、1

伪类和伪元素的区别？

伪类本质上是为了弥补常规CSS选择器的不足，以便获取到更多信息；
伪元素本质上是创建了一个有内容的虚拟容器；
CSS3中伪类和伪元素的语法不同；伪类 :link :hover ，伪元素 ::before ::after
可以同时使用多个伪类，而只能同时使用一个伪元素；

flex 和 grid 介绍？

Flex 是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。
网格布局（Grid）是最强大的 CSS 布局方案。它将网页划分成一个个网格，可以任意组合不同的网格，做出各种各样的布局。

区别
Flex 布局是轴线布局，只能指定"项目"针对轴线的位置，可以看作是一维布局。Grid 布局则是将容器划分成"行"和"列"，产生单元格，然后指定"项目所在"的单元格，可以看作是二维布局。Grid 布局远比 Flex 布局强大。

介绍下BFC

BFC(Block formatting context)直译为"块级格式化上下文"。它是一个独立的渲染区域，其中的元素布局是不受外界的影响，并且在一个BFC中，块盒与行盒（行盒由一行中所有的内联元素所组成）都会垂直的沿着其父元素的边框排列。

触发 BFC
只要元素满足下面任一条件即可触发 BFC 特性：

body 根元素
浮动元素：float 除 none 以外的值
绝对定位元素：position (absolute、fixed)
display 为 inline-block、table-cells、flex
overflow 除了 visible 以外的值 (hidden、auto、scroll)

如果需要手动写动画，你认为最小时间间隔是多久，为什么？

16.7ms.
多数显示器默认频率是60Hz，即1秒刷新60次，所以理论上最小间隔为1/60*1000ms ＝ 16.7ms

JavaScript

JavaScript 的基本数据类型有哪些？

JS 中分为七种内置类型，七种内置类型又分为两大类型：基本类型和对象（Object）。
基本类型有六种： null，undefined，boolean，number，string，symbol。

从输入url 到看到页面发生了什么？

DNS解析
发起TCP链接
发送HTTP请求
服务器响应请求并返回HTTP报文
浏览器解析渲染页面
连接结束

0.1 + 0.2 === 0.3 吗？为什么？

JavaScript 使用 Number 类型来表示数字（整数或浮点数），遵循 IEEE 754 标准，通过 64 位来表示一个数字。

1 符号位，0 表示正数，1 表示负数 s
11 指数位（e）
52 尾数，小数部分（即有效数字）

最大安全数字：Number.MAX_SAFE_INTEGER = Math.pow(2, 53) - 1，转换成整数就是 16 位，所以 0.1 === 0.1，是因为通过 toPrecision(16) 去有效位之后，两者是相等的。

在两数相加时，会先转换成二进制，0.1 和 0.2 转换成二进制的时候尾数会发生无限循环，然后进行对阶运算，JS 引擎对二进制进行截断，所以造成精度丢失。

所以总结：

精度丢失可能出现在进制转换和对阶运算中

new 操作做了什么事情？

创建了一个全新的对象；
让this 指向新创建的对象；
执行构造函数里面的代码，给这个新对象添加属性和方法；
返回这个新的对象（所以构造函数里面不需要return）。

什么是闭包？有什么作用？

1.什么是闭包?

定义：闭包是指有权访问另一个函数作用域中的变量的一个函数。简单的说，你可以认为闭包是一个特别的函数，他能够读取其他函数内部变量的函数。
自由变量：在当前作用域没有定义，在父作用域及以上定义了，他会一层一层的往上找。闭包的中那个没有被回收的变量就是自由变量。自由变量是在函数定义的那里一层层的往上找。
闭包产生的本质s：当前环境中存在指向父级作用域的引用

2.作用

希望变量长期驻扎在内存当中（一般函数执行完毕，变量和参数会被销毁）；
避免全局变量的污染。
私有化变量
创建模块

3.一般如何产生闭包?

返回函数
函数当做参数传递

什么是作用域链？

首先要了解作用域链，当访问一个变量时，编译器在执行这段代码时，会首先从当前的作用域中查找是否有这个标识符，如果没有找到，就会去父作用域查找，如果父作用域还没找到继续向上查找，直到全局作用域为止，而作用域链，就是有当前作用域与上层作用域的一系列变量对象组成，它保证了当前执行的作用域对符合访问权限的变量和函数的有序访问。

ES6 有哪些新特性？

新增symbol类型表示独一无二的值，用来定义独一无二的对象属性名;
const/let 都是用来声明变量,不可重复声明，具有块级作用域。存在暂时性死区，也就是不存在变量提升。(const一般用于声明常量);
变量的解构赋值(包含数组、对象、字符串、数字及布尔值,函数参数),剩余运算符(…rest);
模板字符串(${data});
扩展运算符(数组、对象);
箭头函数;
Set和Map数据结构;
Proxy/Reflect;
Promise;
async函数;
Class;
Module语法(import/export)。

深拷贝和浅拷贝的区别？怎么实现一个深拷贝？

bind，call，apply 的区别？

事件委托

原理：不是给每个子节点单独设置事件监听器，而是事件监听器设置在其父节点上，然后利用冒泡原理影响设置每个子节点。
核心原理：给父节点添加侦听器，利用事件冒泡影响每一个子节点。
作用：我们只操作了一次dom，提高了程序的性能。

js执行机制

同步和异步
为了解决js是单线程语言的问题，利用多核CPU的计算能力，HTML5提出 Web Worker 标准，允许javascript脚本创建多个线程。于是，js中出现了

同步

和

异步

同步任务：

同步任务都在主线程上执行，形成一个执行栈。

异步任务：

js的异步是通过回调函数实现的。
一般而言，异步任务有以下三种类型：

普通事件，如click、resize等
资源加载，如load、error等
定时器，包括setInterval、setTimeout等

异步任务相关

回调函数

添加到

任务队列

中（任务队列也称为消息队列）。
在这里插入图片描述

在这里插入图片描述

Vue

v-if和v-for的那个优先级更高，如果两个同时出现，应该怎么优化得到更好的性能

2.x 当 v-if 与 v-for 一起使用时，v-for 具有比 v-if 更高的优先级。

3.x当 v-if 与 v-for 一起使用时，v-if 具有比 v-for 更高的优先级。

谈谈对vue生命周期的理解？

vue2总共11个生命周期

v-for中key的作用

key的作用主要是为了更高效的对比虚拟DOM中每个节点是否是相同节点;
从源码中可以知道，Vue判断两个节点是否相同时主要判断两者的key和元素类型等，因此如果不设置key,它的值就是undefined，则可能永远认为这是两个相同的节点，只能去做更新操作，这造成了大量的dom更新操作，明显是不可取的。

vue组件的通信方式

props / $emit
$children / $parent
provide / reject
ref
eventBus
Vuex
$attrs 与 $listeners

watch 和计算属性有什么区别？

watch 监听的是已经在data 中定义的变量，当该变量变化时，会触发watch 中的方法。
computed 计算属性是用来声明式的描述一个值依赖了其它的值，当所依赖的值或者变量改变时，计算属性也会跟着改变；
使用场景 computed：当一个属性受多个属性影响的时候使用，例：购物车商品结算功能 watch：当一条数据影响多条数据的时候使用，例：搜索数据

Vue 双向绑定原理

Vue 数据双向绑定是通过数据劫持结合发布者-订阅者模式的方式来实现的。

利用了 Object.defineProperty() 这个方法重新定义了对象获取属性值(get)和设置属性值(set)。

vue组件data为什么必须是个函数，而vue根实例则没有此限制？

data必须是个函数是保证在多实例的时候，为了保护相互之间的状态不干扰，不污染。
每次在创建根实例的时候，使用new的方式，全局的范围内只创建一个，不会创建多个，不会存在污染的问题，因此可以不使用函数

vue设计原则的理解

vue是一个渐进式的javscript框架易用，高效，灵活

渐进式javascript框架：

跟其他大型框架不同的是，vue被设计为可以自底向上逐层应用。vue的核心库只关注视图层，不仅易于上手，还便于与第三方库活既有的项目整合，另一方面，当现代的工具链以及各种支持类库结合使用的时候。vue也完全能够为复杂的单页面提供驱动
核心库就是一些声明是的渲染，组件系统只关注视图层
可以作为一个库在其他项目中去用，也能作为一个大型的框架去搭建项目，这就是渐进式
学习过程也是渐进式的，只学习模板语法，基础功能也能开发，后期才学习工程化，

易用性：

vue提供数据响应式，声明式模板语法和基于配置的组件系统等核心特性，这些使我们只需要关注应用的核心业务即可，只要会写js。html和css就能轻松编写vue应用

灵活性：

渐进式框架最大的优点就是灵活性，如果应用足够小，我们可能仅仅需要vue的核心特性就能去完成功能了，随着应用规模的不断扩大，我们才可能追歼引入路由，状态管理，vue-cli等库和工具，不管是应用体积还是学习难度都是一个逐渐增加的平和曲线

高效性：

超快的虚拟DOM和diff算法使我们的应用有最佳的性能表现，追求更高效的过程还在继续，vue3中引入proxy对数据响应式的改进以及编译器中对于静态内容的改进都会让vue更加高效

你了解哪些vue的性能优化方法？

路由懒加载
使用CDN链接
第三方插件按需导入
keep-alive缓存页面
使用v-show复用DOM
v-for遍历避免同时使用v-if
变量本地化
事件销毁
长列表性能优化
图片懒加载
无状态组件标记为函数式组件
服务端渲染。

前端工程化

常见的Webpack Loader?

file-loader：把文件输出到一个文件夹中，在代码中通过相对 URL 去引用输出的文件 (处理图片和字体)
url-loader：与file-loader类似，区别是用户可以设置一个阈值，大于阈值会交给file-loader处理，小于阈值时返回文件base64 形式编码 (处理图片和字体)
image-loader：加载并且压缩图片文件
babel-loader：把 ES6 转换成 ES5
sass-loader：将SCSS/SASS代码转换成CSS
css-loader：加载 CSS，支持模块化、压缩、文件导入等特性
style-loader：把 CSS 代码注入到 JavaScript 中，通过 DOM 操作去加载 CSS
postcss-loader：扩展 CSS 语法，使用下一代 CSS，可以配合
eslint-loader：通过 ESLint 检查 JavaScript 代码
autoprefixer 插件自动补齐 CSS3 前缀

常见的Webpack Plugin?

plugin:本质是插件，基于事件流框架 Tapable，插件可以扩展 Webpack 的功能，在 Webpack 运行的生命周期中会广播出许多事件，Plugin 可以监听这些事件，在合适的时机通过 Webpack 提供的 API 改变输出结果。

html-webpack-plugin 简化 HTML 文件创建 (依赖于 html-loader)
clean-webpack-plugin：目录清除

标签：前端 html5 css3

本文转载自: https://blog.csdn.net/sea9528/article/details/123045597
版权归原作者 sea9528 所有，如有侵权，请联系我们删除。