前端面试题三：WebAPI、JavaScript高级、JavaScript基础、css、Html

目录

一、WebAPI

二、JavaScript高级

三、JavaScript基础

四、css

五、Html

---

一、WebAPI

1.列举DOM元素增删改查API：

创建DOM：document.createElement()

查找DOM：

document.getElementById()

document.getElementsByClassName()

document.getElementsByName()

document.querySelectorAll()

document.querySelector()

追加DOM：parentDom.appendChild()

移除DOM：parentDom.removeChild()

2.BOM中有哪些常用的对象？

lo1cation:

location.href：页面url地址

location.hash：url中#后的部分

location.search：url中？后的部分

location.reload()：刷新页面

navigator:

navigator.userAgent：浏览器的userAgent信息

history：

history.go(1)：前进1步

history.go(-1)：后退1步

history.forward()：前进

history.back()：后退

screen：

screen.availWidth：屏幕的有效宽度

screen.availHeight：屏幕的有效高度

3.列举几个常见的浏览器兼容问题？

主流浏览器发送AJAX使用XMLHttpRequest创建异步对象

IE浏览器用XActive创建异步对象

主流浏览器

注册事件：addEventListener("eventType","handler","true|false")

移除事件：removeEventListener("eventType","handler","true|false")

IE浏览器

注册事件：attachEvent("eventType","handler")

移除事件：detachEvent("eventType","handler")

阻止事件冒泡：

主流浏览器：event.stopPropagation()

IE浏览器：event.cancleBubble=true

获取事件源：

主流浏览器：event.target

IE浏览器：event.srcElement

4.什么是事件委托？

本应该注册给子元素的事件，注册给父元素。

5.事件委托的原理是什么？

事件冒泡，因为有事件冒泡的存在，所以子元素的事件会向外冒泡，触发父元素的相同事件，根据事件对象可以找到真正触发事件的事件源。

6.JavaScript有几种定时器，有什么区别？

setInterval：间歇定时器，间隔一定的事件就执行，执行多次

setTimeOut：延时定时器，只执行一次。

7.DOM和BOM？

JavaScript基础分为三个部分：

• ECMAScript：JavaScript的语法标准。包括变量、表达式、运算符、函数、if语句、for语句等。

• DOM：文档对象模型，操作网页上的元素的API。比如让盒子移动、变色、轮播图等。

• BOM：浏览器对象模型，操作浏览器部分功能的API。比如让浏览器自动滚动。

二、JavaScript高级

1.什么是原型对象？

每一个构造函数都有一个prototype属性，这个属性的值是一个对象，这个对象就叫做构造函数的原型对象，一般建议将构造函数的成员属性绑定在原型对象prototype上，因为原型对象prototype身上的属性默认可以通过实例对象访问到，这样可以保证在每次通过new关键字创建实例对象的时候，这些方法不会被重复在内存中创建。

2.什么是原型链？

实例对象和原型对象之间的关系叫做原型链，这个关系通过--proto--联系。

每个构造函数都有一个prototype属性，即原型对象，通过实例对象的--proto--属性也可以访问原型对象；而原型对象本身也是一个对象，是对象就有自己的原型对象，最终形成的链状结构称为原型链。

3.什么是构造函数?

构造函数本身也是函数，只不过这个函数在定义的时候首字母一般需要大写，构造函数在调用的时候必须通过一个new关键字来调用，一般不直接使用构造函数，而是通过构造函数创建实例对象。构造函数时js面向对象的一个重要组成部分。

4.js中实现继承的方式？

ES6之前官方并没有提供一种实现继承的方法，所以大部分继承方式都是程序员通过代码在模拟，常见的继承方式有：

原型继承：

Student.prototype = new Person()

Student.prototype.constructor = Student

借用构造函数继承:

function Student(name,age,gender,score){

        Person.call(this,name,age,gender)

}

组合继承

ES6之后通过extends关键字实现继承：

Class Student extends Person{}

5.什么是闭包，有什么作用，使用时候要注意哪些问题？

闭包是一个跟函数有关的概念，表现形式是一个父函数内部，嵌套了一个子函数，子函数可以直接或间接的被返回给外部作用域，并且子函数中会使用到父函数局部作用域中的变量，当我们在外面调用这个函数时，就会发生闭包现象。

闭包的作用：闭包可以延展一个函数的作用域，缓存数据，延长作用域链，缺点就是没有及时释放

注意：不能滥用闭包，会导致内存泄露

6.什么是内存泄露，哪些操作会引起内存泄漏？

内存泄漏是指本应该被垃圾回收机制回收的内存空间由于某种特殊原因没有即使被回收，称之为内存泄露。

滥用全局变量和滥用闭包都会导致内存泄漏。

7.什么是预解析？

JS代码在执行之这桑·前，解析引擎会对代码进行一个预先的检查，主要会对变量和函数的声明进行提升，将变量和函数的声明提升到代码的最前面，变量只提升声明，不提升赋值。

8.说说对this关键字的理解？

this在不同场景下指向不太一样，主要分为以下几种情况：

普通函数中指向全局window

对象的成员方法中指向该方法的宿主对象

构造函数中指向new出来的实例对象

事件处理函数指向事件源

回调函数中指向全局window

9.call/apply/bind的区别？

相同点：

        这三个方法都是函数这个特殊对象的方法，通过这三个方法可以改变this的指向。

不同点：

        apply和call会调用一次函数，是调用的时候改变this指向

        bind不会调用函数，只会在内存中创建一个函数的副本，是复制一份的时候改变this指向

        call第二个参数开始需要一个参数列表

        apply第二个参数需要是一个数组

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

第一步：创建一个空的对象

第二步：将this指向空对象

第三步：动态给刚创建的对象添加成员属性

第四步：隐式返回this

11.caller和callee的区别？

函数fun.caller返回调用fun的函数对象，即fun的执行环境，如果fun的执行环境为window，则返回null；

callee是函数的arguments这个特殊对象的一个属性，指向函数本身。

三、JavaScript基础

1.js中有哪些数据类型？

Number,String,Boolean,Null,Undefined,Object

2.typeof和instanceof的区别？

typeof可以判断变量的数据类型，返回是字符串

a instanceof b判断b是不是在a的原型链上，也可以实现判断数据类型，返回值为布尔。

3.怎么判断两个对象相等？

先判断两者是不是对象

再判断两个对象的所有key值是否相等

最后判断两个对象相应的key对应的值是否相等

4.js中有哪些函数定义的方式？

函数声明：function fn(){}

函数表达式：var fn = function(){}

构造函数：var fn= new Function('参数1’，‘参数2’，‘函数体’)

5.js中函数有哪些调用方式？

普通函数，对象的方法，事件处理函数，构造函数，回调函数

6.‘==’和‘===’的区别？

==只会对值进行比较

===不仅会对值进行比较，还会对数据类型进行比较

7.js中常用的内置对象有哪些？并列举该对象的常用方法？

Data、Math、Array、Object

8.列举和数组操作相关的方法？

push：将元素添加至数组的末尾，返回值是数组长度

pop：将数组最后一个元素弹出，返回值被弹出的元素

unshift：在数组的开头插入一个元素，返回值是数组长度

shift：将数组的第一个元素弹出，返回值是被弹出的元素

splice(index,len)：删除或添加数组中指定元素

concat：连接数组

reverse：反转数组

9.列举和字符串操作相关的方法？

substr(start,len)/substring(start,end)：截取字符串

slice：从数组字符串截取一段

indexOf/lastIndexOf：查找一个字符是否存在于另一个字符串中，存在则返回索引，不存在则返回-1，indexOf是从前向后顺序查找，lastIndexOf是从后向前查找；

replace：替换字符串中特定的字符---->str.replace(old,new)

toUpperCase：替换字符串转成大写

toLowerCase：替换字符串转成小写

chartAt：获取字符串中指定索引的字符

10.document.write和innerHTML的区别？

document.write是指定在整个页面区域的内容，直接将内容写入页面的内容流，会导致页面的重绘；

innerHTML将是指定某一个元素的内容，将内容写入某个DOM节点，不会导致页面的重绘；

11.分别阐述split() slice() splice() join()？

split()：可以使用一个字符串切割另一个字符串，返回值是数组

slice()：可以从数组中截取一部分------->ary.slice(start,end)

splice(index，len)可以删除或添加指定位置的元素

join()：可以将数组元素使用特定的连接符拼接成字符串----->ary.join(separator)

12.列举3种强制类型转换和2种隐式类型转换？

强制类型转换：

转成字符串：toString() String()

转成数字：Number() parseInt() parseFloat()

隐式转换：

转换成布尔类型：Boolean（）

隐式拼接字符串：var str = "" + -/%===

13.如何判断foo是否是数组？

foo instanceof Array

foo.constructor ==Array

Array.isArray(foo)

四、css

1.px em rem这三个长度单位的区别？

px是一个绝对单位,

em rem是一个相对单位;

        em参考的是当前元素的字体大小,相对于父元素的属性来计算的；

        rem参考的页面根元素html的字体大小

2.css3新增的伪类有哪些？

p:first-of-type:选择属于其父元素的首个子元素

p:last-of-type：选择属于其父元素的最后一个子元素

p:nth-child(2)：选择属于其父元素的第二个子元素

p:nth-type-of(2)：选择属于其父元素的第二个子元素

:enabled :disabled：控制表单控件的禁用状态

:chexked：单选框或复选框选中

3.谈谈cs选择器优先级顺序以及判定标准？

优先级从低到高：

        通配符选择器<标签选择器<类选择器<ID选择器

行内样式使用！important修饰的属性优先级最高

如果两个选择器同时命中一个元素，并且权重一样，则书写顺序会影响优先级，后一个选择器的属性会覆盖前一个选择器中相同的属性。

4.position几个属性的作用？

position的常见四个属性值：relative absolute fixed static;

static：默认位置，一般不使用，static元素会忽略任何top bottom left right声明

relative：位置被设置为relative的元素，偏移的top,right,bottom,left的值都以它原来的位置为基准偏移。注意relative移动后的元素在原来的位置仍占据空间。

absolute：位置设置为absolute的元素，可定位于相对于包含它的元素的指定坐标。意思就是如果它的父容器设置了position属性，并且position的属性值为absolute或者relative，那么就会依据父容器进行偏移。如果根据父容器没有设置position属性，那么偏移是以body为依据。注意设置absolute属性的元素在标准流中不占位；

fixed：位置设置为fixed的元素，可定位于相对于浏览器窗口的指定坐标。不论窗口滚动与否，元素都会留在那个位置，它始终是以body为依据的。注意设置fixed属性的元素在标准流中不占位置。

5.position设置为absolute和fixed有什么区别？

absolute是绝对定位，绝对定位参考的是有明确定位的父元素，如果直接父元素没有明确定位会一直向上查找，如果父元素都没有明确定位，则参考body标签；

fixed是固定定位，参考对象是浏览器。

6.在一个页面中给多个元素设置相同的id，会导致什么问题？

会导致通过js获取dom元素的时候，只能获取到第一个元素，后面的元素都无法正常获取。

7.清楚浮动有哪些常见方式？

（1）额外标签法：在浮动元素的最后添加一个块级元素，给其设置一个clear:both的属性（缺点：会在页面上产生很多的空白标签）

（2）给浮动元素的父元素设置高度（缺点：不太灵活）

（3）给浮动的父元素设置overflow:hidden;

（4）使用伪元素法

8.让两个块级元素在一块显示的做法？

（1）设置显示模式：display:inline|inline-block

（2）flex布局：给父元素设置display:flex

（3）使用浮动

9.如何设置一个元素在垂直方向居中？

（1）可以使用margin外边距或者padding内边距来实现元素在垂直方向居中显示

（2）如果这个需要垂直居中的元素是一个单行文本，则可以使用行高等于标签高度的方式来实现

（3）可以使用css3中的flex布局，使用align-items:center设置元素在侧轴居中对齐

（4）可以使用绝对定位的方式，设置元素在相对定位的父元素中垂直对齐；

10.图片懒加载的原理？实际开发中使用过哪些图片懒加载的插件？

img标签在加载图片的时候，是通过src属性所指向的文件来加载图片的，那如果img标签本身没有src属性的话，那么img标签在渲染的时候就不会加载图片。

所以图片的懒加载的原理就是将img标签的src属性给暂时先改成一个自定义的属性，这样页面已记载就会不去加载图片，当img标签进入屏幕的可视区域后，从存放图片路径的自定义属性中获取图片的地址并动态的设置给对应的img标签的src属性，这样浏览器就会自动帮助我们去请求对应的图片资源，也就实现了所谓的图片懒加载。

图片懒加载的插件：vue-lazyload。

11.display:none;visibility:hidden的区别？

display:none----->隐藏元素后不占位

visibility:hidden----->隐藏元素后占位

联系：

        都能让元素不可见

区别：

display:none会让元素完全从渲染树消失，渲染时不占据任何空间；visibility:hidden不会让元素从渲染树消失，渲染时元素继续占据空间，只是内容不可见；

display:none是非继承属性，子孙节点消失由于元素从渲染树消失造成通过修改子孙节点属性无法显示；visibility:hidden是继承属性，子孙节点消失由于继承了hidden，通常设置visibility:visible可以让子孙节点显示；

修改常规流中元素的display通常会造成文档的重排，修改visibility属性只会造成元素的重绘；

读屏器不会读取display:none元素内容，会读取visibility:hidden元素内容；

12.less是什么？

 Less是一种css预处理语言，在less中可以定义一些变量和表达式以及使用嵌套语法，less中使用@定义变量（@basecolor:pink）；后期可以通过一些编译工具less将less编译成浏览器能直接识别的css样式。所以less只是在开发阶段使用的一种中间语言，使用less的目的是提高开发效率以及提高代码的可维护性。

13.Scss是什么？

scss是一种css预处理语言，在less中可以定义一些变量和表达式以及使用嵌套语法，scss中使用$定义变量（$basecolor:pink）后期可以通过一些编译工具将less编译成浏览器能直接识别的css样式，所以scss只是在开发阶段使用的一种中间语言，使用scss的目的是提高开发效率以及提高代码的可维护性。

14.Stylus是什么？

stylus是一种css预处理语言，在stylus中可以定义一些变量和表达式以及使用嵌套语法，stylus中是使用缩进的语法表示嵌套关系，后期可以通过编译工具将stylus编译成浏览器能直接识别的css样式，所以stylus只是在开发阶段使用的一种中间语言，使用stylus的目的是提高开发效率以及提高代码的可维护性。

五、Html

1.Html5新增了哪些标签？

布局标签：header section footer article aside

表单标签：datalist input:type="week|date|time|datetime|number|search|url|tel|color|email|range"

多媒体标签：audio（音频） video（视频）

其它标签：progress(进度条) meter（度量器）

Html5新属性：

hidden（隐藏元素） required（必填）minlength（最小长度） maxlength（最大长度） pattern（正则表达式） placeholder（提示文本） autocomplete（自动填充）autofocus（自动获取焦点）

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

块级元素独占一行页面空间，不会和其他元素共享一行页面空间；

行内元素可以和其他非块级元素共享一行页面空间；

3.列举几个块级标签和行内标签？

块级：div p h1~h6 section header footer

行内：span a strong em 

4.简述readonly与disabled的区别？

readonly是设置表单元素为只读状态

disabled是设置表单元素为禁用状态

5.哪些标签都存在伪元素？

大部分容器标签（大部分双标签）都有伪元素，iframe没有伪元素；

大部分单标签都没有伪元素，但是img有伪元素

6.伪元素可以用js来操作吗？

js不可以操作伪元素。

7.Html的网页为什么只需要写<!DOCTYPE HTML>?

DOCTYPE是HTML的文档声明，通过它告诉浏览器使用哪一个HTML版本标准解析文档；

在浏览器的发展历史中，HTML出现过很多版本，不同版本在元素属性等书写格式上略有差异，如果不预先告诉浏览器，浏览器就不知道我们的文档标准是什么，在这种情况下，大部分浏览器将开启最大兼容模式来解析网页，我们称之为怪异模式，这不仅会降低解析效率，而且在解析的过程中产生一些难以预知的bug，所以文档声明是必须的。

文档声明有多种书写格式，对应不同的HTML版本，<!DOCTYPE HTML>这种书写是告诉浏览器整个文档使用HTML5的标准进行解析。

8.src和href的区别？

它们都是HTML中特定元素的属性

src是source的缩写，它通常用于img video audio script等元素，可以指定外部资源的来源地址；

href是hyper reference的缩写，意味着超引用，它通常用于a,link等元素，通过href属性，可以标识文档中引用的其他超文本。

9.谈谈对标签语义化的理解？

（1）html语义化就是让页面的内容结构化，便于对浏览器、搜索引擎解析

（2）在没有样式css情况下也以一种文档格式来显示，容易阅读

（3）搜索引擎的爬虫依赖于标签来确定上下文和各个关键字的权重，利于SEO

（4）使阅读源代码的人对于网站更容易将网站分块，便于阅读和维护。

10.谈谈对WEB标准和W3C标准的理解？

WEB标准简单来说分为结构、表现、行为。

结构：主要是由HTML标签构成

表现：指css样式表，通过css可以使页面的结构化标签更具美感。

行为：是指页面和用户具有一定的交互，同时页面结构或表现发生变化，主要由js组成

W3C是一个定制各种标准的非盈利组织，标准包括了HTML/CSS/XHTML等，WEB标准定制后的优点：

学习成本降低，只学习标准即可

统一开发流程，用标准化工具开发，再用标准化的浏览器测试，便于多人协作

简化网站代码的维护

跨平台，可迁移到不同设备中。

11.div+css布局较于table布局有什么特点？

样式的调整更加方便，内容和样式的分离，使得页面和样式的调整更加方便；

页面加载速度更快，结构化清晰，页面显示简洁

表现和结构相分离

易于优化

符合W3C的标准