前端知识体系回顾——第二章 HTTP协议 1

posted @ May 3, 2016 • 陈凯 • 技术基础

摘要：「前端知识体系系列第二部分，这部分内容较多，分成三篇进行讲述」

1. Http协议（超文本传输协议）

Web是一种超文本信息系统，采用超文本信息组织方式，将信息资源链接到整个Internet上。以便所有进入互联网的用户访问。

在Web系统中，每一个信息被称作资源，并用一个全局的统一资源标识符URI进行标识，这些资源再通过超文本传输协议传送给用户。用户通过链接访问到想要获取的资源。

互联网Internet和Web并非是一个概念，互联网是一个基础平台，而Web是一种应用层服务。如QQ Email都是互联网上的服务。

由W3C来维护管理Web（万维网）应用。

域名系统是由DNS来管理和解析，由IP地址来对应DNS域名。

Http协议是一种应用层的协议，基于标准的B/S模型。Http在可靠地网络层协议（TCP/IP）的基础上提供了在Web服务器和客户机之间传输信息的一种机制。并规定了两者之间信息交互的信息格式。（Http是一种无状态协议）

2. Http页面访问的整个步骤

简单来说有以下步骤：

  • 查找域名对应的IP地址。这一步会依次查找浏览器缓存，系统缓存，路由器缓存，ISPDNS缓存，根域名服务器。（数据储存Cookie）；
  • 向IP对应的服务器发送请求。（Http网络协议）；
  • 服务器响应请求，使用解析器进行解析。有可能请求数据库，调用数据。（JS解析器，HTML解析 CSS缓存，构建DOM树 Database访问）；
  • 发回网页内容。返回请求的html页面。
  • 当然，由于网页可能有重定向，或者嵌入了图片，AJAX，其它子网页等等，这4个步骤可能反复进行多次才能将最终页面展示给用户。（详解见最后）

3. 页面加载和渲染（HTML CSS JS的加载过程顺序，以及如何执行，阻塞的情形）

从浏览器地址栏的请求链接开始，浏览器通过DNS解析查到域名映射的IP地址，成功之后浏览器端向此IP地址取得连接，成功连接之后，浏览器端将请 求头信息 通过HTTP协议向此IP地址所在服务器发起请求，服务器接受到请求之后等待处理，最后向浏览器端发回响应，此时在HTTP协议下，浏览器从服务器接收到 text/html类型的代码，浏览器开始显示此html，并获取其中内嵌资源地址，然后浏览器再发起请求来获取这些资源，并在浏览器的html中显示。

页面的加载与渲染顺序：

  1. 一个页面的加载顺序是从上到下顺序加载的，并且加载与渲染同时进行。
  2. 引用外部js文件时，当在加载过程中遇到<script>标签时，浏览器会向服务器发送一个request并等待该request的返回。因为浏览器需要1个稳定的DOM树结构，而JS中很有可能有代码直接改变了DOM树结构，比如使用document.write 或 appendChild,甚至是直接使用的location.href进行跳转，浏览器为了防止出现JS修改DOM树，需要重新构建DOM树的情况，所以加载JS就会阻塞其后内容的下载和呈现。
  3. 使用嵌入式JS时，会阻塞所有内容的呈现。
  4. 当在加载过程中遇到<style>标签时，浏览器会发1个request去请求CSS或image,然后继续执行下面的转换，而不需要等待request的返回，当request返回后，只需要把返回的内容放入到DOM树中对应的位置就OK，所以正常来说CSS并不会诸塞页面。
  5. 但是也有例外：当CSS后面跟着嵌入的JS的时候，该CSS就会出现阻塞后面资源下载的情况。原因：因为浏览器会维持html中css和js的顺序，样式表必须在嵌入的JS执行前先加载、解析完。而嵌入的JS会阻塞后面的资源加载，所以就会出现上面CSS阻塞下载的情况。

4. Http的返回状态码

  • 100-199 用于指定客户端应相应的某些动作。
  • 200-299 用于表示请求成功。
  • 300-399 用于已经移动的文件并且常被包含在定位头信息中指定新的地址信息。
  • 400-499 用于指出客户端的错误。400 语义有误，当前请求无法被服务器理解。401 当前请求需要用户验证 403 服务器已经理解请求，但是拒绝执行它。404 请求的资源不存在。
  • 500-599 用于支持服务器错误。 503 – 服务不可用。
  • 100 Continue 继续，一般在发送post请求时，已发送了http header之后服务端将返回此信息，表示确认之后发送具体参数信息
  • 200 OK 正常返回信息
  • 201 Created 请求成功并且服务器创建了新的资源
  • 202 Accepted 服务器已接受请求，但尚未处理
  • 301 Moved Permanently 请求的网页已永久移动到新位置。
  • 302 Found 临时性重定向。
  • 303 See Other 临时性重定向，且总是使用 GET 请求新的 URI。
  • 304 Not Modified 自从上次请求后，请求的网页未修改过。
  • 400 Bad Request 服务器无法理解请求的格式，客户端不应当尝试再次使用相同的内容发起请求。
  • 401 Unauthorized 请求未授权。
  • 403 Forbidden 禁止访问。
  • 404 Not Found 找不到如何与 URI 相匹配的资源。
  • 500 Internal Server Error 最常见的服务器端错误。
  • 503 Service Unavailable 服务器端暂时无法处理请求（可能是过载或维护）。

5. 浏览器缓存（如何利用缓存）

浏览器缓存（Browser Caching）是为了节约网络的资源加速浏览，浏览器在用户磁盘上对最近请求过的文档进行存储，当访问者再次请求这个页面时，浏览器就可以从本地磁盘显示文档，这样就可以加速页面的阅览。

6. 缓存有哪几种，在什么情况下使用

A. 传统的cookie的弊端

cookie虽然在持久保存客户端数据提供了方便，分担了服务器存储的负担，但还是有很多局限性的。

第一：每个特定的域名下最多生成20个cookie

1.IE6或更低版本最多20个cookie. 2.IE7和之后的版本最后可以有50个cookie。3.Firefox最多50个cookie 4.chrome和Safari没有做硬性限制

第二：IE和Opera 会清理近期最少使用的cookie，Firefox会随机清理cookie。cookie的最大大约为4096字节，为了兼容性，一般不能超过4095`字节。

IE 提供了一种存储可以持久化用户数据，叫做uerData，从IE5.0就开始支持。每个数据最多128K，每个域名下最多1M。这个持久化数据放在缓存中，如果缓存没有清理，那么会一直存在。

  • 优点：极高的扩展性和可用性 1.通过良好的编程，控制保存在cookie中的session对象的大小。 2.通过加密和安全传输技术（SSL），减少cookie被破解的可能性。 3.只在cookie中存放不敏感数据，即使被盗也不会有重大损失。 4.控制cookie的生命期，使之不会永远有效。偷盗者很可能拿到一个过期的cookie。

  • 缺点： 1.Cookie数量和长度的限制。每个domain最多只能有20条cookie，每个cookie长度不能超过4KB，否则会被截掉。 2.安全性问题。如果cookie被人拦截了，那人就可以取得所有的session信息。即使加密也与事无补，因为拦截者并不需要知道cookie的意义，他只要原样转发cookie就可以达到目的了。 3.有些状态不可能保存在客户端。例如，为了防止重复提交表单，我们需要在服务器端保存一个计数器。如果我们把这个计数器保存在客户端，那么它起不到任何作用。

B. 浏览器本地存储

a. 在较高版本的浏览器中，js提供了sessionStorage和globalStorage。在HTML5中提供了localStorage来取 globalStorage。

b. html5中的Web Storage包括了两种存储方式：sessionStorage和localStorage。 1. sessionStorage用于本地存储一个会话（session）中的数据，这些数据只有在同一个会话中的页面才能访问并且当会话结束后数据也随之销毁。因此sessionStorage不是一种持久化的本地存储，仅仅是会话级别的存储。 2. 而localStorage用于持久化的本地存储，除非主动删除数据，否则数据是永远不会过期的。

C. web storage和cookie的区别

  1. Web Storage的概念和cookie相似，区别是它是为了更大容量存储设计的。Cookie的大小是受限的，并且每次你请求一个新的页面的时候Cookie都会被发送过去，这样无形中浪费了带宽，另外cookie还需要指定作用域，不可以跨域调用。
  2. 除此之外，Web Storage拥有setItem,getItem,removeItem,clear等方法，不像cookie需要前端开发者自己封装setCookie，getCookie。
  3. 但是Cookie也是不可以或缺的：Cookie的作用是与服务器进行交互，作为HTTP规范的一部分而存在 ，而Web Storage仅仅是为了在本地“存储”数据而生。
  4. 浏览器的支持除了IE７及以下不支持外，其他标准浏览器都完全支持(ie及FF需在web服务器里运行)，值得一提的是IE总是办好事，例如IE7、IE6中的UserData其实就是javascript本地存储的解决方案。通过简单的代码封装可以统一到所有的浏览器都支持web storage。
  5. localStorage和sessionStorage都具有相同的操作方法，例如setItem、getItem和removeItem`等

7. 浏览器内核

  • Chrome和Safari（webkit） webkit
  • FireFox（Gecko内核） moz
  • IE (Trident内核，国内国产的浏览器基本都是搭载这个内核) ms
  • Opera (Presto内核，现在为blink) 这是目前公认网页浏览速度最快的浏览器内核。 o

8.页面优化的方法（详细见后面网站性能优化）

  • 期待的解决方案包括：
  • 文件合并
  • 文件最小化/文件压缩
  • 使用CDN托管
  • 缓存的使用
  • 其他等解决方案，特别是雅虎的14条准则 以及 高性能建设网站中的八条

9.浏览器兼容（如：_（IE6）， *（IE7）， +（IE67）， \9（IE9）， !important 之类）

  • 特殊性和分类次序问题（选择器的优先级问题），尽量不要使选择器过于特殊化，只在需要细粒度的控制时再考虑使用特殊的选择器;
  • 双边距BUG float引起的 使用display，将display设置为inline;
  • 浮动元素和非浮动元素之间3像素问题 使用float引起的 使用dislpay:inline 或者-3px的外边距，或者都采用浮动解决。
  • 超链接hover 点击后失效 使用正确的书写顺序 link visited hover active;
  • Ie z-index问题 给父级添加position:relative;
  • Png 透明 使用js代码修正。
  • Min-height 最小高度 ！Important 解决;
  • Select 在ie6下遮盖 使用iframe嵌套;
  • 为什么没有办法定义1px左右的宽度容器IE6默认的行高造成的，使用over:hidden；zoom:0.08；line-height:1px；
  • 在有的浏览器中，默认字体大小为12px，如果在做的过程中，发现字体小于12，可直接作为图片使用;
  • 若给a标签内的内容样式加上样式，需要设置display:block;，但如果设置了float属性，就不需要;
  • 作为外部 wrapper 的 div 不要定死高度, 最好还加上 overflow: hidden.以达到高度自适应;
  • 图片下留白，给图片img定义display:block.或者采用对齐方式vertical-align属性来调整;
  • 外边距叠加问题，修复方法是，添加内填充，或者边框;
  • png24位的图片在iE6浏览器上出现背景，解决方案是做成PNG8.