初级前端面试题总结（html, css, js, ajax，http）

答案仅供参考。答案有不全或有偏颇之处，欢迎各位在评论区补充及指正。

什么是盒子模型？

把所有的网页元素都看成一个盒子，它具有：
content，padding，border，margin
四个属性，这就是盒子模型。

行内元素有哪些？块级元素有哪些？空（viod）元素有哪些？

行内元素：a、b、span、img、input、strong、select、label、em、button、textarea

块级元素：div、ul、li、dl、dt、dd、p、h1-h6、blockquote

空元素：即系没有内容的HTML元素，例如：br、hr、link、input、img、meta

列举一些你所知道的HTML5和CSS3新特性

HTML5:
语义化更好的内容标签(header, nav, aside, article, section，footer )

用于媒介回放的 video 和 audio 元素

自定义属性data-id

HTML5 拥有多个新的表单输入类型。这些新特性提供了更好的输入控制和验证。
calendar、date、time、email、url、search

CSS3:
颜色: 新增RGBA , HSLA模式

文字阴影(text-shadow)

边框: 圆角(border-radius) 边框阴影 : box-shadow

盒子模型: box-sizing

背景:background-size background-origin background-clip

渐变: linear-gradient , radial-gradient

过渡 : transition 可实现动画

自定义动画 animate @keyfrom

媒体查询 多栏布局 @media screen and (width:800px) {…}

border-image

2D转换;transform: translate(x,y) rotate(x,y) skew(x,y) scale(x,y)

3D转换

字体图标 font-face

弹性布局flex

简述一下src和href的区别

href用于建立当前页面与引用资源之间的关系（链接），而src则会替换当前标签。遇到href，页面会并行加载后续内容；而src则不同，浏览器需要加载完毕src的内容才会继续往下走

建议js文件放在HTML文档的最后面。如果js文件放在了head标签中，可以使用window.onload实现js的最后加载。

详细可参考：href与src的区别

CSS实现垂直水平居中（列举一种）

方法1： 使用position:absolute与transform配合实现

如果不确定子元素高度，可以不使用margin-top，使用transform:translate(-50%,-50%)

方法2.：弹性布局（flex）
设置父元素的display的值为flex，然后设置align-items: center; justify-content: center;

可参考：css实现垂直水平居中的几种方法

px和em，rem的区别

1. PX实际上就是像素，用PX设置字体大小时，比较稳定和精确。但如果改变浏览器的缩放，原本的布局就会被打破
2. em和rem相对于px更具有灵活性，他们是相对长度单位，意思是长度不是定死了的，更适用于响应式布局
3. 对于em和rem的区别一句话概括：em相对于父元素，rem相对于根元素
4. IE6-IE8，不支持em和rem属性，px是所有浏览器都支持。
   因此为了浏览器的兼容性，可“px”和“rem”一起使用，用"px"来实现IE6-8下的效果，然后使用“Rem”来实现代浏览器的效果

实际例子可参考：https://www.cnblogs.com/nannan1221/p/10772977.html

说一下同步和异步的区别

同步会阻塞，异步不会阻塞

同步：程序运行从上而下，浏览器必须把这个任务执行完毕，才能继续执行下一个任务

异步：程序运行从上而下，浏览器任务没有执行完，但是可以继续执行下一行代码，当被调用者得到结果之后会通过回调函数主动通知调用者。

Doctype作用？严格模式与混杂模式如何区别？他们有何意义？

作用：
<!DOCTYPE>声明位于位于HTML文档中的第一行，处于 标签之前。告知浏览器的解析器用什么文档标准解析这个文档。DOCTYPE不存在或格式不正确会导致文档以兼容模式呈现。

严格模式与混杂模式如何区别？
1.标准模式(严格模式)的排版和JS运作模式都是以该浏览器支持的最高标准运行（W3C 标准）。
2.在兼容模式（混杂模式或怪异模式）中，页面以宽松的向后兼容的方式显示,模拟老式浏览器的行为以防止站点无法工作。（这里的向后兼容是指站在新版本的立场上讨论过去版本的兼容性问题）

意义：
随着标准一致性越来越重要，浏览器开发商不得不面临一个艰难的抉择：逐渐遵循w3c的标准是前进的方向。但是改变现有的css，完全去遵循标准，会使许多旧网站或多或少的收到破坏，如果浏览器突然以正确的方式解析现存的css，陈旧的网站的显示必然会受到影响。所以，所有的浏览器都需要提供两种模式，混杂模式服务于旧世规则，严格模式服务于标准规则。

null和undefined的区别

null 和 undefined 的值相等，当两者做全等比较时类型不等

console.log(null==undefined);    //true  因为两者都默认转换成了false
console.log(null===undefined);    //false   "==="表示绝对相等，null和undefined类型是不一样的，所以输出“false”
console.log(typeof undefined);    //"undefined"  
console.log(typeof null);       //"object"  

null： Null类型，代表“空值”，代表一个空对象指针，使用typeof运算得到 “object”，所以你可以认为它是一个特殊的对象值。
一般用于主动释放指向对象的引用，例如：

var emps = ['ss','nn'];
emps = null;     // 释放指向数组的引用

undefined： 表示变量声明过但并未赋过值。

var a;    // a 自动被赋值为 undefined

那到底什么时候是null,什么时候是undefined呢？？？

null表示"没有对象"，即该处不应该有值。典型用法是：

（1） 作为函数的参数，表示该函数的参数不是对象。
（2） 作为对象原型链的终点。

undefined表示缺少值，即此处应该有值，但没有定义。典型用法是：

（1）定义了形参，没有传实参，显示undefined

（2）对象属性名不存在时，显示undefined

（3）函数没有写返回值，即没有写return，拿到的是undefined

（4）写了return，但没有赋值，拿到的是undefined

何时使用null?
当使用完一个比较大的对象时，需要对其进行释放内存时，设置为 null。

简述你对json的了解

(1) JSON 是一种轻量级的数据交换格式；采用键值对的方式，易于阅读和编写，同时也易于机器解析和生成。
(2) JSON 是独立于语言的，也就是说不管是什么语言，都可解析为json，只需按照json规则来就行。
(3) JSON的语法表示三种类型值，简单值(字符串，数值，布尔值，null),数组，对象

简单介绍构造函数

一个例子来解释构造函数 ，我觉得蛮贴切的就在这里引用一下，有人想要造一千个金币，并且要每个金币上面刻有不同的编号，最简单的方法就是，造一个金币的模子，然后再各自刻各自的编号， 构造函数就是这个金币的模子，你每次new一下，就是造一个金币。
构造函数就是一个普通的函数，创建方式和普通函数没有区别，不同的是构造函数习惯上首字母大写。另外就是调用方式的不同，普通函数是直接调用，而构造函数需要使用new关键字来调用。

具体可参考：构造函数和普通函数的区别

javascript中的原型和原型链

原型：
在JavaScript中，每当定义一个函数数据类型(普通函数、类)时候，都会天生自带一个prototype属性，这个属性指向函数的原型对象，并且这个属性是一个对象数据类型的值。

原型对象就相当于一个公共的区域，所有同一个类的实例都可以访问到这个原型对象，我们可以将对象中共有的内容，统一设置到原型对象中。

原型链：
每个对象创建都会有一个prototype的原型属性，当这个对象的某个属性不存在时就会去他的prototype上查找，而prototype又有自己的prototype,然后如此循环，就是原型链
个人理解：只有函数才有prototype属性，可能这个说法不大准确，但大多数用的时候就这意思，
1、proto 是原型链查询中实际用到的，它总是指向 prototype；
2、prototype 是函数所独有的，在定义构造函数时自动创建，它总是被 proto 所指。

可参考：原型和原型链详解

作用域和闭包

作用域：在 JavaScript 中, 作用域为可访问变量，对象，函数的集合。

函数A 里面包含了 函数B，而 函数B 里面使用了 函数A 的变量，那么 函数B 被称为闭包。
又或者：闭包就是能够读取其他函数内部变量的函数

function A() {
var a = 1;
function B() {
console.log(a);
}
return B();
}

闭包举个栗子：

上面三行代码在一个立即执行函数中。
三行代码中，有一个局部变量 local，有一个函数 foo，foo 里面可以访问到 local 变量。
好了这就是一个闭包：
「函数」和「函数内部能访问到的变量」（也叫环境）的总和，就是一个闭包。
就这么简单。

详细案例可参考：JavaScript 作用域
JavaScript 闭包
JS 中的闭包是什么？讲的超级好的
什么是闭包？以及闭包的优点，缺点，用处，及特性

它的最大用处有两个，一个是前面提到的可以读取函数内部的变量，另一个就是让这些变量的值始终保持在内存中。

为什么不能滥用闭包

由于闭包会使得函数中的变量都被保存在内存中，内存消耗很大，所以不能滥用闭包，否则会造成网页的性能问题，在IE中可能导致内存泄露。解决方法是，在退出函数之前，将不使用的局部变量全部删除。
另外说一个概念：内存泄露是指你用不到（访问不到）的变量，依然占居着内存空间，不能被再次利用起来。

什么是ajax？

Ajax是全称是asynchronous JavaScript andXML，即异步JavaScript和xml，用于在Web页面中实现异步数据交互，实现页面局部刷新

ajax优缺点？

优点：

1. 可以实现异步通信效果，页面局部刷新，带来更好的用户体验
2. 前端和后端负载均衡（将一些后端的工作交给前端，减少服务器与宽带的负担）
3. 界面和应用相分离（ajax将界面和应用分离也就是数据与呈现相分离）

缺点：

4. ajax不支持浏览器back按钮
5. 安全问题 ajax暴露了与服务器交互的细节
6. 对搜索引擎的支持比较弱
7. 破坏了Back与History后退按钮的正常行为等浏览器机制

ajax原理？？（页面渲染的过程？？创建ajax过程？？）

创建一个XHR对象，并发送异步请求，接着监听服务器响应结果，并把它渲染在页面上

get、post的区别？

此题比较简单，但一定要回答的全面
1.get传参方式是通过地址栏URL传递，是可以直接看到get传递的参数，post传参方式参数URL不可见，get把请求的数据在URL后通过？连接，通过&进行参数分割。psot将参数存放在HTTP的包体内

2.get传递数据是通过URL进行传递，对传递的数据长度是受到URL大小的限制，URL最大长度是2048个字符。post没有长度限制

3.get后退不会有影响，post后退会重新进行提交

4.get请求可以被缓存，post不可以被缓存

5.get请求只URL编码，post支持多种编码方式

6.get请求的记录会留在历史记录中，post请求不会留在历史记录

7.get只支持ASCII字符，post没有字符类型限制

什么是跨域？

跨域问题来源于JavaScript的同源策略，即只有 协议+主机名+端口号 (如存在)相同，则允许相互访问，否则不能相互的去访问资源。
跨域问题是针对JS和ajax的。

如何解决跨域问题？（三种解决方案）

1. 代理服务器
用一个新的服务器把需要使用的代码都放在一起就可以正常访问。

2. 后台设置请求头Header
这个跨域访问的解决方案的安全基础是基于"JavaScript无法控制该HTTP头"
它需要通过目标域返回的HTTP头来授权是否允许跨域访问。

response.addHeader(‘Access-Control-Allow-Origin:*’);//允许所有来源访问 
response.addHeader(‘Access-Control-Allow-Method:POST,GET’);//允许访问的方式

3. 使用JSONP（json+padding）把数据内填充起来

3.1 什么是jsonp：

jsonp是一种数据传输的方式或者说非强制性的协议

3.2 jsonp和ajax的实质：

ajax的核心是通过xmlHttpRequest获取非本页内容

jsonp的核心是动态添加script标签调用服务器提供的js脚本

3.3 jsonp使用注意：

只能传递 通过GET 方式传递的数据（参数通过url的方式传递,所以jsonp的 type类型只能是get ！）

3.4 jsonp使用代码：
js版：

 <script>
    var script = document.createElement('script');
    script.type = 'text/javascript';

    // 传参一个回调函数名给后端，方便后端返回时执行这个在前端定义的回调函数
    script.src = 'http://www.domain2.com:8080/login?user=admin&callback=handleCallback';
    document.head.appendChild(script);

    // 回调执行函数
    function handleCallback(res) {
    
    
        alert(JSON.stringify(res));
    }
 </script>

服务端返回如下（返回时即执行全局函数）：

handleCallback({
    
    "success": true, "user": "admin"})

jQuery版：

$.ajax({
    
    
			type : "GET",
			async : false,
			url : "http://a.a.com/a/FromServlet?userName=644064",
			dataType : "jsonp",//数据类型为jsonp  
			jsonp : "jsonpCallback",//服务端用于接收callback调用的function名的参数
			success : function(data) {
    
    
				alert(data["userName"]);
			},
			error : function() {
    
    
				alert('fail');
			}
		});

可参考：解决ajax跨域问题【5种解决方案】
9种常见的前端跨域解决方案（详解）

解释jsonp的原理

jsonp的原理就是利用<script>标签没有跨域限制，通过<script>标签src属性，发送带有callback参数的GET请求，服务端将接口返回数据拼凑到callback函数中，返回给浏览器，浏览器解析执行，从而前端拿到callback函数返回的数据。

常见的HTTP方法有哪些？

1. GET： 用于请求访问已经被URI（统一资源标识符）识别的资源，可以通过URL传参给服务器
2. POST：用于传输信息给服务器，主要功能与GET方法类似，但一般推荐使用POST方式。
3. PUT： 传输文件，报文主体中包含文件内容，保存到对应URI位置。
4. HEAD： 获得报文首部，与GET方法类似，只是不返回报文主体，一般用于验证URI是否有效。
5. DELETE：删除文件，与PUT方法相反，删除对应URI位置的文件。
6. OPTIONS：查询相应URI支持的HTTP方法

HTTP与HTTPS的区别：

先说一下什么是HTTP？？HTTP是基于TCP/IP的关于数据如何在万维网中如何通信的协议。

1. HTTP 的URL 以http:// 开头，而HTTPS 的URL 以https:// 开头
2. HTTP 是不安全的，而 HTTPS 是安全的
3. HTTP 标准端口是80 ，而 HTTPS 的标准端口是443
4. 在OSI 网络模型中，HTTP工作于应用层，而HTTPS 的安全传输机制工作在传输层
5. HTTP 无法加密，而HTTPS 对传输的数据进行加密
6. HTTP无需证书，而HTTPS 需要CA机构wosign的颁发的SSL证书

HTTP请求的完全过程

1）域名解析

2） 发起TCP的3次握手

3） 建立TCP连接后浏览器给服务器发起http请求

4） 服务器响应http请求，浏览器得到html代码

5） 浏览器解析html代码，并请求html代码中的资源（如js、css、图片等）

6） 关闭TCP连接，浏览器对页面进行渲染呈现给用户

TCP三次握手

第一次握手，客户端发了个连接请求消息到服务端，服务端收到信息后知道自己与客户端是可以连接成功的，但此时客户端并不知道服务端是否已经接收到了它的请求，所以服务端接收到消息后的应答，客户端得到服务端的反馈后，才确定自己与服务端是可以连接上的，这就是第二次握手。

如果只有两次握手，那么到这里，连接就建立了，但是此时客户端并没有任何数据要发送，而服务端还在傻傻的等候佳音，造成很大的资源浪费。所以需要第三次握手，只有客户端再次回应一下，就可以避免这种情况。

所谓四次挥手（Four-Way Wavehand）即终止TCP连接

具体可参考：TCP三次握手，这是我见过最好的解读了

http协议返回码的含义

2xx：成功
200 OK：表示从客户端发送给服务器的请求被正常处理并返回；

3xx：页面重定向（需要进行附加操作以完成请求）
301 Moved Permanently：永久性重定向，表示请求的资源被分配了新的URL，之后应使用更改的URL；
302 Found：临时性重定向，表示请求的资源被分配了新的URL，希望本次访问使用新的URL；

   301与302的区别：前者是永久移动，后者是临时移动（之后可能还会更改URL）

4xx：客户端错误；
400 Bad Request：表示请求报文中存在语法错误；
403 Forbidden：服务器拒绝该次访问（访问权限出现问题）
404 Not Found：表示服务器上无法找到请求的资源

5xx：服务端错了；
500 Inter Server Error：表示服务器在执行请求时发生了错误，也有可能是web应用存在的bug或某些临时的错误时；

TCP和UDP的区别

TCP（Transmission Control Protocol，传输控制协议）是基于连接的协议，也就是说，在正式收发数据前，必须和对方建立可靠的连接。一个TCP连接必须要经过三次“对话”才能建立起来

UDP（User Data Protocol，用户数据报协议）是与TCP相对应的协议。它是面向非连接的协议，它不与对方建立连接，而是直接就把数据包发送过去！ UDP适用于一次只传送少量数据、对可靠性要求不高的应用环境

说说网络分层里七层模型是哪七层

应用层：允许访问OSI环境的手段

表示层：对数据进行翻译、加密和压缩

会话层：建立、管理和终止会话

传输层：提供端到端的可靠报文传递和错误恢复

网络层：负责数据包从源到宿的传递和网际互连

物理层：通过媒介传输比特,确定机械及电气规范

具体可参考：前端面试题整理—HTTP篇