前端面试题总结（part 1）：$HTML , HTTP , web综合问题

最新推荐文章于 2023-10-27 11:28:33 发布

材女的进击

最新推荐文章于 2023-10-27 11:28:33 发布

阅读量536

点赞数

分类专栏：前端前端面试

前端同时被 2 个专栏收录

76 篇文章 2 订阅

订阅专栏

前端面试

36 篇文章 1 订阅

订阅专栏

1.前端需要注意哪些SEO（搜索引擎的优化）

合理的title、description、keywords: 搜索对这三项的权重逐个减小。title:强调重点，重要关键词出现不超过2次，而且要靠前，不同页面的title要不同；description: 高度概括页面内容，长度合适，不要过度堆砌关键词，不同页面的description要有所不同；keywords: 列举出重要关键词即可（description keywords是<meta> 标签的属性
语义化的HTML代码，符合W3C规范：语义化的代码让搜索引擎容易理解网页。
重要内容的HTML代码要放在前面，搜索引擎抓取HTML顺序是从上而下，有的搜索引擎对抓取的内容有限制，保证重要内容会被抓取。
重要内容不要用js输出：爬虫不会执行js获取内容。
非装饰性的图片必须要alt属性
少用iframe:搜索引擎不会抓取iframe中的内容
提高网站速度：网站速度是搜索引擎排序的一个重要指标

2.web开发中会话跟踪的方法

Cookie通过在客户端记录信息确定用户身份。cookie在客户端由浏览器来管理。cookie不可跨域名。

cookie是一小段文本信息。客户端访问服务端，如果服务器需要记录该用户的状态，就response给客户端一个cookie。客户端会把cookie保存下来。当客户端浏览器再次请求该服务器的时候，浏览器会把请求连同cookie一起交给服务器，服务器检查cookie，以此来辨认该用户的cookie。服务器也可以根据需要更改cookie的内容。

session

Session通过在服务器端记录信息确定用户身份。session的致命弱点是不容易在多态服务器之间共享。session存放在服务器端的内存中。session在用户第一次访问服务器的时候自动创建。需要注意的是只有访问servlet、JSP等程序的时候才会创建session，只访问HTML、image等静态资源的时候并不会创建session。session有个超时时间的设置，如果超过了超时时间没访问服务器，session会自动失效。

url重写

URL地址重写是对客户端不支持cookie的解决方案。URL地址重写的原理是将该用户session的id信息重写到URL地址中。服务器能够解析重写后的url获取session的ID。这样即使客户端不支持cookie，也可以使用session来记录用户状态。

隐藏input

是一种最简单的方式，将字段隐藏在HTML表单中，但不在客户端显示。比如在第一张页面中输入用户名和密码登陆，服务器生成响应返回第二张页面。当第二张页面提交时可能仍然需要知道来自第一张页面中的用户名。

ip地址

3. doctype是什么，举例常见的doctype及特点

<!doctype>声明位于HTML文档的头部，在<html>标签之前，html5中不区分大小写
<!doctype>声明不是一个标签，是告诉浏览器当前html版本的指令
现代浏览器的html布局引擎通过检查doctype决定使用兼容模式还是标准模式对文档进行渲染，一些浏览器有一个接近标准模型。
HTML 5：<!doctype html>

  HTML5 不基于 SGML，因此不需要对DTD进行引用，但是需要doctype来规范浏览器的行为（让浏览器按照它们应该的方式来运行）；

   而HTML4.01基于SGML,所以需要对DTD进行引用，才能告知浏览器文档所使用的文档类型。

4.HTML全局属性（global attitude）有哪些？

参考资料：MDN: html global attribute或者W3C HTML global-attributes

accesskey:设置快捷键，提供快速访问元素
class:为元素设置类标识
id:元素id,文档内唯一
title：元素相关的建议信息
lang:元素内容的语言
style：行内css样式
translate：元素和子孙节点内容是否需要本地化
hidden：样式上会导致元素不显示，但是不能用这个属性实现样式效果
dir:设置元素文本方向
draggable:元素是否可拖拽

5. 什么是web语义化，有什么好处？

web语义化是指通过HTML标记显示页面包含的信息，包含了HTML标签的语义化和css命名的语义化。html语义化是指：通过使用包含语义的标签恰当的表示文档结构；CSS语义化是指：为html添加有意义的class，id补充为表达的语义。

好处：

去掉样式后页面还能呈现清晰的结构
盲人使用读屏器更好的阅读
搜索引擎能够更好的理解页面，有利于收录‘
便于团队项目的维护

6.HTTP method

一台服务器要与HTTP1.1兼容，只要为资源实现GET和HEAD方法即可。
GET最常用，用于请求服务器发送某个资源
HEAD和GET类似，但服务器在响应中只返回首部，不会返回实体的主体部分
PUT让服务器用请求的主体部分来创建一个由请求的URL命名的新文档，或者，如果那个URL已经存在的话，就用这个主题替代它
POST用来向服务器输入数据。通常用POST将表单中填好的数据发送给服务器。
TRACE会在目的服务器端发起一个环回诊断，最后一站的服务器会弹回一个TRACE响应并在响应的主体中带有收到的原始请求报文。TRACE方法主要用于诊断，用于验证请求是否如愿穿过了请求/响应链
OPTIONS方法请求web服务器告知其支持的各种功能。可以查询服务器支持哪些方法或者对某些特殊资源支持哪些方法。
DELETE请求服务器删除请求URL指定的资源

7.从浏览器地址栏输入url到显示页面的步骤(以HTTP为例)

浏览器地址栏输入URL
浏览器查看缓存，如果请求资源在缓存中并且新鲜，跳转到转码步骤
浏览器解析URL获取协议，主机，端口，path
浏览器组装一个http（get）请求的报文
浏览器获取主机ip地址，过程如下：
打开一个socket与目标ip地址，端口建立tcp链接，三次握手：
tcp链接建立后发送http请求
服务器接收请求并解析，将请求转发到服务程序。
服务器检查http请求头是否包含缓存验证信息，如果验证缓存新鲜，返回304等对应状态码
处理程序读取完整请求并准备http响应
服务器将响应报文通过tcp链接发送给客户端浏览器
浏览器接收http响应，然后根据情况选择关闭TCP链接或者保留重用，关闭tcp链接的四次握手：
浏览器查看响应状态码：是否为1XX，3XX， 4XX， 5XX，这些情况处理与2XX不同
如果资源可缓存，进行缓存
对响应进行解码
根据资源类型进行处理
解析HTML文档，构建DOM树，下载资源，构造CSSOM树，执行js脚本，没有先后顺序
解析过程中遇到图片、样式表、js文件，启动下载
根据DOM树和CSSOM树构建渲染树：
js 解析如下

浏览器创建Document对象并解析HTML，将解析到的元素和文本节点添加到文档中，此时document.readystate为loading
HTML解析器遇到没有async和defer的script时，将他们添加到文档中，然后执行行内或外部脚本。这些脚本会同步执行，并且在脚本下载和执行时解析器会暂停。这样就可以用document.write()把文本插入到输入流中。同步脚本经常简单定义函数和注册事件处理程序，他们可以遍历和操作script和他们之前的文档内容
当解析器遇到设置了async属性的script时，开始下载脚本并继续解析文档。脚本会在它下载完成后尽快执行，但是解析器不会停下来等它下载。异步脚本禁止使用document.write()，它们可以访问自己script和之前的文档元素
当文档完成解析，document.readState变成interactive
所有defer脚本会按照在文档出现的顺序执行，延迟脚本能访问完整文档树，禁止使用document.write()
浏览器在Document对象上触发DOMContentLoaded事件
此时文档完全解析完成，浏览器可能还在等待如图片等内容加载，等这些内容完成载入并且所有异步脚本完成载入和执行，document.readState变为complete,window触发load事件

21. 显示页面

8.HTTP request报文结构是怎样的

rfc2616中进行了定义：

首行是Request-Line包括：请求方法，请求URI，协议版本，CRLF
首行之后是若干行请求头，包括general-header，request-header或者entity-header，每个一行以CRLF结束
请求头和消息实体之间有一个CRLF分隔
根据实际请求需要可能包含一个消息实体 一个请求报文例子如下：

GET /Protocols/rfc2616/rfc2616-sec5.html HTTP/1.1
Host: www.w3.org
Connection: keep-alive
Cache-Control: max-age=0
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,*/*;q=0.8
User-Agent: Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/35.0.1916.153 Safari/537.36
Referer: https://www.google.com.hk/
Accept-Encoding: gzip,deflate,sdch
Accept-Language: zh-CN,zh;q=0.8,en;q=0.6
Cookie: authorstyle=yes
If-None-Match: "2cc8-3e3073913b100"
If-Modified-Since: Wed, 01 Sep 2004 13:24:52 GMT

name=qiu&age=25

9.HTTP response报文结构是怎样的

rfc2616中进行了定义：

首行是状态行包括：HTTP版本，状态码，状态描述，后面跟一个CRLF
首行之后是若干行响应头，包括：通用头部，响应头部，实体头部
响应头部和响应实体之间用一个CRLF空行分隔
最后是一个可能的消息实体 响应报文例子如下：

HTTP/1.1 200 OK
Date: Tue, 08 Jul 2014 05:28:43 GMT
Server: Apache/2
Last-Modified: Wed, 01 Sep 2004 13:24:52 GMT
ETag: "40d7-3e3073913b100"
Accept-Ranges: bytes
Content-Length: 16599
Cache-Control: max-age=21600
Expires: Tue, 08 Jul 2014 11:28:43 GMT
P3P: policyref="http://www.w3.org/2001/05/P3P/p3p.xml"
Content-Type: text/html; charset=iso-8859-1

{"name": "qiu", "age": 25}

10.如何进行网站性能优化

雅虎Best Practices for Speeding Up Your Web Site：

content方面

减少HTTP请求：合并文件、CSS精灵、inline Image
减少DNS查询：DNS查询完成之前浏览器不能从这个主机下载任何任何文件。方法：DNS缓存、将资源分布到恰当数量的主机名，平衡并行下载和DNS查询
避免重定向：多余的中间访问
使Ajax可缓存
非必须组件延迟加载
未来所需组件预加载
减少DOM元素数量
将资源放到不同的域下：浏览器同时从一个域下载资源的数目有限，增加域可以提高并行下载量
减少iframe数量
不要404

Server方面

使用CDN
添加Expires或者Cache-Control响应头
对组件使用Gzip压缩
配置ETag
Flush Buffer Early
Ajax使用GET进行请求
避免空src的img标签

Cookie方面

减小cookie大小
引入资源的域名不要包含cookie

css方面

将样式表放到页面顶部
不使用CSS表达式
使用不使用@import
不使用IE的Filter

Javascript方面

将脚本放到页面底部
将javascript和css从外部引入
压缩javascript和css
删除不需要的脚本
减少DOM访问
合理设计事件监听器

图片方面

优化图片：根据实际颜色需要选择色深、压缩
优化css精灵
不要在HTML中拉伸图片
保证favicon.ico小并且可缓存

移动方面

保证组件小于25k
Pack Components into a Multipart Document

11.什么是渐进增强

渐进增强是指在web设计时强调可访问性、语义化HTML标签、外部样式表和脚本。保证所有人都能访问页面的基本内容和功能同时为高级浏览器和高带宽用户提供更好的用户体验。核心原则如下:

所有浏览器都必须能访问基本内容
所有浏览器都必须能使用基本功能
所有内容都包含在语义化标签中
通过外部CSS提供增强的布局
通过非侵入式、外部javascript提供增强功能
end-user web browser preferences are respected

12.HTTP状态码及其含义

参考RFC 2616

1XX：信息状态码
- 100 Continue：客户端应当继续发送请求。这个临时相应是用来通知客户端它的部分请求已经被服务器接收，且仍未被拒绝。客户端应当继续发送请求的剩余部分，或者如果请求已经完成，忽略这个响应。服务器必须在请求万仇向客户端发送一个最终响应
- 101 Switching Protocols：服务器已经理解力客户端的请求，并将通过Upgrade消息头通知客户端采用不同的协议来完成这个请求。在发送完这个响应最后的空行后，服务器将会切换到Upgrade消息头中定义的那些协议。
2XX：成功状态码
- 200 OK：请求成功，请求所希望的响应头或数据体将随此响应返回
- 201 Created：
- 202 Accepted：
- 203 Non-Authoritative Information：
- 204 No Content：
- 205 Reset Content：
- 206 Partial Content：
3XX：重定向
- 300 Multiple Choices：
- 301 Moved Permanently：
- 302 Found：
- 303 See Other：
- 304 Not Modified：
- 305 Use Proxy：
- 306 （unused）：
- 307 Temporary Redirect：
4XX：客户端错误
- 400 Bad Request:
- 401 Unauthorized:
- 402 Payment Required:
- 403 Forbidden:
- 404 Not Found:
- 405 Method Not Allowed:
- 406 Not Acceptable:
- 407 Proxy Authentication Required:
- 408 Request Timeout:
- 409 Conflict:
- 410 Gone:
- 411 Length Required:
- 412 Precondition Failed:
- 413 Request Entity Too Large:
- 414 Request-URI Too Long:
- 415 Unsupported Media Type:
- 416 Requested Range Not Satisfiable:
- 417 Expectation Failed:
5XX: 服务器错误
- 500 Internal Server Error:
- 501 Not Implemented:
- 502 Bad Gateway:
- 503 Service Unavailable:
- 504 Gateway Timeout:
- 505 HTTP Version Not Supported:

转载请注明出处: https://github.com/qiu-deqing/FE-interview

介绍一下你对浏览器内核的理解？

主要分成两部分：渲染引擎(layout engineer或Rendering Engine)和JS引擎。
渲染引擎：负责取得网页的内容（HTML、XML、图像等等）、整理讯息（例如加入CSS等），以及计算网页的显示方式，然后会输出至显示器或打印机。浏览器的内核的不同对于网页的语法解释会有不同，所以渲染的效果也不相同。所有网页浏览器、电子邮件客户端以及其它需要编辑、显示网络内容的应用程序都需要内核。

JS引擎则：解析和执行javascript来实现网页的动态效果。

最开始渲染引擎和JS引擎并没有区分的很明确，后来JS引擎越来越独立，内核就倾向于只指渲染引擎。

常见的浏览器内核有哪些？

Trident内核：IE,MaxThon,TT,The World,360,搜狗浏览器等。[又称MSHTML]
Gecko内核：Netscape6及以上版本，FF,MozillaSuite/SeaMonkey等
Presto内核：Opera7及以上。 [Opera内核原为：Presto，现为：Blink;]
Webkit内核：Safari,Chrome等。 [ Chrome的：Blink（WebKit的分支）]

详细文章：[浏览器内核的解析和对比](http://www.cnblogs.com/fullhouse/archive/2011/12/19/2293455.html)

html5有哪些新特性、移除了那些元素？如何处理HTML5新标签的浏览器兼容问题？如何区分 HTML 和 HTML5？

HTML5现在已经不是SGML的子集，主要是关于图像，位置，存储，多任务等功能的增加

绘画 canvas

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

本地离线存储 localStorage 长期存储数据，浏览器关闭后数据也不会丢失

sessionStorage 的数据在浏览器关闭后会自动删除

语义化更好的内容元素：如 article footer header nav section

表单控件 calendar date time email URL search

新的技术 webworker websocket Geolocation

移除的元素

纯表现的元素：basefont，big，center，font, s，strike，tt，u;
对可用性产生负面影响的元素：frame，frameset，noframes；

支持HTML5新标签

IE8/IE7/IE6支持通过document.createElement方法产生的标签，
   可以利用这一特性让这些浏览器支持HTML5新标签，
   浏览器支持新标签后，还需要添加标签默认的样式。

当然也可以直接使用成熟的框架、比如html5shim;

如何区分HTML5 ：DOCTYPE 声明/ 新增的结构元素/功能元素

Label的作用是什么？是怎么用的？

  label标签来定义表单控制间的关系,当用户选择该标签时，浏览器会自动将焦点转到和标签相关的表单控件上。

  <label for="Name">Number:</label>
  <input type=“text“name="Name" id="Name"/>

  <label>Date:<input type="text" name="B"/></label>

如何实现浏览器内多个标签页之间的通信? (阿里)

WebSocket、SharedWorker；
也可以调用localstorge、cookies等本地存储方式；

localstorge另一个浏览上下文里被添加、修改或删除时，它都会触发一个事件，
我们通过监听事件，控制它的值来进行页面信息通信；
注意quirks：Safari 在无痕模式下设置localstorge值时会抛出 QuotaExceededError 的异常；

webSocket如何兼容低浏览器？(阿里)

  Adobe Flash Socket 、
  ActiveX HTMLFile (IE) 、
  基于 multipart 编码发送 XHR 、
  基于长轮询的 XHR

页面可见性（Page Visibility API）可以有哪些用途？

通过 visibilityState 的值检测页面当前是否可见，以及打开网页的时间等; 在页面被切换到其他后台进程的时候，自动暂停音乐或视频的播放；

网页验证码是干嘛的，是为了解决什么安全问题。

区分用户是计算机还是人的公共全自动程序。可以防止恶意破解密码、刷票、论坛灌水；有效防止黑客对某一个特定注册用户用特定程序暴力破解方式进行不断的登陆尝试。

什么是Cookie 隔离？（或者说：请求资源的时候不要让它带cookie怎么做）

如果静态文件都放在主域名下，那静态文件请求的时候会带有cookie给服务器，这样非常浪费流量，所以要cookie隔离
因为cookie有域的限制，因此不能跨域请求，所以在使用非主域名的时候，请求头就不会带有cookie的数据，这样可以降低请求头的大小，降低请求时间，从而降低请求延时的情况
同时这种方式不会将cookie传入服务器，也减少了服务器对cookie的解析处理，提高服务器对cookie的解析速度