langyazhixue

积极向上,独立自主

  • 主页
所有文章 关于我

langyazhixue

积极向上,独立自主

  • 主页

http协议总结篇

2021-06-11
  • HTTP性能优化篇上

    1. 服务器:

      1. 合理利用系统资源,提高服务器的吞吐量和并发数,降低响应时间。
    2. 客户端: 一次 HTTP ‘请求-响应’的过程延迟的时间是非常惊人的,差不多占了99%。客户端 HTTP 性能优化的关键就是:降低延迟

    3. 小结

      1. 性能优化是一个复杂的概念,在 HTTP 里可以分解为服务器性能优化、客户端性能优化和传输链路优化
      2. 服务器有三个主要的性能指标:吞吐量、并发数和响应时间,此外还需要考虑资源利用率;
      3. 客户端的基本性能指标是延迟,影响因素有地理距离、带宽、DNS 查询、TCP 握手等;
      4. 从服务器到客户端的传输链路可以分为三个部分,我们能够优化的是前两个部分,也就是“第一公里”和“中间一公里”;
      5. 有很多工具可以测量这些指标,服务器端有 ab、top、sar 等,客户端可以使用测试网站,浏览器的开发者工具
    4. 你有 HTTP 性能优化的经验吗?常用的有哪些方法?
      本人生产环境中会用到的:tcp fast open,DNS,HTTP缓存,DNS-prefetch

    5. 你是怎么理解客户端的“延迟”的?应该怎样降低延迟?
      就是客户端与服务器一次请求响应的往反时间,降低延迟的话用DNS缓存,TCP连接复用,使用CDN,应该可以降低延迟

  • HTTP 性能优化篇下

    1. 在整个HTTP系统里有三个可优化的环节

      1. 服务器
      2. 客户端:无法控制
      3. 传输链路
    2. 硬件优化: 更强的CPU、更快的网卡、更大的带宽、更多的服务器

    3. 软件优化

      1. 开源:开发网站服务器自身的潜力,在现有条件不变的情况下尽量挖掘出更多的服务能力。

        1. 选择高性能的Web服务器,选择Nginx,利用Nginx 强大的反向代理能力实现动静分离, 动态页面交给 Tomcat、Django、Rails,图片、样式表等静态资源交给 Nginx
        2. HTTP/1.1 升级到 HTTP/2
        3. TSL/1.2 升级到 TSL/1.3
      2. 节流:减少客户端和服务器之间收发的数据流,在有限的带宽里传输更多的内容

        1. HTTP 协议内置的“数据压缩”编码 gzip br

        2. HTML/CSS/JavaScript 属于纯文本,就可以采用特殊的“压缩”,去掉源码里多余的空格、换行、注释等元素

        3. 图片在 HTTP 传输里占有非常高的比例,虽然它本身已经被压缩过了,不能被 gzip、br 处理,但仍然有优化的空间。比如说,去除图片里的拍摄时间、地点、机型等元数据,适当降低分辨率,缩小尺寸。图片的格式也很关键,尽量选择高压缩率的格式,有损格式应该用 JPEG,无损格式应该用 Webp 格式

        4. 对于小文本或者小图片,还有一种叫做资源合并(Concatenation)的优化方式,就是把许多小资源合并成一个大资源,用一个请求全下载到客户端,然后客户端再用 JavaScript、CSS 切分后使用,好处是节省了请求次数,但缺点是处理比较麻烦

        5. DNS 解析域名会耗费不少的时间,如果网站拥有多个域名,那么域名解析获取 IP 地址就是一个不小的成本,所以应当适当“收缩”域名,限制在两三个左右,减少解析完整域名所需的时间,让客户端尽快从系统缓存里获取解析结果。

        6. 重定向引发的客户端延迟也很高,它不仅增加了一次请求往返,还有可能导致新域名的 DNS 解析,是 HTTP 前端性能优化的“大忌”。除非必要,应当尽量不使用重定向,或者使用 Web 服务器的“内部重定向”。

      3. 缓存,CDN,“没有请求的请求,才是最快的请求。”

    4. HTTP/2

      1. HTTP性能优化还有一个选择,就是把协议由HTTP/1升级到 HTTP/2

      2. HTTP/2很多优点,它消除了应用层的队头阻塞,拥有 头部压缩、二进制帧、多路复用、流量控制、 服务器推送等许多特性

      3. 有些在HTTP/1 里的优化手段到了 HTTP/2里会有反效果

        1. 对于 HTTP/2 来说,一个域名使用一个 TCP 连接才能够获得最佳性能,如果开多个域名,就会浪费带宽和服务器资源,也会降低 HTTP/2 的效率,所以“域名收缩”在 HTTP/2 里是必须要做的。“
        2. 资源合并”在 HTTP/1 里减少了多次请求的成本,但在 HTTP/2 里因为有头部压缩和多路复用,传输小文件的成本很低,所以合并就失去了意义。
        3. 而且“资源合并”还有一个缺点,就是降低了缓存的可用性,只要一个小文件更新,整个缓存就完全失效,必须重新下载。所以在现在的大带宽和 CDN 应用场景下,应当尽量少用资源合并(JavaScript、CSS 图片合并,数据内嵌),让资源的粒度尽可能地小,才能更好地发挥缓存的作用
    5. 精灵图(Spriting)、资源内联(inlining)、域名分片(Sharding)这些手段为什么会对 HTTP/2 的性能 优化造成反效果呢?

      HTTP2 有多路复用,因为HTTP/2中使用小颗粒化的资源,优化了缓存,而使用精灵图就相当于传输大文件,但是大文件会延迟客户端的处理执行,并且缓存失效的开销很昂贵,很少数量的数据更新就会使整个精灵图失效,需要重新下载(http1中使用精灵图是为了减少请求)

      HTTP1中使用内联资源也是为了减少请求,内联资源没有办法独立缓存,破坏了HTTP/2的多路复用和优先级策略

      域名分片在HTTP1中是为了突破浏览器每个域名下同时连接数,但是这在HTTP/2中使用多路复用解决了这个问题,如果使用域名分片反而会限制HTTP2的自由发挥

  • 网络
宏观视角下的浏览器
问题解答
© 2022 langyazhixue
Powered by Hexo
  • 所有文章
  • 关于我

tag:

  • css
  • htmlDOM
  • node
  • npm
  • react-native
  • 性能优化
  • git
  • 代码规范
  • plugin
  • mock
  • 浏览器
  • 计算机基础
  • http
  • 网络
  • webpack
  • vue
  • vue-cli
  • brower
  • 数据结构
  • es5
  • es6
  • test
  • ts
  • typescript
  • react-router
  • react
  • dva
  • redux
  • redux-saga
  • vue API
  • vue 选项
  • vue基础
  • 设计模式
  • vue-router
  • requestIdleCallback

    缺失模块。
    1、请确保node版本大于6.2
    2、在博客根目录(注意不是yilia根目录)执行以下命令:
    npm i hexo-generator-json-content --save

    3、在根目录_config.yml里添加配置:

      jsonContent:
        meta: false
        pages: false
        posts:
          title: true
          date: true
          path: true
          text: false
          raw: false
          content: false
          slug: false
          updated: false
          comments: false
          link: false
          permalink: false
          excerpt: false
          categories: false
          tags: true
    

  • 2022-06-24

  • 2022-06-24

  • 2022-06-24

  • 2022-06-24

  • 2022-06-24

  • 2022-06-24

  • 2022-06-24

  • 2022-06-24

  • 2022-06-24

  • 2022-06-24

  • 2022-06-24

  • 2022-06-24

  • 2022-06-24

  • 2022-06-24

  • 2022-06-24

  • 2022-06-24

  • 2022-06-24

  • 2022-06-24

  • 2022-06-24

  • 2022-06-24

  • React-setState()的两中传参方式介绍及理解

    2021-12-08

    #react

  • requestIdleCallback

    2021-11-30

    #requestIdleCallback

  • enzyme 测试

    2021-11-13

    #test

  • React 合成事件

    2021-11-08

    #react

  • 小哲机器人项目情况

    2021-08-11

    #webpack

  • 测试类型

    2021-07-15

    #test

  • http协议进阶篇

    2021-06-11

    #网络

  • 问题解答

    2021-06-11

    #浏览器

  • http协议探索篇

    2021-06-11

    #网络

  • http协议安全篇

    2021-06-11

    #网络

  • http协议破冰篇

    2021-06-11

    #网络

  • 浏览器中的JS 执行机制

    2021-06-11

    #浏览器

  • 课外加餐

    2021-06-11

    #浏览器

  • V8引擎工作原理

    2021-06-11

    #浏览器

  • http协议基础篇

    2021-06-11

    #网络

  • V8引擎工作原理

    2021-06-11

    #浏览器

  • 宏观视角下的浏览器

    2021-06-11

    #浏览器

  • http协议总结篇

    2021-06-11

    #网络

  • 问题解答

    2021-06-11

    #浏览器

  • 浏览器安全

    2021-06-11

    #浏览器

  • http协议飞翔篇

    2021-06-11

    #网络

  • 浏览器中的页面

    2021-06-11

    #浏览器

  • vue - 性能优化

    2021-01-02

    #性能优化

  • 性能优化

    2021-01-02

    #性能优化

  • 骨架屏

    2021-01-02

    #性能优化

  • 收集性能信息

    2021-01-02

    #性能优化

  • webapck - 性能优化

    2021-01-02

    #性能优化

  • 关于屏幕尺寸、分辨率(比)、屏幕像素密度的小结

    2021-01-02

    #性能优化

  • git 命令大全

    2020-11-05

    #git

  • vue-cli css 相关配置

    2020-07-31

    #vue#vue-cli

  • vue-cli 环境变量和模式

    2020-07-31

    #vue#vue-cli

  • vue-cli webpack相关配置

    2020-07-31

    #vue#vue-cli

  • vue-cli 脚手架介绍

    2020-07-31

    #vue#vue-cli

  • vue-cli 构建目标

    2020-07-31

    #vue#vue-cli

  • 声明文件的发布

    2020-07-29

    #typescript

  • 如何写TS中的声明文件

    2020-07-29

    #typescript

  • ts 项目配置 tsconfig.json

    2020-07-29

    #typescript

  • 在TypeScript中,.d.ts声明文件中的'export=' 是什么意思

    2020-07-29

    #typescript

  • 进程与线程的区别

    2020-03-05

    #计算机基础

  • react-native 核心组件介绍

    2020-01-02

    #react-native

  • react-native 核心API 介绍

    2020-01-02

    #react-native

  • react-native 离线缓存设计

    2019-12-30

    #react-native

  • react-native 数据缓存

    2019-12-30

    #react-native

  • react-native

    2019-12-30

    #react-native

  • webpack 谈谈 require和require.context()方法

    2019-12-21

    #es6

  • vue权限控制和动态路由

    2019-12-19

    #vue-router

  • 请求相关 path-to-regexp

    2019-12-19

    #plugin

  • dva有哪些输出文件

    2019-12-18

    #react#dva

  • 为什么要用dva

    2019-12-18

    #react#dva

  • dva插件之 dva-loading插件

    2019-12-18

    #react#dva

  • dva有哪些API

    2019-12-18

    #react#dva

  • 谈谈如何在本地进行数据mock

    2019-12-10

    #mock

  • redux-saga 之 Middleware API

    2019-12-05

    #redux#redux-saga

  • redux-saga 如何与 redux 结合

    2019-12-05

    #redux#redux-saga

  • redux-saga 辅助函数

    2019-12-05

    #redux#redux-saga

  • redux-saga 对 sagas 进行排序

    2019-12-05

    #redux#redux-saga

  • redux-saga 之 Effect创建器

    2019-12-05

    #redux#redux-saga

  • redux-saga 组合器

    2019-12-05

    #redux#redux-saga

  • 实现一个flat函数

    2019-12-02

    #es6

  • 谈谈 react-redux

    2019-11-29

    #redux

  • 谈谈 react-router 之 history

    2019-11-29

    #react-router

  • 谈谈 react-router 之 Link

    2019-11-29

    #react-router

  • 谈谈 react-router 之 懒加载

    2019-11-29

    #react-router

  • 谈谈 react-router 之 Hooks

    2019-11-29

    #react-router

  • 谈谈redux 中的 middleware

    2019-11-29

    #redux

  • 谈谈 react-router 之 match

    2019-11-29

    #react-router

  • 谈谈 react-router 之 Router

    2019-11-29

    #react-router

  • redux 综述

    2019-11-29

    #redux

  • redux API 解析

    2019-11-29

    #redux

  • 什么是reducer

    2019-11-20

    #redux

  • 自己实现一个深拷贝

    2019-11-14

    #es5

  • React受控组件

    2019-11-08

    #react

  • React Hook 动机

    2019-11-08

    #react

  • React 生命周期

    2019-11-08

    #react

  • React API

    2019-11-08

    #react

  • React 生命周期2

    2019-11-08

    #react

  • React 性能优化

    2019-11-08

    #react

  • React 高阶组件

    2019-11-08

    #react

  • React 深入JSX

    2019-11-08

    #react

  • React 错误边界

    2019-11-08

    #react

  • React 协调

    2019-11-08

    #react

  • React 代码分割

    2019-11-08

    #react

  • React 不使用jsx

    2019-11-08

    #react

  • React Refs and the DOM

    2019-11-08

    #react

  • React 问题解答

    2019-11-08

    #react

  • React Render Props

    2019-11-08

    #react

  • React 复习指南

    2019-11-08

    #react

  • React事件处理函数必须使用bind(this)的原因

    2019-11-08

    #react

  • React Refs 转发

    2019-11-08

    #react

  • React中元素与组件的区别

    2019-11-08

    #react

  • React Portals

    2019-11-08

    #react

  • 自己实现一个自己的promise

    2019-11-02

    #es6

  • 散列表-线性探查

    2019-11-01

    #数据结构

  • 散列表-分离链接

    2019-11-01

    #数据结构

  • 学习数据结构

    2019-10-22

    #数据结构

  • 如何实现一个lazyMan

    2019-10-15

    #es5

  • 谈谈原生的ajax

    2019-10-15

    #brower

  • 谈谈浏览器的宏任务和微任务(事件机制)

    2019-10-15

    #brower

  • es5中 constructor

    2019-10-14

    #es5

  • toString 的 隐式转化能力

    2019-10-14

    #es5

  • IntersectionObserver 实现懒加载

    2019-10-14

    #es5

  • toString 的 隐式转化能力

    2019-10-14

    #es5

  • 谈谈Vue整理的工作流程

    2019-10-08

    #vue#vue基础

  • window.onload

    2019-10-08

    #htmlDOM

  • 打印出html中所有的标签

    2019-10-08

    #htmlDOM

  • HTML DOM childNodes 属性

    2019-10-08

    #htmlDOM

  • typescript基本类型

    2019-09-29

    #typescript

  • 说出v-model跟async的区别

    2019-09-29

    #vue#vue 选项

  • 谈谈 Vue 中的响应式原理哦

    2019-09-18

    #vue#vue基础

  • 优化构建命令行的显示日志以及构建异常和中断处理

    2019-09-11

    #webpack

  • wepack 常见问题列表

    2019-09-11

    #webpack

  • 构建配置抽离成npm包的意义

    2019-09-11

    #webpack

  • npm piblish 基本流程

    2019-09-10

    #node#npm

  • JavaScript 中 exec() 方法详解

    2019-09-05

    #es5

  • vue key 的作用

    2019-08-30

    #vue

  • vue 组件化通信

    2019-08-30

    #vue

  • 为什么Vue实例化后,通过this.能获取到data内的数据

    2019-08-30

    #vue

  • es5 有哪几种继承方式

    2019-08-26

    #es5

  • 设计原则

    2019-08-20

    #设计模式

  • 代码分割 和 动态 import

    2019-08-13

    #webpack

  • 谈谈js的作用域连 和 执行环境

    2019-08-12

    #es5

  • 我们来谈谈一言难尽的js变量提升

    2019-08-12

    #es5

  • webpack中  Scope Hositing 使用和原理

    2019-08-05

    #webpack

  • webpack中 tree shaking(摇树优化)

    2019-08-05

    #webpack

  • ES6中的import()函数

    2019-08-02

    #es6

  • 谈谈 axios 和 ajax 的区别和各自的优缺点

    2019-08-02

    #es5

  • error 错误

    2019-08-02

    #es5

  • JavaScript中var、let、const区别?

    2019-08-02

    #es6

  • npm 常用命令大全

    2019-07-30

    #node#npm

  • nrm的作用与安装使用

    2019-07-30

    #node#npm

  • ts 常见问题总结

    2019-07-30

    #ts

  • webpack中 优化提取公共资源

    2019-07-30

    #webpack

  • webpack打包之使用source-map?

    2019-07-29

    #webpack

  • webpack打包之资源内联?

    2019-07-28

    #webpack

  • webpack中文件的监听

    2019-07-26

    #webpack

  • 关于Location对象

    2019-07-26

    #brower

  • 谈谈 URI 和 URL 的关系

    2019-07-26

    #brower

  • 谈谈 history API

    2019-07-26

    #brower

  • 一篇文章读懂RGB、HSL、Hex 网页色彩值

    2019-07-22

    #css

  • 谈谈 css中的 transition 过渡

    2019-07-21

    #css

  • 谈谈 css中的 transform 转换

    2019-07-21

    #css

  • 谈谈 css中的 居中

    2019-07-21

    #css

  • 冒烟测试

    2019-07-15

    #test

  • webpack 配置指南?

    2019-07-15

    #webpack

  • webpack构建之mode?

    2019-07-15

    #webpack

  • webpack解析CSS、Less和Sass ?

    2019-07-15

    #webpack

  • 为什么需要打包工具以及为什么选择wbepack?

    2019-07-10

    #webpack

  • Es6 Promise resolve 或者 reject 之后 还 需要 return 吗

    2019-07-02

    #es6

  • Es6 Promise 用法详解

    2019-07-02

    #es6

  • Es6 类的修饰 - 装饰器

    2019-07-02

    #es6

  • 关于table 中的标签 意义以及 table中各个属性的设置

    2019-06-28

    #css

  • 谈谈 Object.create()

    2019-06-26

    #es5

  • 数组快速排序

    2019-06-26

    #es5

  • 递归算法,js实现

    2019-06-26

    #es5

  • 关于算法中的时间复杂度的理解

    2019-06-26

    #数据结构

  • 学习stack

    2019-06-26

    #数据结构

  • 打印出 Html 中的所有标签

    2019-06-26

    #es5

  • 自己实现一个集合

    2019-06-26

    #数据结构

  • 自己实现一个字典

    2019-06-26

    #数据结构

  • 谈谈 柯里化

    2019-06-26

    #es5

  • 深拷贝和浅拷贝

    2019-06-26

    #es5

  • 函数节流与防抖

    2019-06-26

    #es5

  • async await 捕获promise reject error

    2019-06-26

    #es6

  • scss 入门

    2019-06-26

    #css

  • element UI、iview 等组件库修改样式不污染全局环境

    2019-06-26

    #css

  • 详解 ES6 class

    2019-06-26

    #es6

  • 谈谈Object.defineProperty

    2019-06-26

    #es6

  • 谈谈 Content-Type

    2019-06-26

    #http

  • 谈谈 正向代理和反向代理

    2019-06-26

    #http

  • js 垃圾回收

    2019-06-26

    #es5

  • 谈谈 Content-Type

    2019-06-26

    #http

  • 谈谈 闭包

    2019-06-26

    #es5

  • webpack3中 hash、chunkhash 和 contenthash 三者的区别

    2019-06-26

    #webpack

  • 快速排序

    2019-06-26

    #数据结构

  • 详解 ES6 class

    2019-06-26

    #es6

  • 谈谈webpack 中的plugin

    2019-06-26

    #webpack

  • css 命名规范 -- BEM 思想

    2019-06-26

    #css

  • HTML、CSS 和 JS 代码压缩

    2019-06-26

    #webpack

  • scss与sass的区别

    2019-06-26

    #css

  • JS模块规范:AMD、CMD、commonJS、ES6

    2019-06-26

    #es6

  • less 入门

    2019-06-26

    #css

  • 谈谈es6中的module

    2019-06-26

    #es6

  • webpack如何打包图片跟字体

    2019-06-26

    #webpack

  • 学习队列

    2019-06-26

    #数据结构

  • es5 构造函数

    2019-06-26

    #es5

  • 谈谈 js 的 call 和 apply

    2019-06-26

    #es5

  • webpack的热更新以及原理分析

    2019-06-26

    #webpack

  • 谈谈JS中的作用域问题

    2019-06-26

    #es5

  • 浅浅的谈一谈关于Vue 的生命周期

    2019-06-23

    #vue#vue基础

  • Vue的keep-alive用法

    2019-06-23

    #vue#vue基础

  • $attrs 和 $listeners的使用

    2019-06-23

    #vue#vue基础

  • 谈谈 Vue 中 的 computed

    2019-06-22

    #vue#vue基础

  • vue scoped scss 与深度作用选择器 /deep/

    2019-06-21

    #vue#vue基础

  • 前端常见问题和解决方案

    2019-06-20

    #代码规范

  • 谈谈 Vue 中的 自定义指令

    2019-06-20

    #vue#vue基础

  • 谈谈 Vue 中 的 组件

    2019-06-20

    #vue#vue基础

  • vue中is的作用

    2019-06-20

    #vue#vue基础

  • eslint 配置

    2019-06-20

    #代码规范

  • this.$refs 和 this.$el的作用和区别

    2019-06-20

    #vue#vue基础

  • 谈谈Vue中的插槽

    2019-06-19

    #vue#vue基础

  • 谈谈Vue中的递归组件

    2019-06-19

    #vue#vue基础

  • Vue中的provide/inject

    2019-06-19

    #vue#vue基础

  • vue 为什么组件的data要写成返回对象的函数

    2019-06-19

    #vue#vue基础

  • 怎么给 vue 写一个插件

    2019-06-19

    #vue#vue基础

  • 对于Vue这种MVVM设计模式的理解

    2019-06-19

    #vue#vue基础

  • 谈谈 vue 中 的 mixins

    2019-06-19

    #vue#vue基础

  • 谈谈 template 解决的痛点

    2019-06-19

    #vue#vue 选项

  • 谈谈 vue.component

    2019-06-19

    #vue#vue API

  • 谈谈 vue.directive

    2019-06-19

    #vue#vue API

  • 谈谈 vue.extend

    2019-06-19

    #vue#vue API

  • 谈谈 vue.filter

    2019-06-19

    #vue#vue API

  • Vue给对象新增属性(使用Vue.$set())

    2019-06-19

    #vue#vue API

  • 谈谈 Vue.nextTick

    2019-06-19

    #vue#vue API

  • 谈谈Vue中单元素/组件的过渡

    2019-06-19

    #vue#vue基础

  • $slots 跟 $scoped-slots 的对比

    2019-06-19

    #vue#vue 选项

  • 谈谈Vue中的函数式组件

    2019-06-19

    #vue#vue 选项

  • 谈谈el

    2019-06-19

    #vue#vue 选项

  • 谈谈Vue中的watch

    2019-06-19

    #vue#vue基础

  • 谈谈Vue中的render函数

    2019-06-19

    #vue#vue 选项

  • 在 vue-router 中利用钩子函数调用vuex中的数据

    2019-06-19

    #vue-router

  • 谈谈Vue的实例方法/生命周期

    2019-06-19

    #vue#vue 选项

  • 谈谈 vue 中的配置项 inheritAttrs

    2019-06-19

    #vue#vue 选项

  • vue中'. native'修饰符的使用

    2019-06-19

    #vue#vue 选项

  • 谈谈Vue的指令以及事件修饰符

    2019-06-19

    #vue#vue 选项

  • vue comments

    2019-06-19

    #vue#vue 选项

  • vue 实例属性

    2019-06-19

    #vue#vue 选项

  • 谈谈Vue的指令

    2019-06-19

    #vue#vue 选项

  • 谈谈model以及v-model指令

    2019-06-19

    #vue#vue 选项

  • 谈谈 vue-router 中的 router

    2019-06-19

    #vue-router

  • 谈谈Vue的实例方法/属性

    2019-06-19

    #vue#vue 选项

  • 谈谈 $parent, $children

    2019-06-19

    #vue#vue 选项

  • 谈谈 extends 和 mixins

    2019-06-19

    #vue#vue 选项

  • vue-router 中的 router-view

    2019-06-19

    #vue-router

  • Vue Router path 中通配符

    2019-06-19

    #vue-router

  • vue-router Router 构件项

    2019-06-19

    #vue-router

  • vue-router 中的 <router-link>

    2019-06-19

    #vue-router

  • 谈谈vue-router中的redirect

    2019-06-19

    #vue-router

  • vue-router的hash模式和history的区别

    2019-06-19

    #vue-router

  • vue-router的$route

    2019-06-19

    #vue-router

很惭愧<br><br>只做了一点微小的工作<br>谢谢大家