前端面试——HTML，HTTP, Web基础篇

一 HTML，HTTP, Web基础篇

1. h5 新特性

1.1 DOCTYPE有什么用？标准模式与混杂模式如何区分？它们有何意义？

• 告诉浏览器使用哪个版本的HTML规范来渲染文档。
• DOCTYPE不存在或形式不正确会导致HTML文档以混杂模式呈现。
• 标准模式(Standards mode) 以浏览器支持的最高标准运行；混杂模式（Quirks mode)中页面是一种比较宽松的向后兼容的方式显示。

1.2 严格模式与混杂模式的语句解析不同点有哪些

1）盒模型的高宽包含内边距padding和边框border

在W3C标准中，如果设置一个元素的宽度和高度，指的是元素内容的宽度和高度，而在IE5.5及以下的浏览器及其他版本的Quirks模式下，IE的宽度和高度还包含了padding和border。

2）可以设置行内元素的高宽

在Standards模式下，给span等行内元素设置wdith和height都不会生效，而在quirks模式下，则会生效。

3）可设置百分比的高度

在standards模式下，一个元素的高度是由其包含的内容来决定的，如果父元素没有设置高度，子元素设置一个百分比的高度是无效的。

4）用margin:0 auto设置水平居中在IE下会失效

使用margin:0 auto在standards模式下可以使元素水平居中，但在quirks模式下却会失效,quirk模式下的解决办法，用text-align属性:

body{text-align:center};#content{text-align:left}

5）quirk模式下设置图片的padding会失效

6）quirk模式下Table中的字体属性不能继承上层的设置

7）quirk模式下white-space:pre会失效

2. HTTP和HTTPS的区别

• http: 超文本传输协议，用于从www服务器传输超文本到本地浏览器的传输协议

• https: 是以安全为目标的HTTP通道，简单讲是HTTP的安全版，即HTTP下加入SSL层

• SSL (Secure Sockets Layer) : 安全套接层，由网景公司设计，1999年被标准化改名为TLS(Transport Layer Security);

• http和https的区别：

  • https协议需要CA证书，费用较高
  • http是超文本传输协议，信息是明文传输，https则是有安全性的ssl加密传输协议
  • 链接方式不同，端口也不同，http:80 https: 443

3. HTTP1.0、 HTTP1.1、 HTTP2.0之间区别

http1.0 与 http1.1 的主要区别

1. 长连接：

• HTTP 1.0需要使用keep-alive参数来告知服务器端要建立一个长连接， 而HTTP 1.1 默认支持长连接。

• HTTP是基于TCP/IP协议的, 创建一个TCP连接是需要经过三次握手的，有一定的开销，如果每次通讯都要重新建立连接的话，对性能有影响。因此最好能维持一个长连接，可以用一个长连接来发多个请求。

2. 节约带宽

• HTTP 1.1 支持只发送header信息(不带任何body信息)，如果服务器认为客户端有权限请求服务器，则返回100， 否则返回401。客户端如果接收到100，才开始把请求body发送到服务器

• 当服务器返回401的时候，客户端就可以不用发送请求body了，节约了带宽。

• 另外HTTP还支持传送内容的一部分。这样当客户端已经有一部分的资源后，只需要跟服务器请求另外的部分资源即可。这是支持文件断点续传的基础。

3. HOST域

• 现在可以用web server(例如tomat), 设置虚拟站点是非常常见的，也就是说，web server 上的多个虚拟站点可以共享同一个ip和端口

• HTTP 1.0 是没有host域的，HTTP 1.1才支持这个参数。

HTTP 1.1 与 HTTP 2.0 的主要区别

HTTP 2.0 的出现，相比于HTTP1.x, 大幅度的提升了web性能。在与HTTP 1.1 完全语义兼容的基础上，进一步减少了网络延迟。对于前端开发人员来说，无疑减少了在前端方面的优化工作

1. 多路复用

• 允许同时通过单一的 HTTP 2 连接发起多重的请求-响应消息。

  在http 1.1 协议中，浏览器客户端在同一时间针对同一域名的请求有一定的数据限制。超过限制数目的请求会被阻塞，HTTP2.2 使用了多路复用的技术，做到同一个连接并发处理多个请求。

2. 二进制分帧

http2.0 在应用层和传输层之间增加一个二进制分帧层， 改进了传输性能，实现低延迟和高吞吐量

3. 首部压缩

http 1.1 不支持header数据的压缩，HTTP 2.0使用HPACK算法对header的数据进行压缩，这样数据体积小了

4. 服务器推送

服务器推送是一种在客户端请求之前发送的机制，在HTTP 2.0中，服务器可以对客户端的一个请求发送多个响应。

4. http状态码（常用）

http://www.chajianwo.com/blog-140.html

1** ：信息，服务器收到请求，需要请求者继续执行操作

2** ：成功，操作被成功接收并处理

• 200： OK, 请求成功。一般用于GET与POST请求

3** : 重定向，需要进一步的操作以完成请求

• 301： Moved Permanently, 永久移动。请求的资源已被永久的移动到新URL,返回信息会包括新的URL, 浏览器会自动定义到新URL.今后任何的请求都用新的URL代替
• 302： Found, 临时移动。与301类似。但资源只是临时被移动。客户端应继续使用原有URL
• 304: Not Modified, 未修改。所请求的资源未修改，服务器返回此状态码时，不会返回任何资源。客户端通常会缓存访问过的资源，通过提供一个头信息指出客户端希望只返回在指定日期之后修改的资源

4** : 客户端错误， 请求包含语法错误或无法完成请求

• 401： Unauthorized, 请求要求用户的身份认证
• 403： Forbidden, 服务器理解请求用户的请求，但是拒绝执行此请求；资源没有权限访问
• 404：Not Found, 请求资源不存在

*5* ** : 服务器错误， 服务器在处理请求的过程中发生了错误

• 500： Internal Server Error,

5. get 与 post 请求的区别

GET：请求的数据随HTTP请求头发过去
POST: 请求的数据在HTTP请求头发过去之后再发过去

GET方法的数据大小是有一定限制的。而且发送的数据容易被人看到。而POST就没有这些特点

6. cookie, sessionStorage , localStorage区别

(1) cookie

• cookie是服务器发给客户端的特殊信息，cookie是以文本的方式保存在客户端，每次请求时都带上它
• cookie的缺点：
  • 大小受限
  • 用户可以操作(禁用) cookie,使功能受限
  • 安全性较低
  • 有些状态不可能保存在客户端
  • 每次访问都要传送cookie给服务器，浪费带宽
  • cookie数据有路径(path)的概念，可以限制cookie只属于某个路径下

(2) sessionStorage和localStorage

HTML5的本地存储

• sessionStorage: 将数据保存在session对象中。所谓session，是指用户在浏览某个网站时，从进入网站到浏览器关闭所经过的这段时间，也就是用户浏览这个网站所花费的时间。session对象可以用来保存在这段时间内所要求保存的任何数据。
• localStorage: 将数据保存在客户端本地的硬件设备(通常指硬盘，也可以是其他硬件设备)中，即使浏览器被关闭了，该数据仍然存在，下次打开浏览器访问网站时仍然可以继续使用。

（3）三者区别

7. 前端性能优化方法

减少http请求次数： CSS Sprites, JS、 CSS源码压缩，图片大小控制合适， 网页Gzip, CDN托管，data缓存，图片服务器

8. 浏览器输入url后发生了什么

• 根据域名，进行DNS域名解析；
• 拿到解析的IP地址，建立TCP连接；
• 向IP地址，发送HTTP请求；
• 服务器处理请求；
• 返回响应结果；
• 关闭TCP连接；
• 浏览器解析HTML；
• 浏览器布局渲染；

9. websocket

WebSocket协议是基于TCP的一种新的网络协议。它实现了浏览器与服务器全双工(full-duplex)通信——允许服务器主动发送信息给客户端

在实现websocket连线过程中，需要通过浏览器发出websocket连线请求，然后服务器发出回应，这个过程通常称为"握手"，

在websocket API，浏览器和服务器只需要做一个握手的动作，然后，浏览器和服务器 之间就形成了一条快速通道。两者之间就直接可以数据互相传送。

在此Websocket协议中，为我们实现即时服务带来了两大好处：

• 互相沟通的Header是很小的-大概只有2 Bytes
• 服务器的推送(server push) ,服务器不再被动的接收浏览器的请求之后返回数据，而是在有新数据时就主动推送给浏览器

10. 强缓存，协商缓存

11. 懒加载

懒加载——也称为延迟加载，即在需要的时候才加载(效率低，占用内存小)

12. xss攻击

跨站脚本攻击(Cross Site Scripting), 为不和层叠样式表(Cascading Style Sheets, CSS)混淆，故将跨站脚本攻击缩写为XSS。XSS是一种经常出现在web应用中的计算机安全漏洞，它允许恶意web用户将代码植入到提供给其他用户使用的页面中。比如这些代码包括HTML代码和客户端脚本。攻击者利用XSS漏洞旁路掉访问控制——例如同源策略(same origin policy).这种类型的漏洞由于被黑客用来编写危害性更大的phishing攻击而变得广为人知。对于跨站脚本攻击，黑客界共识是：跨站脚本攻击是新型的"缓冲区溢出攻击"，而JavaScript是新型的"ShellCode"

13. csrf攻击

• CSRF（Cross-site request forgery）：跨站请求伪造
• CSRF攻击：可以理解为攻击者盗用了你的身份，以你的名义发送恶意请求
• CSRF可以以你的名义发送邮件，发消息，盗取你的账号，甚至于购买商品，虚拟货币转账

14. 同源策略

同源策略，它是由Netscape提出的一个著名的安全策略，现在所有的可支持javascript的浏览器都会使用这个策略。

比如说，浏览器的tab页中分别打开了http://www.baidu.com/index.html和 http://www.google.com/index.html,其中，JavaScript1和JavaScript3是属于百度的脚本，而JavaScript2是属于谷歌的脚本，当浏览器的tab1要运行一个脚本时，便会进行同源检查，只有和www.baidu.com 同源的脚本才能被执行，所谓同源就是指域名、协议、端口号相同。所以，tab1只能执行JavaScript1和JavaScript3脚本，而JavaScript2不能执行，从而防止其他网页对本网页的非法篡改

15. cdn

CDN(Content Delivery Network)又称为内容分发网络，本意在于尽可能避免开互联网上所有可能影响数据传输速度和稳定性的瓶颈和环节，使内容传输的更快，更稳定。

主要目的：

解决因分布,带宽，服务器性能带来的访问延迟问题，适用于站点加速，点播，直播等场景。

使用户可就近取得所需内容，解决Internet网络拥挤状况，提高用户访问网站的响应速度和成功率。

缺点：

a)实施复杂，投资大。

b)目前大部分的CDN还只是对静态内容加速，对动态加速效果不是太好。而双线对动态加速的效果跟静态是一样的。