前端面试问题（HTML5+Http+web）

标签：str   多线程编程   intern   中间   响应状态   渲染   页面   move   active   

HTML(5)

1.简要介绍HTML5的新特性

首先HTML5为了更好的实践Web语义化，增加了header、footer、nav、aside、article、section等语义化标签。

在表单方面，为了增强表单，为input增加color、email、date、range等类型，

在存储方面提供了sessionStorage 、localStorage和离线存储，通过这些存储方式方便数据在客户端的存储和获取，

在多媒体方面规定了音频和视频元素audio和vedio；

另外还有地理定位、canvas画布、拖放、多线程编程的web workers和websocket协议

2.块级元素和行内元素有哪些？

块级元素有表示布局类的div、section、header、footer、aside、nav、article等，

列表类ul li、ol之类的，form、p、table、

标题h1~h6

行内元素：a、span、button、input、select、textarea、i、em、strong

3.HTML5的存储方案有哪些

HTML5提供了sessionStorage、localStorage和离线存储作为新的存储方案，其中sessionStorage和localStorage 都是采用键值对的形式存储，两者都是通过setItem、getItem、removeItem来实现增删查改，

而sessionStorage是会话存储，也就是说 当浏览器关闭之后sessionStorage也自动清空了，

而localStorage不会，它没有时间上的限制。

离线存储也就是应用程序缓存，这个通常用来 确保web应用能够在离线情况下使用，通过在html标签中属性manifest来声明需要缓存的文件，这个属性的值是一个包含需要缓存的文件的文件名的文件， 这个manifest文件声明的缓存文件可在初次加载后缓存在客户端，可以通过更新这个manifest文件来达到更新缓存文件的目的。

4.viewport的常见设置有哪些

viewport常常使用在响应式开发以及移动web开发中，viewport顾名思义就是用来设置视口，主要是规定视口的宽度、视口的初始缩放值、 视口的最小缩放值、视口的最大缩放值、是否允许用户缩放等。一个常见的viewport设置如下：

<meta name="viewport"  content="initial-scale=1,maximum-scale=1,user-scalable=no,width=device-width" />

其中同时设置width和initial-scale的目的是为了解决iphone、ipad、ie横竖屏不分的情况，因为这两个值同时存在时会取较大值。

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

1.在浏览器地址栏输入URL

2.浏览器查看缓存，如果请求资源在缓存中并且新鲜，跳转到转码步骤

3.浏览器解析URL获取协议，主机，端口，path

4.浏览器组装一个HTTP（GET）请求报文

5.浏览器获取主机ip地址，过程如下：

6.打开一个socket与目标IP地址，端口建立TCP链接，三次握手如下

7.TCP链接建立后发送HTTP请求

8.服务器检查HTTP请求头是否包含缓存验证信息如果验证缓存新鲜，返回304等对应状态码

9.服务器将响应报文通过TCP连接发送回浏览器

10.浏览器接收HTTP响应，然后根据情况选择关闭TCP连接或者保留重用，

11.浏览器检查响应状态吗：是否为1XX，3XX， 4XX， 5XX，这些情况处理与2XX不同

12.如果资源可缓存，进行缓存

13.对响应进行解码（例如gzip压缩）

14.根据资源类型决定如何处理（假设资源为HTML文档）

15.解析HTML文档，构件DOM树，下载资源，构造CSSOM树，执行js脚本，这些操作没有严格的先后顺序，以下分别解释

1. 构建DOM树：
   1. Tokenizing：根据HTML规范将字符流解析为标记
   2. Lexing：词法分析将标记转换为对象并定义属性和规则
   3. DOM construction：根据HTML标记关系将对象组成DOM树
2. 解析过程中遇到图片、样式表、js文件，启动下载
3. 构建CSSOM树：
   1. Tokenizing：字符流转换为标记流
   2. Node：根据标记创建节点
   3. CSSOM：节点创建CSSOM树
4. 根据DOM树和CSSOM树构建渲染树:
   1. 从DOM树的根节点遍历所有可见节点，不可见节点包括：1）script,meta这样本身不可见的标签。2)被css隐藏的节点，如display: none
   2. 对每一个可见节点，找到恰当的CSSOM规则并应用
   3. 发布可视节点的内容和计算样式
5. js解析如下：
   1. 浏览器创建Document对象并解析HTML，将解析到的元素和文本节点添加到文档中，此时document.readystate为loading
   2. HTML解析器遇到没有async和defer的script时，将他们添加到文档中，然后执行行内或外部脚本。这些脚本会同步执行，并且在脚本下载和执行时解析器会暂停。这样就可以用document.write()把文本插入到输入流中。同步脚本经常简单定义函数和注册事件处理程序，他们可以遍历和操作script和他们之前的文档内容
   3. 当解析器遇到设置了async属性的script时，开始下载脚本并继续解析文档。脚本会在它下载完成后尽快执行，但是解析器不会停下来等它下载。异步脚本禁止使用document.write()，它们可以访问自己script和之前的文档元素
   4. 当文档完成解析，document.readState变成interactive
   5. 所有defer脚本会按照在文档出现的顺序执行，延迟脚本能访问完整文档树，禁止使用document.write()
   6. 浏览器在Document对象上触发DOMContentLoaded事件
   7. 此时文档完全解析完成，浏览器可能还在等待如图片等内容加载，等这些内容完成载入并且所有异步脚本完成载入和执行，document.readState变为complete,window触发load事件
6. 显示页面（HTML解析过程中会逐步显示页面）

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

• content方面

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

• Server方面

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

• Cookie方面

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

• css方面

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

• Javascript方面

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

• 图片方面

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

• 移动方面

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

7.什么是渐进增强

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

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

8.HTTP状态码及其含义

• 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:

前端面试问题（HTML5+Http+web）

标签：str   多线程编程   intern   中间   响应状态   渲染   页面   move   active   

原文地址：https://www.cnblogs.com/FunkyEric/p/8979227.html