web前端面试题最全版总结

一、前端必备

1、web前端性能优化

1.1 性能评级工具

PageSpeed 是由谷歌官方开发的一款可以分析页面载入的各个方面，包括资源、网络、DOM以及时间线等等信息的在线检测工具。(Google的插件)

YSlow是Yahoo发布的一款基于FireFox(火狐浏览器)的插件，这个插件可以分析网站的页面，并告诉你为了提高网站性能，如何基于某些规则进行优化。它可以分析任何网站，并为每一个规则产生一个整体报告，如果页面可以进行优化，则YSlow会列出具体的修改意

1.2 前端性能优化

1、从DOM结构和标签上来优化

• 使用语义化的标签，代码清晰简洁；
• 减少Dom节点，增加渲染速度；
• 使用W3C标准书写闭合小写的标签；
• 给图片和table指定宽高，避免缩放；
• 防止src和href值为空，当为空时，浏览器会把当前页面当做属性值重新加载
• css在头部位置，js在body底部位置
• 尽量合并js和css，对js和css进行压缩，可以缩短文件传输时间；
• 避免在html标签中写style属性

2、从CSS样式上来优化

• 使用link加载样式而不是@import
• 避免使用css表达式；
• 删除重复的css，css简化；
• 使用css 缩写 如#fff，减少代码量；
• 减少css查询层级，如.header .log 要好于.header .top .log；
• 减少css查询范围，如header>div获取直系子元素要好于heade div；

3、从js上来优化

• js尽量少用全局变量；
• 多个js变量声明合并；
• 删除重复的js
• 使用setTimeout来避免页面失去响应
• 图片懒加载（data-src）

4、网络优化

• 减少 HTTP 请求数量
• 利用浏览器缓存，公用依赖包（如vue、Jquery、ui组件等）单独打包/单文件在一起，避免重复请求
• 减小cookie使用，尽量用localStorage代替
• CDN托管静态文件

2、浏览器内核

主要分成两部分：渲染引擎和JS引擎

渲染引擎：负责取得网页的内容（HTML、XML、图像等等）、整理讯息（例如加入CSS等），以及计算网页 的显示方式，然后会输出至显示器或打印机。浏览器的内核的不同对于网页的语法解释会有不同，所以渲染的 效果也不相同。

JS引擎则：解析和执行javascript来实现网页的动态效果

最开始渲染引擎和JS引擎并没有区分的很明确，后来JS引擎越来越独立，内核就倾向于只指渲染引

3、常见的浏览器内核有哪些

• Trident内核(IE内核)：用它的浏览器有：ie、360浏览器
• Webkit内核(谷歌内核)：用它的浏览器有：谷歌浏览器、枫树浏览器、太阳花
• Gecko内核： 用它的浏览器有：Netscape6、、火狐浏览器、K-Meleon浏览
• Presto内核：用它的浏览器有：Opera浏览器

4、cookies、sessionStorage、localStorage 和 indexDB 的区别

cookie是网站为了标示用户身份而储存在用户本地的数据

IndexedDB 就是浏览器提供的本地数据库，它可以被网页脚本创建和操作。IndexedDB 允许储存大量数据，提供查找接口，还能建立索引。这些都是 LocalStorage 所不具备的。就数据库类型而言，IndexedDB 不属于关系型数据库（不支持 SQL 查询语句），更接近 NoSQL 数据库。

1、是否在http请求只能够携带

• cookie数据始终在同源的http请求中携带，跨域需要设置withCredentials = true
• sessionStorage和localStorage和indexDB不会自动把数据发给服务器，仅在本地保存

2、存储大小

• cookie数据大小不能超过4k；
• sessionStorage和localStorage虽然也有存储大小的限制，但比cookie大得多，可以达到5M或更 大，因不同浏览器大小不同；
• indexDB允许储存大量数据，提供查找接口，还能建立索引。这些都是 LocalStorage 所不具备的

3、 有效时间

• cookie 设置的cookie过期时间之前一直有效，即使窗口或浏览器关闭
• localStorage 硬盘存储持久数据，浏览器关闭后数据不丢失除非主动删除数据
• sessionStorage 存在内存中，数据在当前浏览器窗口关闭后自动删除
• indexDB除非被清理。否则一直存在

5、从输入URL到浏览器显示页面过程中都发生了什么

1、浏览器根据请求的URL交给DNS域名解析，找到真实IP。
2、找到真实的IP地址后，浏览器根据 IP 地址向服务器发起 TCP 连接，与浏览器建立 TCP 三次握手。
简单的讲，通信连接的建立需要经历以下三个过程：
（1）客户端向服务器发送一个建立连接的请求（您好，我想连接您）；
（2）服务器接到请求后发送同意连接的信号（好的，可以连接）；
（3）客户端接到服务器端同意连接的信号后，再次向服务器发送了确认信号（好的，确认连接）。
自此，客户端与服务器两者建立了连接。
（三次握手的过程采用 TCP 协议，其可以保证信息传输的可靠性，三次握手过程中，若一方收不到确认信号，协议会要求重新发送信号）
3、浏览器开始发送HTTP请求
4、服务器处理请求并返回HTTP报文，其实就是服务器接到请求后，会根据 HTTP 请求中的内容来决定如何获取相应的 HTML 文件；服务器将得到的 HTML 文件发送给浏览器；
5、浏览器解析渲染页面
6、连接结束（TCP四次挥手）
（1）主机向服务器发送一个断开连接的请求（不早了，我该走了）；
（2）服务器接到请求后发送确认收到请求的信号，进入CLOSE-WAIT（等待关闭）状态（知道了）；
（3）数据传输完毕后，服务器向主机发送断开通知，服务器进入LAST-ACK（最后确定）（我也该走了）；
（4）主机接到断开通知后断开连接并反馈一个确认信号（嗯，好的），服务器收到确认信号后断开连接，立刻进入CLOSE（关闭）状态

6、对AMD、CMD的理解

相同点：
AMD(异步模块定义)、CMD(通用模块定义)、CommonJS()
这些东西都是js规范,前两个是为了实现浏览器端模块化开发。
区别 ：
1、对于依赖的模块，AMD是提前执行，CMD是延迟执行。
2、AMD推崇依赖前置，CMD推崇依赖就近。
3、AMD的API默认的是一个当多个用，CMD比较严格，指责单一。

7、浏览器缓存

关于缓存的两个概念
强缓存：
用户发送的请求，直接从客户端缓存中获取，不发送请求到服务器，不与服务器发生交互行为。
协商缓存：
用户发送请求，发送到服务器之后，由服务器判定是否从缓存中获取资源。
两者共同点：
客户端获取的数据最后都是熊客户端的缓存中取得。
两者区别：
从名字就可以看出，强缓存不与服务器发生交互，而协商缓存则需要需服务器发生交互。

8、浏览器是如何渲染网页的

1.根据html文件构建DOM树和CSSOM[层叠样式表模型CSSOM(CSS Object Model)]树。构建DOM树期间，如果遇到JS，阻塞DOM树及CSSOM树的构建，优先加载JS文件，加载完毕，再继续构建DOM树及CSSOM树。

2.构建渲染树（Render Tree）。

3.页面的重绘（repaint）与重排（reflow，也有称回流）。页面渲染完成后，若JS操作了DOM节点，根据JS对DOM操作动作的大小，浏览器对页面进行重绘或是重排。

9、重绘（Repaint）和回流（Reflow）

重绘和回流会在我们设置节点样式时频繁出现，同时也会很大程度上影响性能。

• 重绘：当节点需要更改外观而不会影响布局的，比如改变 color 就叫称为重绘
• 回流：布局或者几何属性需要改变就称为回流。

回流必定会发生重绘，重绘不一定会引发回流。回流所需的成本比重绘高的多，改变父节点里的子
节点很可能会导致父节点的一系列回流

以下几个动作可能会导致性能问题：

• 改变 window 大小
• 改变字体
• 添加或删除样式
• 文字改变
• 定位或者浮

10、首屏加载优化方案

• 1、 如果使用了一些UI库，采用按需加载
• 2、页面使用骨架屏
• 3、如果首屏为登录页，可以做成多入口
• 4、图片懒加载减少占用网络带宽
• 5、使用CDN加速
• 6、 vue-router 使用懒加载

二、html

1、html5有哪些新特性、移除了那些元素？

新增功能：
HTML5 现在已经不是 SGML 的子集，主要是关于图像，位置，存储，多任务等功能的增加

• 新增选择器 document.querySelector、document.querySelectorAll

• 拖拽释放(Drag and drop) API

• 媒体播放的 video 和 audio

• 本地存储 localStorage 和 sessionStorage

• 离线应用 manifest

• 桌面通知 Notifications

• 语意化标签 article、footer、header、nav、section

• 增强表单控件 calendar、date、time、email、url、search

• 地理位置 Geolocation

• 多任务 webworker

• 全双工通信协议 websocket

• 历史管理 history

• 跨域资源共享(CORS) Access-Control-Allow-Origin

• 页面可见性改变事件 visibilitychange

• 跨窗口通信 PostMessage

• Form Data 对象

• 绘画 canva
  移除的元素：

• 纯表现的元素：basefont、big、center、font、 s、strike、tt、u

• 对可用性产生负面影响的元素：frame、frameset、noframes

2、viewport

<meta name="viewport" content="width=device-width,initial-
scale=1.0,minimum- scale=1.0,maximum-scale=1.0,user-scalable=no" />
 <!--width 设置viewport宽度，为一个正整数，或字符串‘device-width’ 
 device-width 设备宽度 
 height 设置viewport高度，一般设置了宽度，会自动解析出高度，可以不用设置 initial-scale 默认缩放比例（初始缩放比例），为一个数字，可以带小数 minimum-scale 允许用户最小缩放比例，为一个数字，可以带小数
 maximum-scale 允许用户最大缩放比例，为一个数字，可以带小数 
 user-scalable 是否允许手动缩放 -->

延伸提问：怎样处理 移动端 1px 被 渲染成 2px问题？

• 局部处理

meta标签中的 viewport属性 ，initial-scale 设置为 1
rem按照设计稿标准走，外加利用transfrome 的scale(0.5) 缩小一倍即可；

• 全局处理

mate标签中的 viewport属性 ，initial-scale 设置为 0.5
rem 按照设计稿标准走即可

3、html文档解析

大致过程：
解析html文件 -> 构建dom树 -> 构建render树 -> 布局render树 -> 绘制render树

1.dom树的生成；

2.解析css构建cssom树（CSS对象模型）；

3.根据dom树和cssom树来构建render树（渲染树）；

4.根据渲染树来布局，以计算每个节点的几何信息（位置、大小等）。

5.将各个节点绘制到屏幕上。

三、css

1. css选择器优先级

!important > inline > id > class > tag > * > inherit > default

• !important：大于其他
• 行内：1000
• id选择器：100
• 类，伪类和属性选择器，如.content：10
• 类型选择器和伪元素选择器：1
• 通配符、子选择器、相邻选择器：0

同级别的后写的优先级高。
相同class样式，css中后写的优先级高，和html中的class名字前后无关

2. 水平垂直居中

• 文本水平居中： text-algin: center

• 文本垂直居中： line-height等于容器height ；display: flex; algin-items: center;

• div水平居中：

  1. margin: 0 auto;
  2. 已知父元素宽度：margin-left: width / 2; transform: tranlateX(-50%)
  3. 未知父元素宽度：position: absolute: top: 50%; transform: tranlateY(-50%)
  4. display: flex; justify-content: center;

• div垂直居中：

  1. 已知父元素高度：margin-top: height / 2; transform: tranlateY(-50%)
  2. 未知父元素高度：position: absolute: top: 50%; transform: tranlateY(-50%)
  3. display: flex; algin-items: center;

3. 移除inline-block(行内元素)的间隙

• 移除空格

标签写在一行，移除标签间的空格 (格式化后会失效)标签写在一行，移除标签间的空格 (格式化后会失效)标签写在一行，移除标签间的空格 (格式化后会失效)

• 使用margin负值
• 使用font-size:0
• letter-spacing
• word-spacing

4. 清除浮动

浮动的影响

1. 由于浮动元素脱离了文档流，所以父元素的高度无法被撑开，影响了与父元素同级的元素
2. 与浮动元素同级的非浮动元素会跟随其后，因为浮动元素脱离文档流不占据原来的位置
3. 如果该浮动元素不是第一个浮动元素，则该元素之前的元素也需要浮动，否则容易影响页面的结构显示

清除浮动的方法

1. 父级div定义height

2. 结尾处加空div标签，样式clear:both

3. 父级div定义伪类:after和zoom

4. 父级div定义overflow:hidden（同时还要定义width或zoom:1，不能定义height）

5. 父级div定义overflow:auto（同时还要定义width或zoom:1，不能定义height）

6. 父级也浮动，需要定义width（不推荐）

7. 父级div定义display：table（不推荐）

8. 结尾处加br标签，样式clear:both（父元素div定义zoom:1，不推荐）

在浮动元素后面放一个空的div标签，div设置样式clear:both来清除浮动。它的优点是简单，方便兼容性好，但是一般情况下不建议使用该方法，因为会造成结构混乱，不利于后期维护

5.（外）边距重叠

原因

布局垂直方向上两个元素的间距不等于margin的和，而是取较大的一个

1. 同级相邻元素

现象： 上方元素设 置margin-bottom: 20px ，下方元素设置 margin-top: 10px ，实际的间隔是 20px

避免办法： 同级元素不要同时设置，可都设置margin-bottom或margin-top的一个，或者设置padding

2.父子元素

现象： 父元素设 置margin-top: 20px ，下方元素设置 margin-top: 10px ，实际的间隔是 20px

避免办法： 父元素有padding-top，或者border-top。或者触发 BFC

6. 两、三栏布局

两栏布局

方法一：浮动布局

<style>
div{
  height:500px;
}
#aside{
  width:300px;
  background-color:yellow;
  float:left;
}
#main{
  background-color:aqua;
  margin-left:300px;
}
</style>

<body>
	<div id = "aside">
	</div>
	<div id = "main">
	</div>
</body>

侧栏固定宽度向左浮动，右侧主要内容则用margin-left留出左侧栏的宽度，默认宽度为auto，自动填满剩下的宽度。

右侧固定宽度，左侧自适应则是同理，只要将固定栏右浮动，使用margin-right空出其宽度即可。

方法二：浮动布局+负外边距（双飞翼布局的两栏版）

这种方法是创建简单一列宽度固定，一列内容为宽度的100%的两列布局的好方法：

<style>
div{
  height:500px;
}
#aside{
  width:300px;
  background-color:yellow;
  float:left;
  margin-right:-100%;
}
#main{
  width:100%;
  float:left;
}
#content{
  margin-left:300px;
  background-color:aqua;
}
</style>
<body>
	<div id = "aside">
	</div>
	<div id = "main">
  		<div id = "content"></div>
	</div>
</body>

左侧固定栏指定一个右侧的100%的负外边距，为整个屏幕的宽度，这就使得main的最左侧可以与屏幕最左侧对齐。
此时main的宽度是100%，因此需要为其子内容content指定一个左侧的外边距用于空出左侧栏的位置，即左侧栏的宽度300px

这种方法要相对复杂一些，但也很常用。

三栏布局

方法一：绝对定位

左侧栏和右侧栏分别用绝对定位固定在左侧和右侧，中间栏则利用margin-left和margin-right空出左右栏位置来

方法二：浮动定位法

此种方法最简单，分别另左侧栏和右侧栏向左和向右浮动，中间栏放在最后，再利用左右外边距空出左右栏的位置即可。

7. BFC

BFC 是 Block Formatting Context ，也就是 块级格式化上下文 ，是用于布局块级盒子的一块渲染区域。

简单来说，BFC 实际上是一块区域，在这块区域中遵循一定的规则，有一套独特的渲染规则。文档流其实分为 普通流 、定位流和浮动流和三种，普通流其实就是指BFC中的FC，也即 格式化上下文。

普通流：

元素按照其在 HTML 中的先后位置从上到下、从左到右布局，在这个过程中，行内元素水平排列，直到当行被占满然后换行，块级元素则会被渲染为完整的一个新行。

格式化上下文：

页面中的一块渲染区域，有一套渲染规则，决定了其子元素如何布局，以及和其他元素之间的关系和作用

BFC的几条规则：

1. BFC 区域内的元素外边距会发生重叠。
2. BFC 区域内的元素不会与浮动元素重叠。
3. 计算 BFC 区域的高度时，浮动元素也参与计算。
4. BFC 区域就相当于一个容器，内部的元素不会影响到外部，同样外部的元素也不会影响到内部。

BFC的应用：

1. 清除浮动：父元素设置overflow: hidden触发BFC实现清除浮动，防止父元素高度塌陷，后面的元素被覆盖，实现文字环绕等等。
2. 消除相邻元素垂直方向的边距重叠：第二个子元素套一层，并设置overflow: hidden，构建BFC使其不影响外部元素。
3. 消除父子元素边距重叠，父元素设置overflow: hidden

触发BFC的方式：

1. float 不为 none，浮动元素所在的区域就是一个 BFC 区域。
2. position 的值不是 static 或 relative 的元素所在的区域就是一个 BFC 区域
3. display为 table-cell 的表格单元格元素所在的区域也是一个 BFC 区域
4. overflow 不为 visible 的元素所在的区域也是一个 BFC 区域

8. flex布局

弹性布局，Flex 布局将成为未来布局的首选方案。

兼容性：

1. Webkit 内核的浏览器，必须加上-webkit前缀。
2. ie9不支持

基本概念：

1. 容器&项目：采用 Flex 布局的元素，称为 Flex 容器（flex container），简称"容器"。它的所有子元素自动成为容器成员，称为 Flex 项目（flex item），简称"项目"。
2. 主轴&交叉轴：堆叠的方向，默认主轴是水平方向，交叉轴是垂直方向。可通过 flex-derection: column 设置主轴为垂直方向。

容器属性：

• display: flex
• flex-direction：主轴的方向（即项目的排列方向），row | row-reverse | column | column-reverse;
• flex-wrap：是否换行，nowrap | wrap | wrap-reverse;
• flex-flow：direction 和 wrap简写
• justify-content：主轴对齐方式，flex-start | flex-end | center | space-between | space-around;
• align-items：交叉轴对齐方式，flex-start | flex-end | center | baseline | stretch;
• align-content: 多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。flex-start | flexend | center | space-between | space-around | stretch;

项目的属性:

• order：项目的排列顺序，数值越小，排列越靠前，默认为0。
• flex-grow：放大比例，默认为0，指定元素分到的剩余空间的比例。
• flex-shrink：缩小比例，默认为1，指定元素分到的缩减空间的比例。
• flex-basis：分配多余空间之前，项目占据的主轴空间，默认值为auto
• flex：grow, shrink 和 basis的简写，默认值为0 1 auto
• align-self：单个项目不一样的对齐方式，默认值为auto，auto | flex-start | flex-end | center | baseline | stretch;

9. CSS动画

后续敬请期待哦…