http是应用层协议,采用请求/响应模型

1、浏览器地址栏输入URL地址后发生了什么?

  1. 浏览器判断地址是否是合理的URL地址,是否是http协议请求,如果是则进入下一步
  2. 浏览器对此URL进行缓存检查:如果存在缓存则从本地提取文件(from memory cache,返回200),如果缓存过期或缓存不存在,则发起远程请求
  3. 向DNS服务器发送请求,解析URL对应的IP地址
  4. 客户端根据IP地址,连同cookie、userAgent等信息向web服务器发送请求,经过三次握手建立TCP连接
  5. 客户端向服务器端发送http请求,该请求作为TCP三次握手的第三个报文的数据发送给服务器
  6. ngnix根据URL做服务分发,分发到后端服务器或者是静态资源服务器,首屏请求一般是分发到静态服务器返回一个html
  7. 服务器端处理请求返回http响应报文,如果浏览器访问过该页面,缓存上有对应的资源,与服务器最后修改记录对比,一致返回304,否则返回200和对应资源
  8. 如果是200无缓存,则浏览器接收到信息并开始下载该html文件;如果是304有缓存,则浏览器从本地提取文件
  9. 释放TCP连接
  10. 浏览器解析该html文本并显示内容,同时使用和设置缓存

补充:

浏览器渲染引擎工作流程:

  1. 解析html构建DOM树时,渲染引擎会将html文件的标签元素解析成多个DOM元素对象节点,并且将这些节点根据父子关系组成一个树结构
  2. CSS文件被解析成CSS规则表,每一条CSS规则表按照从右到左的方式在DOM树上进行逆向匹配,DOM树具有了样式
  3. 将渲染树进行布局、绘制:先是对元素进行大小和位置的定位即position、margin、padding等,而后是color、background等

整个过程是逐步完成的。在浏览器渲染完首屏页面后,如果含有js文件对DOM进行操作会造成重排和重绘

 

2. HTTP 请求报文与响应报文格式

请求报文:请求行request-line、请求头headers、空行、请求体request-body

  请求头部是由一个个键值对组成,每个一行。

  请求正文:一般用于POST请求,GET请求不存在请求正文

 

响应报文:状态行status-line、响应头部headers、空行、响应体response-body

补充:

常见的 HTTP 状态码:

  • 1XX:一些信息
  • 2XX:成功信息
  • 3XX:资源重定向信息
  • 4XX:浏览器请求错误信息
  • 5XX:服务器错误信息

常见的 HTTP 头部:

  • 通用头部 General:同时适用于请求和响应
  • 响应头部 Respose Headers
  • 请求头部 Request Headers

常用的 HTTP 方法:GET、POST、DELETE、PUT、OPTIONS、HEAD

GET与POST请求在如下几个方面的差别:

  • 后退/刷新操作的影响
  • 是否可收藏为书签
  • 是否能被缓存
  • 参数是否保留在浏览器历史中
  • 发送数据时对数据长度的限制(get因为数据是附在URL之后所以有限制,而POST无限制)
  • 对数据类型的限制(GET只允许ASCII,POST无限制)
  • 安全性

 

3. 分别介绍 Cookie 和 Session 的作用及它们之间的区别

cookie:用于保存用户操作的历史信息,由服务器生成,存储在浏览器端

  • cookie可以同时被前台与后台操作;
  • cookie可以跨页面存取,不可以跨服务器访问;
  • cookie是有生命周期的,默认与浏览器相同,如果进程退出,cookie会被销毁
  • 一个cookie是一个小型的文本文件,以键值对的形式保存
  • 作用是与服务器进行交互,作为http规范的一部分而存在,可以在http返回体里通过设置Set-cookie来告知浏览器所要存储的cookie
  • 表示唯一的cookie:name、domain、path

cookie应用场景:

  • 保存用户登录信息
  • 跟踪统计用户访问该网站的习惯:比如访问时间、网页停留时间等

cookie的缺点:

  • cookie有数量和长度限制:每个浏览器存储的个数不能超过300个,每个服务器不能超过20个,数据量不能超过4K;
  • 安全性问题:如果cookie被拦截,对方就会获取到所有的session信息

 

session:服务器存储,把sessionID、用户信息、用户操作保存在服务器上

  • session的安全性比较高,但是session过多会导致性能下降
  • 每个会话会分配一个单独的sessionID,通过cookie存储一个sessionID,具体的数据存储在服务器上。如果用户登录会在cookie中保存一个session_id,下次再次请求的时候会把该session_id携带上,服务器会在session中查找对应的id的session数据。

补充:

本地存储除了cookie还有web Storage,即:localStorage和sessionStorage

localStorage:用于持久化的本地存储,除非是主动删除数据,否则数据会永久保存。

sessionStorage:会话级别的存储,一旦浏览器窗口关闭sessionStorage被销毁,只要这个浏览器窗口没有关闭,即使刷新页面或者是进入同源的另一个页面数据仍存在

web Storage具有自己的方法,而cookie需要自己封装方法

 

4. HTTP协议版本知识点

HTTP/1.1有什么优缺点:

优点:

  • 新增持久连接:connection: keep-alive,多个请求和响应可利用同一个TCP连接,减少了很多建立和关闭连接的消耗和延迟
  • 新增管道pipe机制:请求可以同时发出,响应会按顺序依次返回
  • 新增分块传输:不必等数据全部处理完毕再返回,服务器处理完部分数据就将该部分数据发送回客户端
  • 增加host字段
  • 增加了错误及警告信息的描述:引入Warning头域和24个状态响应码
  • 带宽优化:引入Range头域,允许只请求部分资源。在响应头部中Content-Range声明了返回这部分内容的长度,如果服务器返回该请求范围的内容则相应的返回206状态码,告诉Cache这是不是完整的一个对象。

缺点:

  • 队头阻塞:虽然增加了持久连接和管道机制,但是如果前面的响应很耗时,后面的处理依然需要等待,同样消耗性能。
  • http/1.1头部会携带很多冗余信息

HTTP/2.0的新特性:

  • 二进制分帧:在应用层HTTP/2.0和传输层TCP之间增加一个二进制分帧层,实现低延迟和高吞吐量
  • 多路复用
  • headers数据压缩
  • 服务器推送

 

5. HTTPS 工作原理

HTTPS实际是加了SSL(Secure Socket Layer)这层协议的HTTP而已,in other words,就是加上加密处理、认证和完整性保护的HTTP~此时数据传输的都是加密后的数据

HTTP之前是和TCP直接通信,现在需要先和SSL通信,然后再由SSL和TCP通信

 

 

HTTP 和 HTTPS 的差别

  • HTTP是明文传输,HTTPS是密文传输
  • HTTPS需要到CA申请证书,需要费用
  • 两者使用不同的连接方式和不同的端口号:HTTP用的端口是80,HTTPS是443

6. 跨域what & how

同源策略(Same Origin Policy,SOP):需要“协议+域名+端口号”均一致!

跨域:由于浏览器的同源策略影响,不能浏览其他网站的脚本

一些跨域的例子:

http://www.a.cn/index.html 调用 http://www.b.cn/server.php 跨域,主域不同

http://abc.a.cn/index.html 调用 http://def.b.cn/server.php 跨域,子域名不同

http://www.a.cn:8080/index.html 调用 http://www.a.cn/server.php 跨域,端口不同

https://www.a.cn/index.html 调用 http://www.a.cn/server.php 跨域,协议不同

localhost 调用 127.0.0.1 跨域

 

 

 

解决跨域:

  • jsonP
  • postMessage
  • 跨域资源共享CORS
  • webSocket协议
  • node代理跨域
  • ngnix代理跨域

7. 缓存 —— 详细见博文“缓存初探”

总结来说就是:

  1. 有Service Worker时优先使用Service Worker的缓存
  2. 浏览器刷新页面,使用memory Cache,当页面关闭,memory cache失效
  3. 使用disk cache:
    1. 如果有强制缓存且缓存未失效,则使用强制缓存,不请求服务器,此时状态码均是200
    2. 如果强制缓存失效(超过cache-control中max-age的值),则使用对比缓存,浏览器将待确认资源上次返回时response中的Last-Modified值和ETag值写入本次Request中的If-Modified-Since和If-None-Match传给服务器,服务器对比本次和之前的值是否有变化,有变化,则返回200和新资源;无变化则返回304
  4. 发送网络请求,等待响应

8. 浏览器性能优化

从三个大的方向入手:

A 资源缓存

B 资源的合并压缩

C 浏览器的加载、解析、渲染机制

A 资源缓存

  1. 将静态资源部署在CDN
  2. 利用HTTP缓存机制:利用Headers的Cache-control参数 —— 减少http请求次数

B 资源的合并压缩

 

  1. JS和CSS的处理:合并是减少JS文件数 —— 减少HTTP请求;压缩是极大减小文件的体积。一般而言会分类为:公共代码+页面响应代码+第三方代码,这样可以对JS或者CSS实现按需加载
  2. 图片的处理:
    1. 使用webP格式
    2. 使用iconfont替换img
    3. CSS Sprite合并图片
    4. 使用base64直接把图片编码写入css中

C 浏览器加载、解析、渲染机制

  • 将CSS引入的link写在<head>中
  • 引用外部的JS文件一般写在<script>底部,避免加载JS会阻塞HTML的解析。
  • 代码层面尽量减少重绘,避免重排
    • 尽量通过class处理样式切换
    • 需要多次重排的元素可以设置position为absolute或fixed,使元素尽量脱离文档流

当浏览器解析到<script>标签,有如下三种情况:

  • 如果标签内是内嵌到HTML中的JS代码 —— 直接执行
  • 如果是外链JS文件,且该文件未下载完 —— HTML解析过程被阻塞直到JS文件下载完毕 —— JS执行 —— HTML继续解析
  • 如果是外链JS文件,且文件已下载完毕 —— 直接执行JS代码,且并不阻塞HTML解析

 

HTTP请求加载资源的瓶颈在于带宽而不是请求数量,其实减少HTTP请求数来提升网站性能主要是基于两点:

  • HTTP建立比较耗时,并且每个HTTP请求还有一定的网络延时,因此需要的HTTP请求越多,产生的耗时就越多。HTTP/1.1的keep-alive的支持很大程度优化了该问题
  • 每个HTTP请求需要附带额外的数据,比如Headers信息、cookie信息等,当请求资源很小时,附带的数据可能会比所需的资源还要大。

 

附赠http相关的15个相关知识点的链接:https://mp.weixin.qq.com/s/SolYPhZCzP87XlVWYdn1Cw