zoukankan      html  css  js  c++  java
  • http及浏览器相关知识点归纳

    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

  • 相关阅读:
    go函数
    Linux 查看磁盘容量、查找大文件、查找大目录
    五分钟理解一致性哈希算法(consistent hashing)
    使用Java实现三个线程交替打印0-74
    Python实现IOC控制反转
    Wannafly挑战赛5 A珂朵莉与宇宙 前缀和+枚举平方数
    Yandex Big Data Essentials Week1 Scaling Distributed File System
    Yandex Big Data Essentials Week1 Unix Command Line Interface Processes managing
    Yandex Big Data Essentials Week1 Unix Command Line Interface File Content exploration
    Yandex Big Data Essentials Week1 Unix Command Line Interface File System exploration
  • 原文地址:https://www.cnblogs.com/ningyn0712/p/11923808.html
Copyright © 2011-2022 走看看