| 400 | 该状态码表示请求报文中存在语法错误。当错误发生时，需修改请求的内容后再次发送请求。 | | 401 | 该状态码表示发送的请求需要有通过 HTTP 认证（BASIC 认证、DIGEST 认证）的认证信息。 | | 403 | 该状态码表明对请求资源的访问被服务器拒绝了。 | | 404 | 该状态码表明服务器上无法找到请求的资源。 |
- 以 5xx 为开头的响应标头都表示服务器本身发生错误
| 状态码 | 含义 |
|---|---|
| 500 | 该状态码表明服务器端在执行请求时发生了错误。 |
| 503 | 该状态码表明服务器暂时处于超负载或正在进行停机维护，现在无法处理请求。 |
1.5.2 URL和URI有什么区别？
URI是统一资源标识符，相当于一个人身份证号码
Web上可用的每种资源如HTML文档、图像、视频片段、程序等都是一个来URI来定位的
URI一般由三部组成
①访问资源的命名机制
②存放资源的主机名
③资源自身的名称，由路径表示，着重强调于资源。
URL 是统一资源定位符，相当于一个人的家庭住址
URL是Internet上用来描述信息资源的字符串，主要用在各种WWW客户程序和服务器程序上，特别是著名的Mosaic。采用URL可以用一种统一的格式来描述各种信息资源，包括文件、服务器的地址和目录等。
URL一般由三部组成
①协议(或称为服务方式)
②存有该资源的主机IP地址(有时也包括端口号)
③主机资源的具体地址。如目录和文件名等
1.5.3 HTTP和HTTPS的区别
- HTTPS 协议需要到 CA （Certificate Authority，证书颁发机构）申请证书，一般免费证书较少，因而需要一定费用
- HTTP 是超文本传输协议，信息是明文传输，HTTPS 则是具有安全性的 SSL 加密传输协议。
- HTTP 和 HTTPS 使用的是完全不同的连接方式，用的端口也不一样，前者是80，后者是443。
- HTTP 的连接很简单，是无状态的。HTTPS 协议是由 SSL+HTTP 协议构建的可进行加密传输、身份认证的网络协议，比 HTTP 协议安全。(无状态的意思是其数据包的发送、传输和接收都是相互独立的。无连接的意思是指通信双方都不长久的维持对方的任何信息。)
2. HTML篇
2.1 Doctype作用？标准模式与兼容模式各有什么区别? 你知道多少种Doctype文档类型
1. Doctype作用
告知浏览器的解析器用什么文档标准解析这个文档。
2. 标准模式与兼容模式各有什么区别?
标准模式的排版 和JS运作模式都是以该浏览器支持的最高标准运行。
在兼容模式中，页面以宽松的向后兼容的方式显示,模拟老式浏览器的行为以防止站点无法工作。
简单的说，就是尽可能的显示能显示的东西给用户看。
3. 你知道多少种Doctype文档类型
HTML 4.01中有3种DTD（文档类型定义）声明可以选择：过渡的（Transitional）、严格的（Strict）和框架的（Frameset）
2.2 说说你对语义化的理解？
语义化的优点有:
- 代码结构清晰，易于阅读，利于开发和维护
- 提高用于体验，在样式加载失败时，页面结构清晰
- 方便其他设备解析（如屏幕阅读器）根据语义渲染网页。
- 有利于搜索引擎优化（SEO），搜索引擎爬虫会根据不同的标签来赋予不同的权重
语义化标签主要有
title,header,nav,main,article,h1~h6,ul,ol,address,canvas,dialog,aside,section,figure,details,mark
2.3 HTML与XHTML有什么区别?
- 其基础语言不同
1、XHTML是基于du可扩展标记语言（XML）。
2、HTML是基于标准通用标记语言（SGML）。 - 语法严格程度不同
1、XHTML语法比较严格，存在DTD定义规则。
2、HTML语法要求比较松散，这样对网页编写者来说，比较方便。 - 可混合应用不同
1、XHTML可以混合各种XML应用，比如MathML、SVG。
2、HTML不能混合其它XML应用。 - 大小写敏感度不同
1、XHTML对大小写敏感，标准的XHTML标签应该使用小写。
2、HTML对大小写不敏感。 - 公布时间不同
1、XHTML是2000年W3C公布发行的。
2、HTML4.01是1999年W3C推荐标准。
2.4 页面导入样式时，使用link和@import有什么区别？
1 属性差别。link属于XHTML标签，而@import完全是CSS提供的语法规则。
link标签除了可以加载CSS外，还可以做很多其它的事情，比如定义RSS，定义rel连接属性等，@import就只能加载CSS了。
2 加载顺序的差别。当一个页面被加载的时候（就是被浏览者浏览的时候），link引用的CSS会同时被加载，而@import引用的CSS会等到页面全部被下载完再被加载。所以有时候浏览@import加载CSS的页面时开始会没有样式（就是闪烁），网速慢的时候还挺明显.
3 兼容性的差别。由于@import是CSS2.1提出的所以老的浏览器不支持，@import只有在IE5以上的才能识别，而link标签无此问题。
4 使用dom控制样式时的差别。当使用javascript控制dom去改变样式的时候，只能使用link标签，因为@import不是dom可以控制的。
2.5 HTML5有哪些新特性？
- 语义化标签
语义化标签使得页面的内容结构化，见名知义
| 标签 | 描述 |
|---|---|
<header></header> | 定义了文档的头部区域 |
<footer></footer> | 定义了文档的尾部区域 |
<nav></nav> | 定义文档的导航 |
<section></section> | 定义文档中的节（section、区段） |
<article></article> | 定义页面独立的内容区域 |
<aside></aside> | 定义页面的侧边栏内容 |
<detailes></detailes> | 用于描述文档或文档某个部分的细节 |
<summary></summary> | 标签包含 details 元素的标题 |
<dialog></dialog> | 定义对话框，比如提示框 |
- 增强型表单
新增表单 Input 输入类型。这些新特性提供了更好的输入控制和验证。
| 输入类型 | 描述 |
|---|---|
| color | 主要用于选取颜色 |
| date | 从一个日期选择器选择一个日期 |
| datetime | 选择一个日期（UTC 时间） |
| datetime-local | 选择一个日期和时间 (无时区) |
| 包含 e-mail 地址的输入域 | |
| month | 选择一个月份 |
| number | 数值的输入域 |
| range | 一定范围内数字值的输入域 |
| search | 用于搜索域 |
| tel | 定义输入电话号码字段 |
| time | 选择一个时间 |
| url | URL 地址的输入域 |
| week | 选择周和年 |
| 新增表单元素： |
| 表单元素 | 描述 |
|---|---|
<datalist> | 元素规定输入域的选项列表，使用 元素的 list 属性与 元素的 id 绑定 |
<keygen> | 提供一种验证用户的可靠方法，标签规定用于表单的密钥对生成器字段。 |
<output> | 用于不同类型的输出 |
| 新增表单属性 |
- placehoder 属性，简短的提示在用户输入值前会显示在输入域上。即我们常见的输入框默认提示，在用户输入后消失。
- required 属性，是一个 boolean 属性。要求填写的输入域不能为空
- pattern 属性，描述了一个正则表达式用于验证 元素的值。
- min 和 max 属性，设置元素最小值与最大值。
- step 属性，为输入域规定合法的数字间隔。
- height 和 width 属性，用于 image 类型的 标签的图像高度和宽度。
- autofocus 属性，是一个 boolean 属性。规定在页面加载时，域自动地获得焦点。
- multiple 属性 ，是一个 boolean 属性。规定 元素中可选择多个值。
- 新增视频 和音频 标签
- Canvas绘图
- SVG绘图
- 地理定位
- 拖放API
- Web Worker
- Web Storage
- WebSocket
2.6 iframe的优缺点？
优点：
1.iframe能够原封不动的把嵌入的网页展现出来。
2.如果有多个网页引用iframe，那么你只需要修改iframe的内容，就可以实现调用的每一个页面内容的更改，方便快捷。
3.网页如果为了统一风格，头部和版本都是一样的，就可以写成一个页面，用iframe来嵌套，可以增加代码的可重用。
4.如果遇到加载缓慢的第三方内容如图标和广告，这些问题可以由iframe来解决。
缺点：
1.会产生很多页面，不容易管理。
2.iframe框架结构有时会让人感到迷惑，如果框架个数多的话，可能会出现上下、左右滚动条，会分散访问者的注意力，用户体验度差。
3.代码复杂，无法被一些搜索引擎索引到，这一点很关键，现在的搜索引擎爬虫还不能很好的处理iframe中的内容，所以使用iframe会不利于搜索引擎优化。
4.很多的移动设备（PDA 手机）无法完全显示框架，设备兼容性差。
5.iframe框架页面会增加服务器的http请求，对于大型网站是不可取的。
2.7 img中的alt与title属性
alt是图片加载失败时，显示在网页上的替代文字；
title是鼠标放在图片上面时显示的文字，title是对图片的描述与进一步说明；
alt是img必要的属性，而title不是；
对于网站seo优化来说，title与alt还有最重要的一点：
搜索引擎对图片意思的判断，主要靠alt属性。所以在图片alt属性中以简要的文字说明，同时包含关键词，也是页面优化的一部分。条件允许的话，可以在title属性里进一步对图片说明。
2.8 HTML 的中，如何写一个值为 “a”=‘b’ 的属性值？
3. CSS篇
3.1 行内元素有哪些？块级元素有哪些？CSS的盒模型？
3.2 清除浮动有哪些方式？
3.3 CSS选择符都有哪些？哪些属性可以继承？优先级算法如何计算？
3.4 CSS3新增伪类有哪些？
3.5 如何居中div？
3.6 为什么要初始化CSS?
3.7 说说你对BFC规范的理解？
一、什么是BFC？
BFC全称：块级格式化上下文（block formatting context），简单来说它就是一种属性，这种属性会影响元素与元素之间的位置、间距
二、形成BFC的条件
1、float：给元素添加浮动（属性值为left、right，但none除外）
2、position：给元素添加定位（属性值为absolute或fixed）
3、display：给元素添加display属性（属性值为 inline-block、table-cell或table-caption）
4、overflow：给元素添加overflow 属性（属性值为hidden、auto或scroll，但visible除外）
三、BFC形成后出现的常见问题
1、margin重叠问题
2、浮动相关问题
3.8 讲讲 position float display 各有哪些取值，它们互相之间会如何影响？
3.9 纯CSS实现三角形
.box {
width:0px;
height:0px;
border-top:50px solid rgba(0,0,0,0);
border-right:50px solid rgba(0,0,0,0);
border-bottom:50px solid red;
border-left:50px solid rgba(0,0,0,0);
}
/\* 或者用transparent \*/
.div{
width: 0;
height: 0;
border-top: 10px solid red;
border-right: 10px solid transparent;
border-left: 10px solid transparent;
border-bottom: 10px solid transparent;
}
4. JS篇
4.1 面向对象
4.2 什么是闭包？闭包的特性是什么？
闭包是能够读取其他函数内部变量的函数
要理解闭包，首先必须理解Javascript特殊的变量作用域
闭包的特性：
1.封闭性：外界无法访问闭包内部的数据，如果在闭包内声明变量，外界是无法访问的，除非闭包主动向外界提供访问接口；
2.持久性：一般的函数，调用完之后，系统会自动注销函数，而对于闭包来说，在外部函数被调用之后，闭包依然存在。
4.3 继承
4.4 DOM操作（添加、移除、移动、复制、创建和查找节点）
4.5 介绍一下new 操作符。New操作符具体干了什么？
1.创建一个空对象，并且this变量引用该对象，同时还继承了该函数的原型。
2.属性和方法被加到this引用的对象中。
3.新创建的对象由this所引用，并且最后隐式的返回this。
4.6 HTML5离线存储
4.7 JS的数据类型
基本数据类型：Number、String、Boolean、Null、 Undefined、Symbol（ES6），
引用数据类型：Object(在JS中除了基本数据类型以外都是对象)
详细请查看：typeof操作符检测变量的数据类型
4.8 null和undefined的区别
4.9 call()和apply()的区别
传参方式不同
fun.call(thisArg,arg1,arg2,arg3,...);
fun.apply(thisArg,[arg1,arg2,arg3,...])
4.10 深拷贝和浅拷贝
4.11 ajax
4.12 数组去重
4.13 this对象
4.14 eval()
1.eval的功能是把对应的字符串解析成JS代码并运行
2.应该避免使用eval，不安全，而且非常消耗性能（2次，一次是解析成js语句，一次是执行）
3.由JSON字符串转换为JSON对象的时候可以用eval()
let obj = eval('(' + str + ')');
4.15 什么是UA?
4.16 什么是事件委托？
4.17 promise
Promise 是 JavaScript 语言提供的一种标准化的异步管理方式，它的总体思想是，需要进行 io、等待或者其它异步操作的函数，不返回真实结果，而返回一个“承诺”，函数的调用方可以在合适的时机，选择等待这个承诺兑现（通过 Promise 的 then 方法的回调）。
4.18 window.onload和document.ready的区别？哪一个先执行？
一般情况一个页面响应加载的顺序是，域名解析-加载html-加载js和css-加载图片等其他信息。
window.onload是在DOM文档树加载完和所有文件加载完之后执行一个函数，也就是在页面响应加载的顺序中的“加载图片等其他信息”之后，可以操作DOM。只能执行一次，如果有多个，那么第一次的执行会被覆盖
document.ready是在DOM加载完成后就可以可以对DOM进行操作，也就是在在“加载js和css”和“加载图片等其他信息”之间，就可以操作DOM了。可以执行多次
所以，document.ready函数只需对 DOM 树的等待，而无需对图像或外部资源加载的等待，从而执行起来更快
4.19 var、let和const有什么区别
1.var定义的变量可以跨块作用域访问，不可以跨函数作用域访问。
2.let定义的变量，只能在块作用域里访问，不能跨块访问，也不能跨函数访问；不允许在相同作用域内，重复声明同一个变量。
3.const定义的常量，初始化时必须赋值，只能在块作用域里使用，不能修改。
详细请查看：var、let、const三者的区别
4.20 JavaScript 启动后，内存中有多少个对象？如何用代码来获得这些信息？
5. 前端安全问题
5.1 XSS
跨站脚本攻击（XSS）通常指的是通过利用网页开发时留下的漏洞，通过巧妙的方法注入恶意指令代码到网页，使用户加载并执行攻击者恶意制造的网页程序。
常用的XSS攻击手段和目的有：
1、盗用cookie，获取敏感信息。
2、利用植入Flash，通过crossdomain权限设置进一步获取更高权限；或者利用Java等得到类似的操作。
3、利用iframe、frame、XMLHttpRequest或上述Flash等方式，以（被攻击）用户的身份执行一些管理动作，或执行一些一般的如发微博、加好友、发私信等操作。
4、利用可被攻击的域受到其他域信任的特点，以受信任来源的身份请求一些平时不允许的操作，如进行不当的投票活动。
5、在访问量极大的一些页面上的XSS可以攻击一些小型网站，实现DDoS攻击的效果。
5.2 CSRF
跨站请求伪造（CSRF）是一种挟制用户在当前已登录的Web应用程序上执行非本意的操作的攻击方法。
攻击者盗用了你的身份，以你的名义发送恶意请求，对服务器来说这个请求是完全合法的，但是却完成了攻击者所期望的一个操作，比如以你的名义发送邮件、发消息，盗取你的账号，添加系统管理员，甚至于购买商品、虚拟货币转账等。
防御CSRF攻击：
目前防御 CSRF 攻击主要有三种策略：验证 HTTP Referer 字段；在请求地址中添加 token 并验证；在 HTTP 头中自定义属性并验证。
跟跨网站脚本（XSS）相比，XSS 利用的是用户对指定网站的信任，CSRF 利用的是网站对用户网页浏览器的信任。
6. 跨域
6.1 什么是跨域？
6.2 什么是同源策略？
6.3 解决跨域的方法有哪些？
7. 性能优化
7.1 你都用过那种性能优化的方法？
1.尽可能的减少http请求
使用CSS Sprites；JS、CSS源码压缩；图片大小控制合适；启用Gzip压缩，CDN托管，data缓存；图片服务器
2.避免在CSS中使用 Expression
Expression（css表达式)又称Dynamic properties(动态属性)
3.添加expire/Cache-Control头
4.少用全局变量、缓存DOM节点查找的结果。减少IO读取操作。
5.图片预加载，将样式表放在顶部，将脚本放在底部，加上时间戳。
6.当需要设置的样式很多时设置className而不是直接操作style。
7.用innerHTML代替DOM操作，减少DOM操作次数，优化javascript性能。
8.前端模板 JS+数据，减少由于HTML标签导致的带宽浪费，前端用变量保存AJAX请求结果，每次操作本地变量，不用请求，减少请求次数
7.2 CSS Sprite是什么，谈谈这个技术的优缺点
8. Vue篇
9.React篇
什么是Hook?
Hook 是一些可以让你在函数组件里“钩入” React state 及生命周期等特性的函数。
为什么在 React 中加入 Hook?
1.在无需修改组件结构的情况下复用状态逻辑
2.Hook 将组件中相互关联的部分拆分成更小的函数（比如设置订阅或请求数据），而并非强制按照生命周期划分
3.在非 class 的情况下可以使用更多的 React 特性
紧跟潮流
大前端和全栈是以后前端的一个趋势，懂后端的前端，懂各端的前端更加具有竞争力，以后可以往这个方向靠拢。
这边整理了一个对标“阿里 50W”年薪企业高级前端工程师成长路线，由于图片太大仅展示一小部分
