前端进阶基础一

1. http状态码 内容出处

• 以 2xx 为开头的都表示请求成功响应.

状态码	含义
200	请求成功
204	请求处理成功，但是没有资源可以返回
206	对资源某一部分进行响应，由Content-Range 指定范围的实体内容。

• 以 3xx 为开头的都表示需要进行附加操作以完成请求

状态码	含义
301	永久性重定向，该状态码表示请求的资源已经重新分配 URI，以后应该使用资源现有的 URI
302	临时性重定向。该状态码表示请求的资源已被分配了新的 URI，希望用户（本次）能使用新的 URI 访问。
303	该状态码表示由于请求对应的资源存在着另一个 URI，应使用 GET 方法定向获取请求的资源。
304	该状态码表示客户端发送附带条件的请求时，服务器端允许请求访问资源，但未满足条件的情况。
307	临时重定向。该状态码与 302 Found 有着相同的含义。

• 以 4xx 的响应结果表明客户端是发生错误的原因所在。

状态码	含义
400	该状态码表示请求报文中存在语法错误。当错误发生时，需修改请求的内容后再次发送请求。
401	该状态码表示发送的请求需要有通过 HTTP 认证（BASIC 认证、DIGEST 认证）的认证信息。
403	该状态码表明对请求资源的访问被服务器拒绝了。
404	该状态码表明服务器上无法找到请求的资源。

• 以 5xx 为开头的响应标头都表示服务器本身发生错误

状态码	含义
500	该状态码表明服务器端在执行请求时发生了错误。
503	该状态码表明服务器暂时处于超负载或正在进行停机维护，现在无法处理请求。

2.link和@import的区别

1、link是html的标签，不仅可以加载css还可以定义Rss , rel连接属性；@import是css的语法规则，只能引入样式；
2、加载页面时，link是同时加载的，@impor是页面加载完后才加载
3、link没有兼容性的问题，而@import只在较高版本的浏览器才可以识别（IE5以上）
4、link可以通过js插入操作dom，@import 不可以！

3.json和xml数据的区别 内容出处

1、数据体积方面：xml是重量级的，json是轻量级的，传递的速度更快些。
2、数据传输方面：xml在传输过程中比较占带宽，json占带宽少，易于压缩。
3、数据交互方面：json与javascript的交互更加方便，更容易解析处理，更好的进行数据交互。
4、数据描述方面：json对数据的描述性比xml较差。
5、xml和json都用在项目交互下，xml多用于做配置文件，json用于数据交互。

4. http和https的区别 内容出处

Http：超文本传输协议（Http，HyperText Transfer Protocol)是互联网上应用最为广泛的一种网络协议。设计Http最初的目的是为了提供一种发布和接收HTML页面的方法。它可以使浏览器更加高效。Http协议是以明文方式发送信息的，如果黑客截取了Web浏览器和服务器之间的传输报文，就可以直接获得其中的信息。

Https：是以安全为目标的Http通道，是Http的安全版。Https的安全基础是SSL。SSL协议位于TCP/IP协议与各种应用层协议之间，为数据通讯提供安全支持。SSL协议可分为两层：SSL记录协议（SSL Record Protocol），它建立在可靠的传输协议（如TCP）之上，为高层协议提供数据封装、压缩、加密等基本功能的支持。SSL握手协议（SSL Handshake Protocol），它建立在SSL记录协议之上，用于在实际的数据传输开始前，通讯双方进行身份认证、协商加密算法、交换加密密钥等。

HTTP与HTTPS的区别

1、HTTP是超文本传输协议，信息是明文传输，HTTPS是具有安全性的SSL加密传输协议。

2、HTTPS协议需要ca申请证书，一般免费证书少，因而需要一定费用。

3、HTTP和HTTPS使用的是完全不同的连接方式，用的端口也不一样。前者是80，后者是443。

4、HTTP连接是无状态的，HTTPS协议是由SSL+HTTP协议构建的可进行加密传输、身份认证的网络协议，安全性高于HTTP协议。

https的优点

尽管HTTPS并非绝对安全，掌握根证书的机构、掌握加密算法的组织同样可以进行中间人形式的攻击，但HTTPS仍是现行架构下最安全的解决方案，主要有以下几个好处：

1）使用HTTPS协议可认证用户和服务器，确保数据发送到正确的客户机和服务器；

2）HTTPS协议是由SSL+HTTP协议构建的可进行加密传输、身份认证的网络协议，要比http协议安全，可防止数据在传输过程中不被窃取、改变，确保数据的完整性。

3）HTTPS是现行架构下最安全的解决方案，虽然不是绝对安全，但它大幅增加了中间人攻击的成本。

4）谷歌曾在2014年8月份调整搜索引擎算法，并称“比起同等HTTP网站，采用HTTPS加密的网站在搜索结果中的排名将会更高”。

Https的缺点

1）Https协议握手阶段比较费时，会使页面的加载时间延长近。

2）Https连接缓存不如Http高效，会增加数据开销，甚至已有的安全措施也会因此而受到影响；

3）SSL证书通常需要绑定IP，不能在同一IP上绑定多个域名，IPv4资源不可能支撑这个消耗。

4）Https协议的加密范围也比较有限。最关键的，SSL证书的信用链体系并不安全，特别是在某些国家可以控制CA根证书的情况下，中间人攻击一样可行。

5. URL和URI有什么区别？

URI是统一资源标识符，相当于一个人身份证号码
Web上可用的每种资源如HTML文档、图像、视频片段、程序等都是一个来URI来定位的
URI一般由三部组成
①访问资源的命名机制
②存放资源的主机名
③资源自身的名称，由路径表示，着重强调于资源。

URL 是统一资源定位符，相当于一个人的家庭住址
URL是Internet上用来描述信息资源的字符串，主要用在各种WWW客户程序和服务器程序上，特别是著名的Mosaic。采用URL可以用一种统一的格式来描述各种信息资源，包括文件、服务器的地址和目录等。
URL一般由三部组成
①协议(或称为服务方式)
②存有该资源的主机IP地址(有时也包括端口号)
③主机资源的具体地址。如目录和文件名等

6.一个页面从输入 URL 到页面加载显示完成，这个过程中都发生了什么？ 内容出处

1.浏览器根据请求的URL交给DNS域名解析，找到真实IP；
2.浏览器根据 IP 地址向服务器发起 TCP 连接，与浏览器建立 TCP 三次握手
    a.客户端向服务器发送一个建立连接的请求
    b.服务器接到请求后发送同意连接的信号
    c.客户端接到同意连接的信号后，再次向服务器发送了确认信号，然后客户端与服务器的连接建立成功
3.浏览器发送HTTP请求
浏览器根据 URL 内容生成 HTTP 请求，请求中包含请求文件的位置、请求文件的方式等等；
4.服务器处理请求并返回HTTP报文（HTTP响应报文也是由三部分组成: 状态码, 响应报头和响应报文。）：
    a.服务器接到请求后，会根据 HTTP 请求中的内容来决定如何获取相应的 HTML 文件；
    b.服务器将得到的 HTML 文件发送给浏览器；
    c.在浏览器还没有完全接收 HTML 文件时便开始渲染、显示网页；
    d在执行 HTML 中代码时，根据需要，浏览器会继续请求图片、CSS、JavsScript等文件，过程同请求 HTML 。
5.断开连接

7.HTML5有哪些新特性？

1. 语义化标签
   语义化标签使得页面的内容结构化，见名知义

标签	描述
<header></header>	定义了文档的头部区域
<footer></footer>	定义了文档的尾部区域
<nav></nav>	定义文档的导航
<section></section>	定义文档中的节（section、区段）
<article></article>	定义页面独立的内容区域
<aside></aside>	定义页面的侧边栏内容
<detailes></detailes>	用于描述文档或文档某个部分的细节
<summary></summary>	标签包含 details 元素的标题
<dialog></dialog>	定义对话框，比如提示框

2. 增强型表单
   新增表单 Input 输入类型。这些新特性提供了更好的输入控制和验证。

输入类型	描述
color	主要用于选取颜色
date	从一个日期选择器选择一个日期
datetime	选择一个日期（UTC 时间）
datetime-local	选择一个日期和时间 (无时区)
email	包含 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 属性。规定 元素中可选择多个值。

3. 新增 视频 和 音频 标签

视频<video></video>
音频<audio></audio>

4. Canvas绘图
5. SVG绘图
6. 地理定位
7. 拖放API
8. Web Worker
9. Web Storage
10. WebSocket

8.ajax请求时get和post的区别？

get：从服务器上获取数据，传送数据量小，安全性低，请求会被缓存，缓存是针对URL进行缓存的，get请求参数直接加在URL地址后面，一种参数组合就会产生一种URL的缓存，重复的请求结果是相同的；

post：向服务器发送数据；传送数据量大，请求不会被缓存，参数封装在二进制的数据体中，服务器也不会记录参数，相对安全，所以涉及用户隐私的数据都要用post传送；

9.雅虎性能优化的十四条规则 内容出处

1. 减少http请求次数
   如何减少http请求次数：

• 组合页面中的图片到单个文件中，并使用css的background-image和background-position属性来实现所需部分的图片；
• 组合多个脚本文件到单一文件中。意思就是：把页面中的多个css 或js文件合并在一个文件中。

减少http请求次数是性能优化的起点！对提高首次访问效率起到很重要的作用。

2. 使用cdn（Content Delivery Network,内容分发网络）

这条可以忽略之。。。。

3. 增加expires header
   浏览器（和代理）使用缓存来减少http请求次数和大小，使得网页加速装载。
   如何增加expires header

• 如果是apache，可以使用expiresDefault基于当期日期来设置过期日期。
• 记住：如果使用超长的过期时间，则当内容改变时，必须改变文件名称。
• 版本号内嵌在文件名中，如：useless_1.0.0.js.

4. 压缩页面元素

• 压缩http响应内容可以减少页面响应时间，同时，对尽量度的文件类型进行压缩是一种减少页面大小和提高用户体验的简便方法。
• 通过Accept-Encoding头来表明支持的压缩类型，如：Accept-Encoding: gzip,deflate
• PS:这个可以忽略，因为一般浏览器都支持gzip之类压缩，然后服务端前端这边不用管。

5. 把样式表放在头上

把样式表移到head中，可以提高界面的加载速度，因此这使得页面元素可以顺序显示。
原因： 避免空白屏幕或闪烁的问题。

6. 把脚本文件放在底部

尽量把脚本文件放在页面底部，好处就是，一能顺序显示，二可达到最大的并行下载。

7. 避免css表达式

• css表达式是强大的（同时也是危险的）用于动态设置css属性的方式。ie，从版本5开始支持css表达式。
• 所谓的表达式是，看例子：
• expression((new Date()).getHours()%2?"#B8D4FF":"#F08A00"),即背景色每个小时切换一次。
• ps：一般很少用css表达式

8. 把js和css放到外部文件中

• 使用外部文件会加快页面显示速度，因为外部文件会被浏览器缓存。
• 内置的js和css在页面中虽然会减少http请求次数，但是增大了页面的大小。
• 使用外部文件，会被浏览器缓存，则页面大小会减小，同时又不增加http请求次数。

9. 减少DNS查询次数

这个不说明，了解下，这主要是服务端的优化

10. 最小化js代码

• 最小化js代码是指在js代码中删除不必要的字符，从而降低下载时间。
• ps:其实就是压缩js。

11. 避免重定向
    重定向功能是通过301和302这两个http状态码完成的，如：

• HTTP/1.1 301 Moved Permanently
• Location:http://example.com/newuri
• Content-Type:text/html
• ps：没用过这个

12. 删除重复的脚本文件

在一个页面中包含重复的js脚本会影响性能，即它会建立不必要的http请求和额外的js执行。

13. 配置etags

忽略吧。。。。

14. 缓存ajax

提高ajax的性能最重要的方式是使得其response可缓存。

学习链接如下：

• https://developer.yahoo.com/performance/rules.html
• http://3y.uu456.com/bp-58a2922f647d27284b73512a-2.html
• http://fex.baidu.com/blog/2014/03/fis-optimize/

15.Math.min()比Math.max()大
参考如下代码：

var min = Math.min();
var max = Math.max();
console.log(min < max);

运行结果为：false
原因如下：

因为Math.min() 返回 Infinity, 而 Math.max()返回 -Infinity。
Infinity是 javascript 中全局对象的一个属性，在浏览器环境中就是

16.数组的push()、pop()、shift()和unshift()

1. push()方法

该方法是向数组末尾添加一个或者多个元素，并返回新的长度。

2. pop()方法

pop()方法刚好和push()方法相反。pop()方法删除数组的最后一个元素，把数组的长度减1，并且返回它被删除元素的值，如果数组变为空，则该方法不改变数组，返回undefine值。

3. unshift()方法

unshift()方法是向数组的开头添加一个或多个元素，并且返回新的长度。

4. shift()方法

shift()方法和unshift()方法恰恰相反。该方法用于把数组的第一个元素从其中删除，并返回被删除的值。如果数组是空的，shift()方法将不进行任何操作，返回undefined的值。