前端面试的基础四十小问（前20问）

本文主要是介绍前端面试的基础四十小问（前20问），希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

部分答案来源于官方答案和网络综合答案如有错误答案请大佬们不吝赐教。

1.什么是HTML语义化？

答：语义化的HTML就是正确的标签做正确的事情，能够便于开发者阅读和写出更优雅的代码的同时让网络爬虫很好地解析。其主要目的就是让大家直观的认识标签和属性。
对上述问题的补充：
（1）为什么要做到语义化？
答：有利于SEO，有利于搜索引擎爬虫更好的理解我们的网页，从而获取更多的有效信息，提升网页的权重。

2.标签title与alt属性的区别是什么？

答：title属性可以用在任何元素上，当用户把鼠标移动到元素上时，就会出现title的内容，起到对图片说明的作用，其实质就是对图片的一种备注或者注释 通俗来讲，alt属性的实质是通过文字来代替图片的内容，而title属性的实质是对图片的描述或者注释。

3.iframe的优缺点？

答：解决加载缓慢的第三方内容如图标和广告等的加载问题. 能并行加载脚本. 方便管理，指的是如果有多个页面需要用到iframe的内容，那么只要修改iframe的内容就可以实现统一管理. iframe可以原封不动的把嵌入的网页显示出来. 缺点. 会产生很多的页面，不容易管理. 会增加服务器的http请求对大型网址不可取.
通俗解释：
优点：
1、iframe能够原封不动的把嵌入的网页展现出来;
2、如果有多个网页引用iframe，那么只需要修改iframe的内容，就可以实现调用每一个页面的更改,方便快捷;
3、网页如果为了统一风格，头部和版本都是一样的，就可以写成一个页面，用iframe嵌套，可以增加代码的可重用;
4、如果遇到加载缓慢的第三方内容，如图标或广告,这些问题可以由iframe来解决;
5、iframe会堵塞主页面的Onload事件;
6、iframe和主页面共享连接池，而浏览器对相同域的连接有限制，所以会影响页面的并行加载
缺点：
1、iframe会阻塞主页面的Onload事件;
2、iframe和主页面共享链接池，而浏览器对相同城的链接有限制，所以会影响页面的并行加载;
3、使用iframe之前需要考虑这两个缺点，如果需要使用iframe，最好是通过JavaScript;
4、动态给iframe添加src属性值，这样可以可以绕开以上两个问题
5、不利于seo;
6、代码复杂，无法一下被搜索引擎索引到;
7、iframe框架页面会增加服务器的http请求，对于大型网站不可取;
8、很多的移动设备无法完全显示框架，设备兼容性差

4.介绍一下CSS的盒子模型？

答：1. 盒模型： 内容 (content)、填充 (padding)、边界 (margin)、 边框 (border)
2. 类型： IE 盒子模型、标准 W3C 盒子模型；
3. 两种盒模型的主要区别是:标准盒模型的宽高是值内容宽高 (content)
4. 而IE盒模型的宽高是指content+padding+border。

5.垂直居中的几种方式？

答：对已知高度块级元素进行垂直居中:
1、绝对定位，配合top:50%和负margin-top(元素高度一半)进行垂直居中;
2、绝对定位，配合top:0;bot1行垂直居中;
3、设置position:absolute;和calc()函数实现垂直居中;4、使用浮动float实现元素垂直居中;
对未知高度块级元素:
1、设置position: absolute;和tran(x,y)实现水平垂直居中;
2、居于视口单位︰通过使用margin-top: 50vh;配合transform:translateY(-50%);实现视口居中;
3、通过display:table-cell和vertical-align:middle;实现垂直居中;
4、基于flex布局

6.rgba和opacity的透明效果有什么不同？

答：rgba()和opacity都能实现透明效果，但最大的不同是opacity作用于元素，以及元素内的所有内容的透明度，而rgba()只作用于元素的颜色或其背景色。（设置rgba透明的元素的子元素不会继承透明效果！）比如，我们写透明的黑色部分都是用opcity（0.5），但这带出来一个问题就是如果你在这一div上写字的话，然后那个字体也会变成透明色。所以我们采取rgba的样式写，前面三个数字分别对应r,g,b,的三种颜色，第四位的数字对应的是透明的系数。

7.position的值，relative和absolute分别是对于谁进行定位的？

答：absolute :生成绝对定位的元素，相对于最近一级的标签属性进行定位;
relative生成相对定位的元素，相对于其在普通流中的位置进行定位
扩展：
position有几种，absolute和relative的区别
1.static(默认属性)，当没有给元素设置position时默认为static
2.absolute（绝对定位），相对于父级第一个设置了position属性进行定位（没有则相对于body，static除外），top，left，bottom，right均是相对于这个父元素的偏移量
3.relative（相对定位），在元素原来的位置上进行定位，top，left，bottom，right的值相当于原来位置的偏移量
4.fixed（固定定位），相对于浏览器视口的定位，不会随着滚动条的滚动而滚动，top，left，bottom，right的值相当于浏览器窗口的定位

区别
1.absolute和relative都会使元素脱离文档流，但不同的是，absolute脱离文档流后不会占用原来的位置，而relative会在原来的位置上留下一个副本占用原来文档流的位置
2.absolute的父元素设有position时，top,left,bottom,right会忽略父级元素的padding值，即始终与父级元素的左上角进行定位，且其层级会始终比父级高，无论父级设置多大的z-index，但relative的定位会受父元素padding值影响
3.absolute是以第一个设置了position的父元素或祖先元素进行定位，而relative定位的层总是相对于其最近的父元素，无论其父元素是何种定位方式

8.HTML5,CSS3里面新增了哪些特性？

答：
HTML5:
本地离线存储localStorage
新的语义标签
长期存储数据，浏览器关闭
article 独立的内容;
后数据不丢失;
aside侧边栏;
sessionStorage的数据在浏
header头部;
览器关闭后自动删除
nav导航;
新的技术webworker,
section文档中的节;
websocket,Geolocation;
footer页脚;
拖拽释放(Drag and drop)
画布(Canvas)APl;
APl;
地理(Geolocation) APl;表单控件.calendar、date.音频、视频APl(audio,
time、email、url、searc
video);

css3:
圆角(border-radius) ,
阴影(box-shadow)，
2d，3d变换;
对文字加特效(text-shadow),
Transition,
线性渐变(gradient)
animation;
旋转(transform)
媒体查询
transform:rotate(9deg)
新的单位
scale(0.85,0.90) translate
(rem,vw, vh等);
(0px,-30px)
rgba;
skew(-9deg,0deg);旋转,缩放,定位,倾斜

9.BFC是什么？

答：
Block Fromatting Context:块级格式化上下文，简称BFC;
w3C对BFC的定义︰浮动元素和绝对定位元素，非块级盒子的块级容器(例如inline-blocks, table-cells,和table-captions)，以及overflow值不为"visiable"的块级盒子，都会为他们的内容创建新的BFC

10.常见的兼容性问题？

1．不同浏览器的标签默认外补丁margin和内补丁padding不同;
2.块属性标签float之后，又有横向的margin值，在IE6中显示会比设置的大;
3．设置较小的高度标签(一般小于10px)，在IE6,IE7，遨游中超出自己设置的高度;
4．行内标签设置display:block;后又采用float布局，再设置横向margin值时，在IE6中显示会比设置的大;
5.图片默认有间距;
6．标签最低高度设置min-height不兼容;
7．透明度兼容设置;
8.Box Model的bug;
9.IE6中的列表li楼梯状bug;
10.li空白间距;rflow : auto:和position:relative的碰撞;
12.浮动层的错位;
13.IE6克隆文本的bug;
14.IE的图片缩放;
15.IE6 下png图片的透明bug;
16.透明背景bug;
17.禁用IE默认的垂直滚动条;

11.JS数据类型有哪些？

在JavaScript中每一个值都属于某一种数据类型。 JavaScript的数据类型共有六种。 它们分别是undefined、null、boolean、number、string、object JavaScript 只有一种数字类型。 数字可以带小数点，也可以不带 它有两个值：true和false，但需要注意的是true不一定等于1，false不一定等于0。

12.判断一个值是什么类型有哪些方法

typeof运算符，instanceof运算符，object.prototype.tostring方法

13.null和undefined的区别？

(1 ) null是一个表示”无”的对象，转我数值是为0undefined是一个表示”无”的原始值，转为数值时为NaN。当声明的变量还未被初始化时，能量的默认值为undefined;
(2)Null用来表示尚未存在的对象，常用来表示函数企图返回一个不存在的对象;
(3) Undefined表示”缺少值”,就是此处应该有-个值，但是还没有定义;
(4)null表示”没有对象”，即该处不应该有值

undefined和null的区别：. ● undefined 表示一个变量没有被声明，或者被声明了但没有被赋值（未初始化），一个没有传入实参的形参变量的值为undefined，如果一个函数什么都不返回，则该函数默认返回undefined。. null 则表示"什么都没有"，即"空值"。. ●　Javascript将未赋值的变量默认值设为 undefined ；Javascript从来不会将变量设为 null 。. 它是用来让程序员表明某个用var声明的变量时没有值的；.

14.怎么判断一个变量arr是否为数组（此题用typeof不行）？

1.instanceof；
2.对象的constructor属性；
3.object.prototype.tostring;
4.array对象的isarray方法（array.isarray()）;

15.箭头函数有哪些特点？

1.不需要function关键字来创建函数；
2.省略return关键字；
3.改变this的指向；

16.new操作符具体干了什么呢？

1.创建一个空对象；
2.链接到原型；
3.绑定this值（让func中的this指向obj，执行func的函数体）；
4.返回新对象；

17.documen.write和innerHTML的区别？

documen.write是直接将内容写入页面的内容流，会导致页面全部重绘，innerhtml将内容写入某个DOM节点，不会导致全部重绘。
document.write是直接写入到页面的内容流，如果在写之前没有调用document.open, 浏览器会自动调用open。每次写完关闭之后重新调用该函数，会导致页面被重写。

innerHTML则是DOM页面元素的一个属性，代表该元素的html内容。你可以精确到某一个具体的元素来进行更改。如果想修改document的内容，则需要修改document.documentElement.innerElement,且innerHTML将内容写入某个DOM节点，不会导致页面全部重绘。
document.write是重写整个document, 写入内容是字符串的html
innerHTML是HTMLElement的属性，是一个元素的内部html内容
所以两者都可向页面输出内容,innerHTML比document.write更灵活，而innerHTML很多情况下都优于document.write，其原因在于其允许更精确的控制要刷新页面的那一个部分。

18.什么是ajax过程

1．创建XIALHttpRequest对象,也就是创建一个异步调用对象;
2．创建一个新的HTTP请求,并指定该HTTP请求的方法、URL及验证信息;
3.设置响应HTTP请求状态变化的函数;4．发送HTTP请求;
5．获取异步调用返回的数据;
6．使用JavaScript和DOM实现局部刷新;
PS：Ajax的工作原理相当于在用户和服务器之间加了—个中间层 (AJAX引擎),使用户操作与服务器响应异步化。并不是所有的用户请求都提交给服务器,像—些数据验证和数据处理等都交给Ajax引擎自己来做, 只有确定需要从服务器读取新数据时再由Ajax引擎代为向服务器提交请求。

19.请解释一下JavaScript的同源策略？

答：同源策略是客户端脚本（尤其是Javascript)的重要的安全度量标准。它最早出自Netscape Navigator2.0，其目的是防止某个文档或脚本从多个不同源装载

概念:同源策略是客户端脚本（尤其是Javascript）的重要的安全度量标准。它最早出自Netscape Navigator2.0，其目的是防止某个文档或脚本从多个不同源装载。
这里的同源策略指的是：协议，域名，端口相同，同源策略是一种安全协议。指一段脚本只能读取来自同一来源的窗口和文档的属性。
为什么要有同源限制？
我们举例说明：比如一个黑客程序，他利用Iframe把真正的银行登录页面嵌到他的页面上，当你使用真实的用户名，密码登录时，他的页面就可以通过Javascript读取到你的表单中input中的内容，这样用户名，密码就轻松到手了。

20.介绍一下闭包和闭包的常用场景

1. 闭包是指有权访问另一个函数作用域中的变量的函数，创建闭包常见方式，就是在一个函数的内部创建另一个函数。

2. 使用闭包主要为了设计私有的方法和变量，闭包的优点是可以避免变量的污染，缺点是闭包会常驻内存，会增大内存使用量，使用不当很容易造成内存泄露。
   在js中，函数即闭包，只有函数才会产生作用域的概念。

闭包有三个特性：
函数嵌套函数
函数内部可以引用外部的参数和变量
参数和变量不会被垃圾回收机制回收
应用场景，设置私有变量的方法
不适用场景：返回闭包的函数是个非常大的函数
闭包的缺点就是常驻内存，会增大内存使用量，使用不当会造成内存泄漏

这篇关于前端面试的基础四十小问（前20问）的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---