30道前端面试题Get！_惠州前端培训

1.Doctype作用？标准模式和兼容模式区别。

声明在HTML文档第一行，告诉浏览器用什么文档标准解析这个文档。DOCTYPE不存在或格式不正确会导致文档以兼容模式呈现。

标准模式的排版 和JS运作模式都是以该浏览器支持的最高标准运行。在兼容模式中，页面以宽松的向后兼容的方式显示,模拟老式浏览器的行为以防止站点无法工作。

2.行内元素有哪些？块级元素有哪些？

每个元素都有一个diaplay属性，确定该元素的类型，比如块级元素默认值就是block,行内元素就是none

行内元素：span a u i b img input slect。。。

块级元素：div p ul li ol h1 h2。。。

3.引入样式link和import区别

link属于html直接是在html中引入，import在css中引入只能引入css

link在直接引入页面的时候就就已经引入了，import需要在引入css的时候才引入，性能比较低。

import是CSS2.1 提出的，只在IE5以上才能被识别，而link是html标签，无兼容问题;

4.HTML5有哪些新特性？如何区分html和html5

html5新增了好多东西比如：

一些语义化标签 nav header footer

绘图用到的canvas

用于媒体的video 和 audio 元素

本地离线存储 localStorage 长期存储数据，浏览器关闭后数据不丢失，sessionStorage 的数据在浏览器关闭后自动删除;

表单控件，calendar、date、time、email、url、search

区分html5和html：

可以按上文说的doctype区分也可以使用标签区分

5.html语义化理解:

语义化是html结构更清晰，便于浏览器解析，利于SEO搜素，使代码更好理解，便于维护

6.介绍一下css盒模型

分为两种：ie盒模型和w3c盒模型

盒模型：内容(content)、填充(padding)、边界(margin)、 边框(border)；

区别：IE的content部分把 border 和 padding计算了进去;

7.position有几个值

absolute 生成绝对定位的元素，相对于值不为 static的第一个父元素进行定位。

fixed 绝对定位，相对于浏览器窗口定位

reactive 相对定位，对于正常元素定位

static 默认值，没有定位

inherit 从父元素继承position属性

8.为什么要初始化css样式

因为浏览器的兼容问题，不同浏览器对有些标签的默认值是不同的，如果没对CSS初始化往往会出现浏览器之间的页面显示差异

最简单的初始化方法： * {padding: 0; margin: 0;} （强烈不建议）

9.css新增伪类元素

:nth-child :after :befor :checked :disable

10.css新特性

transform ：translate scale skew rotate； transtion ；animation ；shadow ；border-radius

javascript

11.js基本类型

js有五种基本类型：boolean string number null undefined 一种特殊类型：object

新增了Symbol(创建后独一无二且不可变的数据类型 )

12.js基本规范

不在同一行声明多个变量 不用全局函数 switch必须有default

13.定义函数

函数声明 function name（）{}

函数表达式 var name = function（）{}

new实例化（不常用）

14.原型链

简单来说就是每个对象对会在内部初始化一个属性 prototype 如果这个对象不存在这个属性 会在prototype上找 这个prototype又会自己往上找 prototype

15.js继承

构造函数

优点：实现多个继承，实现子类可以向父类传递参数

缺点：无法实现复用影响性能，只能继承父类方法 不能继承原型上的

原型链继承

优点：实现简单，父类新增原型方法子类可访问

缺点：无法实现多个继承 创造子类实例时无法向父类构造函数传参

拷贝继承

优点：支持多继承

缺点：效率低 内存占用高

实例继承

优点：不限制调用方式

缺点：不支持多继承

组合继承

优点：可传参，可复用，可以继承原型链上的东西 既是子类实例又是父类实例

缺点：调用了两次父类构造函数 多耗费了一点内存

寄生式组合继承

优点：完美

缺点：实现复杂

16.js作用域链

作用域链的作用是保证执行环境里有权访问的变量和函数是有序的，作用域链的变量只能向上访问，变量访问到window对象即被终止，作用域链向下访问变量是不被允许的。

17.this指向

this指向直接调用者

this指向new出来的对象

在事件中this指向这个事件的对象 IE中的attachEvent的this指向全局window

thi指的当前对象

18.null与undefined

null 表示一个对象被定义了，值为“空值”；

undefined 表示不存在这个值。

null==undefined true

19.eval

解析字符串，应该避免使用eval，不安全，非常耗性能（2次，一次解析成js语句，一次执行），也可以把JSON字符串转换为JSON对象

20.window对象和document对象

window对象是指浏览器打开的窗口。

document对象是Documentd对象（HTML 文档对象）的一个只读引用，window对象的一个属性

21.什么是闭包？闭包特性

闭包是指有权访问另一个函数作用域中变量的函数，创建闭包的最常见的方式就是在一个函数内创建另一个函数，通过另一个函数访问这个函数的局部变量,利用闭包可以突破作用链域，将函数内部的变量和方法传递到外部。

特性：

函数内再嵌套函数

内部函数可以引用外层的参数和变量

参数和变量不会被垃圾回收机制回收

22.什么是js严格模式

严格模式就是在js代码前加 use strict 让 Javascript 在更严格的条件下运行,使JS编码更加规范化的模式,消除Javascript语法的一些不合理、不严谨之处，减少一些怪异行为。

23.同步和异步区别

同步：浏览器访问服务器请求，用户看得到页面刷新，重新发请求,等请求完，页面刷新，新内容出现，用户看到新内容,进行下一步操作

异步：浏览器访问服务器请求，用户正常操作，浏览器后端进行请求。等请求完，页面不刷新，新内容也会出现，用户看到新内容

24.操作dom节点

creatElement（）具体元素

creatTextNode（）创建文本节点

appendChild（）添加

removeChild（）删除

replaceChild（）替换

insertChild（）插入

25.数组的方法

push（）pop（）unshift（）shift（）splice（）indexOf（）sort（）concat（）jion（）slice（）reverse（） includes（）

26.更改this指向

.call() .apply() .bind()

27.jquery.extend 与 jquery.fn.extend的区别？

jquery.extend 为jquery类添加类方法，可以理解为添加静态方法

jquery.fn.extend:源码中jquery.fn = jquery.prototype，所以对jquery.fn的扩展，就是为jquery类添加成员函数 使用：

jquery.extend扩展，需要通过jquery类来调用，而jquery.fn.extend扩展，所有jquery实例都可以直接调用

28.作用域

作用域 每个方法都是作用域最大的是window

作用域的方法和属性只能在当前作用域使用

查找作用域 是从当前查找 再去上一级查找

29.同源策略

同域名 同端口 同协议

30.http状态码有那些？分别代表是什么意思？

100 Continue 继续，一般在发送post请求时，已发送了http header之后服务端将返回此信息，表示确认，之后发送具体参数信息

200 OK 正常返回信息

201 Created 请求成功并且服务器创建了新的资源

202 Accepted 服务器已接受请求，但尚未处理

301 Moved Permanently 请求的网页已永久移动到新位置。

302 Found 临时性重定向。

303 See Other 临时性重定向，且总是使用 GET 请求新的 URI。

304 Not Modified 自从上次请求后，请求的网页未修改过。

400 Bad Request 服务器无法理解请求的格式，客户端不应当尝试再次使用相同的内容发起请求。

401 Unauthorized 请求未授权。

403 Forbidden 禁止访问。

404 Not Found 找不到如何与 URI 相匹配的资源。

500 Internal Server Error 最常见的服务器端错误。

503 Service Unavailable 服务器端暂时无法处理请求（可能是过载或维护）

标签：前端前端面试题