前端必备HTTP技能面试前端面试常见知识点集合

HTML及HTTP面试笔试题

2017-08-02  本文已影响1400人  yozosann
前言：

本人17年应届毕业生，已入职，刚入职没有太多事情于是整理了一下过去面试的笔记。很多人觉得前端不需要或者不会被面试到网络的部分就跳过了，曾经我也是这样，后来发现就算一些细小的点都会被问到，这里的题一是源自被问过，二是自我收集，一道一道看完肯定没有坏处。也祝大家拿到心仪的offer。

系列文章：

CSS面试笔试题
JavaScript面试笔试题

HTML一些常考代码：

FE-interview-questions，满意点个star。

HTML前端面试（包含网络）

1. 对web标准的理解是什么？

首先是html标签上，标签闭合，标签小写，不乱嵌套；使用语义化标签，例如header，article，少用<b></b>这样没有语义的标签，以提高搜索几率；使用外部的css文件及js文件，使结构表现行为分离；减少文件数目，达到减少网络请求次数，文件下载与页面速度更流畅；内容能被更多的用户及设备访问，保证在版本较低的浏览器下能够呈现完整内容，在版本高的浏览器上能够展现更完美的视觉效果；代码低耦合高内聚，易维护。

2. HTTP状态码及其含义？

3. 一级域名？二级域名是指什么？

4. 浏览器解析url过程？

为什么非要三次握手 ？若只有两次握手，假如客户端发送了一个报文因为时延，久久没有送到服务器端，故客户端也没有收到来自服务器端的确认，就把这次报文认定为“已失效的报文”，并且会再次发送一次报文。但是如果认定失效之后，失效报文正好通过阻塞送到了服务器，因为只有两次握手，那么连接就建立了起来，但是这个连接是错误的，因为正确的报文已经重新发出了。如果三次握手的话，那么在服务器接受到失效报文再返回给客户端确认时，由于客户端校验ack不正确，可以不用理会那个由于失效报文建立起的连接。

讲了三次握手，这里也说下四次握手，与解析url无关

image
  • 客户端发送FIN=1（表示结束），并发送随机码seq=u
  • 服务器端返回一个ACK=1（表示确认），并返回ack=u + 1，且也发生一个随机码seq=v
  • 服务器再发出一个一个FIN=1，和seq=w，且重复发送上次内容
  • 客户端返回一个ACK=1，然后返回随机码等于上次随机码加一seq=u+1，再返回ack=w+1
  • 服务器端收到后结束连接，客户端也结束连接。

为什么非要四次握手？
因为当客户端没有东西发送给服务器了，就会发送FIN报文，但是服务器端收到FIN报文后未必就会马上关闭socket，因为有可能服务器端还有一些信息要发送给客户端，但是还没有发完。服务器发送FIN报文和客户端分开的，于是就有了四次握手。

为什么TIME_WAIT状态还需要等2MSL后才能返回到CLOSED状态？
并不能保证客户端最后返回的ACK能正确送达，若未正确送达，在2MSL内，服务器还会重发FIN报文。

5 .你所知道的HTTP请求方法？

6.iframe的使用场景有哪些？

7. 什么是置换元素？置换元素有哪些？

8. HTTP请求格式

下面是一个HTTP请求的数据：

POST /index.php HTTP/1.1
Host: localhost
User-Agent: Mozilla/5.0 (Windows NT 5.1; rv:10.0.2) Gecko/20100101 Firefox/10.0.2
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8
Accept-Language: zh-cn,zh;q=0.5
Accept-Encoding: gzip, deflate
Connection: keep-alive
Referer: <a target=_blank href="http://localhost/" style="color: rgb(51, 102, 153); text-decoration: none;">http://localhost/</a>
Content-Length：25
Content-Type：application/x-www-form-urlencoded
 
username=aa&password=1234

请求的第一行是： 方法 URL 协议/版本（POST /index.php HTTP/1.1）

  1. Transport 头域
    • Connection：表示是否需要持久连接（长连接）。如果服务器看到这里的值是"Keep-Alive"，或者看到请求用的是HTTP1.1（默认持久连接），他就可以利用持久连接的优点。
    • Host：用于指定被请求资源的Internet主机号和端口号，通常从HTTP URL中提取出来。（例如: Host: localhost 这里缺省端口号80，若指定了端口号8080，则为 Host: localhost:8080）
  2. Client 头域
    • Accept：浏览器可以接受的媒体类型。例如：Accept: text/html ，代表能够接受html，如果服务器无法返回指定类型则返回406。通配符 * 代表任意类型。Accept: * / * 代表浏览器可以处理所有类型，(一般浏览器发给服务器都是发这个)
    • Accept-Encoding：浏览器申明自己接收的编码方式，通常指定是否支持压缩，支持什么压缩方法。例如： Accept-Encoding: gzip, deflate。Server能够向支持gzip/deflate的浏览器返回经gzip或者deflate编码的HTML页面。 许多情形下这可以减少5到10倍的下载时间，也节省带宽。
    • Accept-Language：申明自己接收的语言。例如： Accept-Language:zh-cn。没有设置表示可以接收任何语言。
    • User-Agent：告诉服务器，客户端使用的操作系统和浏览器的名称和版本。例如：User-Agent: Mozilla/5.0 (Windows NT 5.1; rv:10.0.2) Gecko/20100101 Firefox/10.0.2
    • Accept-Charset：申明浏览器接收的字符集，如gb2312，utf-8。
  3. Cookie/Login 头域
    • Cookie：最重要的header，将cookie的值发送给HTTP服务器。
  4. Entity头域
    • Content-Length：发送给服务器数据的长度。
    • Content-Type：发送给服务器数据的类型。例如：Content-Type：application/x-www-form-urlencoded
  5. Miscellaneous 头域
    • Referer：告诉服务器我是从哪个页面链接过来的。比如从我主页上链接到一个朋友那里，他的服务器就能够从HTTP Referer中统计出每天有多少用户点击我主页上的链接访问他的网站。例如：Referer: <a target=_blank href="http://localhost/" style="color: rgb(51, 102, 153); text-decoration: none;">http://localhost/</a>
  6. Cache 头域
    • If-Modified-Since：把浏览器缓存的页面的最后修改时间给服务器发送过去，服务器对比实际文件的最后修改时间。如果时间一致，那么返回304例如：If-Modified-Since: Thu, 09 Feb 2012 09:07:57 GMT。
    • If-None-Match：和Etag一起工作，工作原理是在HTTP response中添加Etag信息。当用户再次请求该资源时，将HTTP response中加入If-None-Match信息。如果服务器验证资源的ETag没有改变（该资源没有更新），将返回一个304状态告诉客户端使用本地缓存文件。否则将返回200状态和新的资源和Etag. 使用这样的机制将提高网站的性能。例如: If-None-Match: "03f2b33c0bfcc1:0"
    • Pragma：作用： 防止页面被缓存， 在HTTP/1.1版本中，它和Cache-Control:no-cache作用一模一样
      Pargma只有一个用法， 例如： Pragma: no-cache
      注意: 在HTTP/1.0版本中，只实现了Pragema:no-cache, 没有实现Cache-Control。
    • Cache-Control：非常重要！！，用来指定Response-Request遵循的缓存机制。
//
        Cache-Control：Public 可以被任何缓存所缓存。
        Cache-Control: Private     内容只缓存到私有缓存中。
        Cache-Control: no-cache  所有内容都不会被缓存。

9. HTTP响应格式

在接收和解释请求后，服务器会返回一个HTTP响应消息。与HTTP请求类似，HTTP响应也分为三个部分，状态行，信息报头和响应正文，如：

HTTP/1.1 200 OK
Date: Sun, 17 Mar 2013 08:12:54 GMT
Server: Apache/2.2.8 (Win32) PHP/5.2.5
X-Powered-By: PHP/5.2.5
Set-Cookie: PHPSESSID=c0huq7pdkmm5gg6osoe3mgjmm3; path=/
Expires: Thu, 19 Nov 1981 08:52:00 GMT
Cache-Control: no-store, no-cache, must-revalidate, post-check=0, pre-check=0
Pragma: no-cache
Content-Length: 4393
Keep-Alive: timeout=5, max=100
Connection: Keep-Alive
Content-Type: text/html; charset=utf-8</p><p>
<html>
<head>
<title>HTTP响应示例<title>
</head>
<body>
Hello HTTP!
</body>
</html></p><p> </p>

状态行由协议版本，数字形式的状态代码，及状态描述组成，各元素以空格分开，结尾时换行符，格式如下：

HTTP-Version 表示服务器 HTTP 协议的版本，Status-Code 表示服务器发回的响应代码，Reason-Phrase 表示状态代码的文本描述，CRLF 表示回车换行。例如 HTTP/1.1 200 OK（CRLF）

常见状态代码、状态描述、说明：

200 OK      //客户端请求成功
400 Bad Request  //客户端请求有语法错误，不能被服务器所理解
401 Unauthorized //请求未经授权，这个状态代码必须和WWW-Authenticate报头域一起使用 
403 Forbidden  //服务器收到请求，但是拒绝提供服务
404 Not Found  //请求资源不存在，eg：输入了错误的URL
500 Internal Server Error //服务器发生不可预期的错误
503 Server Unavailable  //服务器当前不能处理客户端的请求，一段时间后可能恢复正常

<html>  
<head>  
<title>HTTP响应示例<title>  
</head>  
<body>  
Hello HTTP!  
</body>  
</html>
  1. Cache域
    • Date：生成消息的具体时间和日期
      例如： Date: Sun, 17 Mar 2013 08:12:54 GMT
    • Expries：声明了一个网页或url地址不再被浏览器缓存的时间，一旦超过了这个时间，浏览器都应该联系原始服务器。（要注意的是，HTTP/1.0有一个功能比较弱的缓存控制机制：Pragma，使用HTTP/1.0的缓存将忽略Expires和Cache-Control头。）
      例如: Expires: Thu, 19 Nov 1981 08:52:00 GMT
    • Vary：用于列出一个响应字段列表，告诉缓存服务器遇到同一个 URL 对应着不同版本文档的情况时，如何缓存和筛选合适的版本。例如：Accept-Encoding
  2. Cookie/Login头域
    • P3P：用于跨域设置Cookie，这样可以解决iframe跨域访问cookie的问题。例如：P3P: CP=CURa ADMa DEVa PSAo PSDo OUR BUS UNI PUR INT DEM STA PRE COM NAV OTC NOI DSP COR
    • Set-Cookie：非常重要，用于把Cookie发送到客户端，每写入一个cookie都会生成一个Set-Cookie。例如: Set-Cookie: PHPSESSID=c0huq7pdkmm5gg6osoe3mgjmm3; path=/
  3. Entity头域
    • ETag：和If-None-Match 配合使用。例如：ETag: "03f2b33c0bfcc1:0"
    • Last-Modified：用于指示资源的最后修改日期和时间。例如：Last-Modified: Wed, 21 Dec 2011 09:09:10 GMT
    • Content-Type：服务器告诉浏览器自己响应的对象的类型和字体符。Content-Type:text/html;charset=GB2312
    • Content-Length：指明实体正文的长度，以字节存储方式十进制数表示。例如：Content-Length: 19847
    • Content-Encoding：文档的编码方式，一般指压缩方式。利用gizp压缩文档能够显著地减少HTML的下载时间。例如：Content-Encoding：gzip
    • Content-Language：服务器告诉浏览器自己响应的对象的语言。例如：Content-Language:da
  4. Miscellaneous 头域
    • Server：指明HTTP服务器软件信息。例如:Apache/2.2.8 (Win32) PHP/5.2.5
    • X-Powered-By：表示服务器是用什么技术开发的。例如：X-Powered-By: PHP/5.2.5
  5. Transport 头域
    • Connection：和请求报头一样，是否开启长连接。
  6. Location 头域
    • Location：用于重定向一个新的位置，包含新的URL地址。

10. HTTP长连接和短连接有什么区别？

Connection:keep-alive

在使用长连接的情况下，当一个网页打开后，客户端和服务器之间用于传输HTTP数据的TCP不会关闭，如果客户端再次访问这个服务器上的页面，会继续使用这条已经建立的连接。

11. 如何理解HTTP是无状态的？

无状态是HTTP协议的一个特点，就是指协议对事务没有记忆功能，也就是说，我和服务器连续会话两次，这两次会话没有任何联系，完全不会记录任何信息。

12. HTTP和HTTPS有什么区别？

13. HTTP1.0和HTTP1.1的区别？

14. 进程与线程的区别？

阮一峰：进程与线程的一个简单解释

15. TCP与UDP的区别？

16. 如何提高网站的加载速度？

var fragment = createDocumentFragment();

for(var i = 0; i < 10; i++ ){
    var spanNode = document.createElement("span");
    spanNode.innerHTML = "number:" + i;
    fragment.appendChild(spanNode);
}

//add this DOM to body
document.body.appendChild(fragment);

// bad
var left = 10;
var top = 10;
el.style.left = left + "px";
el.style.top  = top  + "px";

// good 
el.className += " theclassname";

// good
el.style.cssText += "; left: " + left + "px; top: " + top + "px;";

        const square = document.getElementsByClassName('move')[0];
        let progress = 0
        let left = square.style.left;
        let index = left.indexOf('p');
        left = Math.floor(left.slice(0, index));

        function move() {
            square.style.left = ++left + 'px';
            progress++
            if (progress < 500) {
                window.requestAnimationFrame(move);
            }
        }
        move();

17.网页的生成过程

18.什么是重排和重绘？

以下三种情况，会导致网页重新渲染

重新渲染，就需要重新生成布局和重新绘制。
前者就叫重排，后者就叫做重绘。

19. 页面的性能指标详解：

20. web表单登录中用到的图形验证码的实现

21. 在使用table表现数据时，有时候表现出来的会比自己实际设置的宽度要宽，为此需要设置下面哪些属性值？

image
image

22. 各种浏览器的内核是什么？

23.下列代码是否合法？

<figure>
    ![](myimage.jpg)
    <figcaption>
        <p>This is my self portrait.</p>
    </figcaption>
</figure>

合法，figure标签规定独立的流内容（图片，图表，照片，代码等等）。figure元素应该与主内容有关，但如果被删除，不对文档流产生影响，<figcaption> 元素为 figure 添加标题（caption）。

24. scope属性有什么用？

<article>
    <h1>Hello World</h1>
    <style scoped>
        p {
            color: #FF0;
        }
    </style>
    <p>This is my text</p>
</article>

<article>
    <h1>This is awesome</h1>
    <p>I am some other text</p>
</article>

scoped属性是一个布尔值，如果使用该属性，则样式仅仅用在父元素及其子元素。

25. 用于预格式化的标签是？

26. HTML5 新的表单元素：

<datalist id="url_list">
<option label="W3School" value="http://www.W3School.com.cn" />
<option label="Google" value="http://www.google.com" />
<option label="Microsoft" value="http://www.microsoft.com" />
</datalist>

option表示选项。如果需要把datalist绑定到输入域，则用datalist的id。option永远都要设置value属性。

Webpage: <input type="url" list="url_list" name="link" />

<form action="demo_form.asp" method="get">
Username: <input type="text" name="usr_name" />
Encryption: <keygen name="security" />
<input type="submit" />
</form>

<output id="result" onforminput="resCalc()"></output>

27. HTML5有哪些新的输入类型？

Date: <input type="date" name="user_date" />
type = month, week, time, datetime, datetime-local

28. localStorage和sessionStorage的API

29. 表格？

<table>
<tr><th></th></tr>
<tr><td></td></tr>
<tr><td></td></tr>
</table>

30. 如何规定页面加载使某个元素自动获取焦点：

<input autofocus>

31. HTML5获得地理位置：

// 获取用户当前位置
void getCurrentPosition(onSuccess,onError,options);
// 持续获取用户当前位置
int watchCurrentPosition(onSuccess,onError,options);
// 取消监控
void clearWatch(id) // id 为watchCurrentPosition返回的ID

options = {
     enableHighAccuracy,　　　//boolean 是否要求高精度的地理信息
     timeout,　　　　　　　　　//表示等待响应的最大时间，默认是0毫秒，表示无穷时间
     maximumAge　　　　　　　　//应用程序的缓存时间
}

32. 表单的enctype属性：

33.不同的字符编码：

34. 位图和矢量图的区别？

35. HTML常常应用的几种图片格式及其区别？

36. HTML全局属性：

<p contextmenu="supermenu">本段落拥有一个名为 "supermenu" 的上下文菜单。这个菜单会在用户右键单击该段落时出现。</p>  

<menu id="supermenu">
  <command label="Step 1: Write Tutorial" onclick="doSomething()">
  <command label="Step 2: Edit Tutorial" onclick="doSomethingElse()">
</menu>

<div id="user" data-id="1234567890" data-name="愚人码头" data-date-of-birth>码头</div>

var el = document.querySelector('#user');
console.log(el.id); // 'user'
console.log(el.dataset);//一个DOMStringMap
console.log(el.dataset.id); // '1234567890'
console.log(el.dataset.name); // '愚人码头'

<div tabindex=-1></div>

35. 如何定义可以在网页上通过链接直接打开邮件客户端发送邮件？（mailto:）

<a href="mailto:xiao@163.com"></a>

36. src和href的区别？

37. link和@import的区别？

38. 短语元素有哪些？

39. http和webSocket的区别？

40.mete的作用及用法

41. 状态码302和301的区别？

假如a的地址很短，更加用户友好，但是他做了一个302重定向到b，b的网址是一个乱七八糟的很长的url网址，然后由于浏览器并不能总是抓取目标地址，很自然的，a 网址更加用户友好，而b 网址既难看，又不用户友好。这时Google 很有可能会仍然显示网址，但是内容却仍然是b上的内容，这种情况就叫做网址劫持。而301永久重定向就不会出现这样的情况。

42.

反向代理为何叫反向代理

CND是什么？使用CDN有什么优势？

上一篇下一篇

猜你喜欢

热点阅读