2021年最新的前端面试题大全HTML、CSS、JavaScript

HTML

1 、前端需要注意哪些SEO

1. 合理的title、description、keywords：搜索对着三项的权重逐个减小，title值强调重点即可，重要关键词出现不要超过2次，而且要靠前，不同页面title要有所不同；description把页面内容高度概括，长度合适，不可过分堆砌关键词，不同页面description有所不同；keywords列举出重要关键词即可
2. 语义化的HTML代码，符合W3C规范：语义化代码让搜索引擎容易理解网页
3. 重要内容HTML代码放在最前：搜索引擎抓取HTML顺序是从上到下，有的搜索引擎对抓取长度有限制，保证重要内容一定会被抓取
4. 重要内容不要用js输出：爬虫不会执行js获取内容
   少用iframe：搜索引擎不会抓取iframe中的内容
5. 非装饰性图片必须加alt
6. 提高网站速度：网站速度是搜索引擎排序的一个重要指标

2 、的title和alt有什么区别

1、 通常当鼠标滑动到元素上的时候显示
2、 alt是的特有属性，是图片内容的等价描述，用于图片无法加载时显示、读屏器阅读图片。可提图片高可访问性，除了纯装饰图片外都必须设置有意义的值，搜索引擎会重点分析。

3 、语义化的理解

1、 用正确的标签做正确的事情！
2、 HTML语义化就是让页面的内容结构化，便于对浏览器、搜索引擎解析；
3、 在没有样式CSS情况下也以一种文档格式显示，并且是容易阅读的。
4、 搜索引擎的爬虫依赖于标记来确定上下文和各个关键字的权重，利于 SEO。
5、 使阅读源代码的人对网站更容易将网站分块，便于阅读维护理解

4 、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 对象
	绘画 canvas
	移除的元素：
	纯表现的元素：basefont、big、center、font、 s、strike、tt、u
	对可用性产生负面影响的元素：frame、frameset、noframes
	支持HTML5新标签：
	
	IE8/IE7/IE6支持通过document.createElement方法产生的标签
	可以利用这一特性让这些浏览器支持HTML5新标签
	浏览器支持新标签后，还需要添加标签默认的样式
	当然也可以直接使用成熟的框架、比如html5shim

5 、HTML5的离线储存怎么使用，工作原理能不能解释一下？

在用户没有与因特网连接时，可以正常访问站点或应用，在用户与因特网连接时，更新用户机器上的缓存文件
原理：HTML5的离线存储是基于一个新建的.appcache文件的缓存机制(不是存储技术)，通过这个文件上的解析清单离线存储资源，这些资源就会像cookie一样被存储了下来。之后当网络在处于离线状态下时，浏览器会通过被离线存储的数据进行页面展示

如何使用：

页面头部像下面一样加入一个manifest的属性；
在cache.manifest文件的编写离线存储的资源
在离线状态时，操作window.applicationCache进行需求实现

6 、link和@import的区别？

1、从属关系区别

@import是 CSS 提供的语法规则，只有导入样式表的作用；link是HTML提供的标签，不仅可以加载 CSS 文件，还可以定义 RSS、rel 连接属性等。

2、加载顺序区别

加载页面时，link标签引入的 CSS 被同时加载；@import引入的 CSS 将在页面加载完毕后被加载。

3、兼容性区别

@import是 CSS2.1 才有的语法，故只可在 IE5+ 才能识别；link标签作为 HTML 元素，不存在兼容性问题。

4、DOM可控性区别

可以通过 JS 操作 DOM ，插入link标签来改变样式；由于 DOM 方法是基于文档的，无法使用@import的方式插入样式。

7 、清除浮动有哪些方式？比较好的方式是哪一种？

	1、使用clear属性的空元素
	    在浮动元素后使用一个空元素<div class="clear"></div>，并在CSS中赋予.clear{clear:both;}属性
	    即可清理浮动。亦可使用<br class="clear" />或<hr class="clear" />来进行清理。 使用这种方式
	    清除浮动优点是简单，兼容性也好 ；缺点是不利于代码语义化，后期维护成本大。
	2、使用css的overflow属性
		给浮动元素的容器添加overflow:hidden;或overflow:auto;可以清除浮动，另外在 IE6 中还需要触发
		 hasLayout 。为父元素设置容器宽高或设置zoom:1。在添加overflow属性后，浮动元素又回到了容器层，
		 把容器高度撑起，达到了清理浮动的效果。使用这种方式清除浮动优点是简单，浏览器支持好； 缺点是不
		 能和position配合使用，因为超出的尺寸会被overflow:hidden隐藏。
	3、使用CSS的:after伪元素 
		结合 :after 伪元素，伪元素，表示一个元素之后最近的元素和 IEhack ，可以完美兼容当前主流浏览器。
		其中， IEhack 指的是触发hasLayout。需要注意的是为了IE6和IE7浏览器，要给clearfix这个class添
		加一条zoom:1;触发haslayout。给浮动元素的容器添加一个 clearfix 的class，然后给这个class添加
		一个:after伪元素实现元素末尾添加一个看不见的块元素（Block element）清理浮动。通过CSS伪元素在
		容器的内部元素最后添加了一个看不见的空格“020”或点“.”，并且赋予clear属性来清除浮动。使用这种方
		式清除浮动的优点是 浏览器支持好，不容易出现怪问题，在大型网站中都有使用，如腾迅，网易，新浪等
		等）； 缺点是代码多，要两句代码结合使用，才能让主流浏览器都支持。
	4、给父级元素设置高度
		使用这种方式清除浮动的优点是简单， 代码少，好掌握 ；缺点是只适用于高度固定的布局。

8 、什么是盒子模型？

CSS

1 、CSS的重绘与回流？

浏览器渲染浏览器在渲染页面的时候，大致是以下几个步骤：

解析html生成DOM树，解析css，生成CSSOM树，将DOM树和CSSOM树结合，生成渲染树；根据渲染树，浏览器可以计算出网页中有哪些节点，各节点的CSS以及从属关系 - 回流根据渲染树以及回流得到的节点信息， 计算出每个节点在屏幕中的位置 - 重绘最后将得到的节点位置信息交给浏览器的图形处理程序，让浏览器中显示页面

回流

回流：英文叫reflow，指的是当渲染树中的节点信息发生了大小、边距等问题，需要重新计算各节点和css具体的大
小和位置。
例：在css中对一个div修饰的样式中，使用了宽度50%，此时需要将50%转换为具体的像素，这个计算的过程，就是回
流的过程。

容易造成回流的操作：

1、布局流相关操作

盒模型的相关操作会触发重新布局
定位相关操作会触发重新布局
浮动相关操作会触发重新布局

2、改变节点内的内容

改变节点的结构或其中的文本结构会触发重新布局

3、css

width 、height 、 padding、 border、margin、position、top、left、bottom、right、float、cleartext-align、vertical-align、line-height、font-weigh、tfont-size、font-family、overflow、white-space

重绘

重绘：英文叫repaint，当节点的部分属性发生变化，但不影响布局，只需要重新计算节点在屏幕中的绝对位置并渲染的过程，就叫重绘。比如：改变元素的背景颜色、字体颜色等操作会造成重绘。回流的过程在重绘的过程前面，所以回流一定会重绘，但重绘不一定会引起回流。
容易造成重绘操作的css：
color、border-style、border-radius、text-decoration、box-shadow、outline、background
每次回流都会对浏览器造成额外的计算消耗，所以浏览器对于回流和重绘有一定的优化机制。浏览器通常都会将多次回流操作放入一个队列中，等过了一段时间或操作达到了一定的临界值，然后才会挨个执行，这样能节省一些计算消耗。但是在获取布局信息操作的时候，会强制将队列清空，也就是强制回流，比如访问或操作以下或方法时：
offsetTop、offsetLeft、offsetWidth、offsetHeight、scrollTopscroll、Leftscroll、Widthscroll、Heightclient、Topclient、Leftclient、Widthclient、Heightget、ComputedStyle()
这些属性或方法都需要得到最新的布局信息，所以浏览器必须去回流执行。因此，在项目中，尽量避免使用上述属性或方法，如果非要使用的时候，也尽量将值缓存起来，而不是一直获取。

2 、CSS选择器优先级？

在属性后面使用 !important 会覆盖页面内任何位置定义的元素样式。
作为style属性写在元素内的样式
id选择器
类选择器
标签选择器
通配符选择器
浏览器自定义或继承
总结排序：!important > 行内样式>ID选择器 > 类选择器 > 标签 > 通配符 > 继承 > 浏览器默认属性

3 、怎么用CSS3画一个三角形？

.box {
    width: 0;
    height: 0;
    border-width: 50px;
    border-style: solid;
    border-color: transparent transparent red transparent;
}

4 、减少重绘与回流的办法？

合并样式修改

减少造成回流的次数，如果要给一个节点操作多个css属性，而每一个都会造成回流的话，尽量将多次操作合并成一个

批量操作DOM

当对DOM有多次操作的时候，需要使用一些特殊处理减少触发回流，其实就是对DOM的多次操作，在脱离标准流后，对元素进行的多次操作，不会触发回流，等操作完成后，再将元素放回标准流。

避免多次触发布局

对于页面中比较复杂的动画，尽量将元素设置为绝对定位，操作元素的定位属性，这样只有这一个元素会回流，如果不是定位的话，容易引起其父元素以及子元素的回流。

5 、一个200*200的div在不同分辨率屏幕上下左右居中？

（1）负margin-left和margin-top

负margin-left和margin-top实现居中时，margin-left必须知道自身的宽高。

（2）position和translate(-50%,-50%)

当使用：top: 50%;left: 50%;， 是以左上角为原点，故不处于中心位置
translate(-50%,-50%) 作用是，往上（x轴）,左（y轴）移动自身长宽的 50%，以使其居于中心位置。

（3）position、left: 0, right: 0, top: 0, bottom: 0

left：0;right：0;margin:auto 可以使元素水平居中； top:0;bottom:0;margin:auto 可以使元素垂直居中。所以，设置四个值都是0；margin：auto；后，这个元素就在正中间了。

6 、请简要描述margin重合问题，及解决方式？

1. 父级设置padding代替margin
2. 父级设置overflow:hidden
3. 当前元素设置透明的边框
4. 使用绝对定位
5. 使用浮动或设置成行内块
6. 给一个1像素的内边距

7 、介绍一下box-sizing属性？

box-sizing是css3属性；
box-sizing也是一种盒模型，也是一种元素宽高的计算；
box-sizing属性的三个值分别是：content-box、border-box、inherit:；

JavaScript

1 、原型和原型链？

原型链：

每个被实例对象都有__proto__对象，它指向了构造对象的构造函数的prototype。同时该对象可以通过__proto__对象来寻找不属于自身的属性。

原型：

就是实现继承过程中产生的一个概念

2 、闭包？

闭包就是有权访问一个函数内部变量的函数，也就是常说的函数内部嵌套函数，内部函数变量，从而导致垃圾回收机制没有将当前变量回收回掉。这样的操作，有可能带来内存泄露。
好处就是可以设计私有地方法和变量

3 、事件委托是什么？

利用事件冒泡的原理，让自己的所触发的事件，让它的父元素代替执行

4 、函数的节流和防抖的概念？

防抖函数：
将多次触发变成最后一次触发
节流函数：
将多次执行变成每隔一个时间节点去执行的函数

5 、数组的遍历方式有哪些？

普通for循环遍历
forEach循环遍历
for in循环
for of循环 值
map遍历

6 、哪些方法改变原数组和不改变原数组？

改变原数组

shift() 把数组的第一个元素从其中删除，并返回第一个元素的值， 如果数组是空的，那么 shift() 方法将不进行任何操作，返回 undefined 值。
unshift() 可向数组的开头添加一个或更多元素，并返回新的长度
pop() 删除并返回数组的最后一个元素，该 方法将删除 arrayObject 的最后一个元素，把数组长度减 1，并且返回它删除的元素的值。如果数组已经为空，则 pop() 不改变数组，并返回 undefined 值
reverse() 用于颠倒数组中元素的顺序。 该方法会改变原来的数组，而不会创建新的数组。
sort() 用于对数组的元素进行排序。如果调用该方法时没有使用参数，将按字母顺序对数组中的元素进行排序，说得更精确点，是按照字符编码的顺序进行排序。要实现这一点，首先应把数组的元素都转换成字符串（如有必要），以便进行比较。
splice() 向/从数组中添加/删除项目，然后返回被删除的项目。

不改变原数组

1.concat（）把元素衔接到数组中。
concat() 方法用于连接两个或多个数组。
该方法不会改变现有的数组，而仅仅会返回被连接数组的一个副本。

2.every() 方法使用指定函数检测数组中的所有元素：
如果数组中检测到有一个元素不满足，则整个表达式返回 false ，且剩余的元素不会再进行检测。
如果所有元素都满足条件，则返回 true

3.filter（）返回满足断言函数的数组元素。

4.forEach（）为数组的每一个元素调用指定函数。

5indexOf（）在数组中查找指定元素。 如果找到的话返回该元素的索引 没找到 返回-1

6.join（）将数组的所有元素转化为字符串。

7.lastIndexOf（）在数组中反向查找。

8.map()从数组的元素中，计算出新的数组。

9.some（）测试是否至少有一个数组元素能让断言函数为真。

10.slice（）返回数组的一部分。

7 、this指向问题？

1、普通函数this指向window
2、对象的方法this指向的是对象
3、构造函数this指向的是实例对象
4、原型对象里面的this指向也是实例对象
5、绑定事件函数的this指向的是函数的调用者
6、定时器函数的this指向window
7.立即执行函数的this指向window

8 、列举三种强制类型转换和两种隐式类型转换？

强制类型转换： parseInt、parseFloat、number
隐式类型转换：== ===

9 、call和apply区别是什么？

call和apply均用于调用函数，并且第一个参数将用作函数中this的值，但是，call将逗号分隔得参数作为下一个参数，而apply将参数数组作为下一个参数。
简单记忆法：
c用于call和逗号分隔
a用于apply和参数数组

10 、http和https的区别？

http：80端口，无须申请证书，超文本传输协议，速度快
https：443端口，需要申请证书，ssl加密协议，比较慢

11 、JavaScript的作用域和作用域链？

作用域：

作用域是定义变量的区域，他一套访问变量的规则，这套规则来管理浏览器引起如何在当前作用域以及嵌套的作用域中根据变量（标识符）进行变量查找