此文章主要讲解:

1. 什么是 Web 前端

2. BS架构 与 CS架构

3. 浏览器的一个请求从发送到返回都经历了什么

4. 浏览器的一个请求从发送到返回的这个过程, 我们都有那些点可以进行优化

性能优化 - - - 上篇文章: 前端性能优化——概述(概括前端性能优化入手点)

性能优化 - - - 下篇文章: 资源合并与压缩 – 压缩

好了废话不多说, 直接上代码以及图例(为了让大家方便阅读, 都有自己验证过程的一些图片作为分享) 。

1. 什么是 Web 前端

 1. Web 前端本质上是一种 GUI软件, 可以直接借鉴其它 GUI软件 系统架构设计方法 。1. 什么是 GUI软件?1. 图形化用户界面: 是指采用 图形方式显示 的计算机操作用户界面 。2. 图形用户界面是一种人与计算机通信的界面显示格式, 允许用户使用鼠标等输入设备操纵屏幕上的图标或菜单选项, 以 选择命令、调用文件、启动程序 或执行其它一些日常任务 。 与通过键盘输入文本或字符命令来完成例行任务的字符界面相比, 图形用户界面有许多优点; 图形用户界面 由窗口、下拉菜单、对话框及其相应的控制机制构成, 在各种新式应用程序中都是标准化的, 即相同的操作总是以同样的方式来完成, 在图形用户界面, 用户看到和操作的都是图形对象, 应用的是计算机图形学的技术 。2. GUI软件的特点:1. 人机交互性 。2. 美观性 。3. 实用性 。4. 技术性 。3. GUI软件的分类:1. 具体产品独有的操作系统用户交互界面2. 可运行于不同品牌和型号电子产品的软件4. GUI软件的设计原则:1. 界面风格一致性的设计原则2. 界面布局的逻辑性原则3. 界面具有启示性的设计原则4. 界面设计应遵循习惯性用法2. 但是, Web 前端有点特别 。1. Web 前端它是 BS 架构, 它发布的过程是:1. 我们开发完前端代码之后, 他有一个发布的过程, 它的发布过程与 CS 架构不一样, 它不是去发布一个安装包, 它是将我们的代码发布到远程服务器 WebServer 以及我们的远程 CDN 上;2. 运行的过程是我们的用户打开浏览器输入相应的网址, 这个时候我们的浏览器才去向我们的远程服务器发出请求, 动态的增量式 的去加载我们的静态资源;3. 因此我们 Web 前端去访问的过程实际上是一个 动态的增量式的 加载静态资源的过程, 它是通过我们的 HTTP 请求, 通过浏览器发送到我们 Server, 再从 Server 返回, 最终拿到我们的资源;2. 这个过程中, 如果接口返回的数据速度更快, 那实际上对我们 Web 前端来说, 体验就会更好 。3. BS架构 与 CS架构1. BS架构:1. B/S架构即 浏览器和服务器架构模式 。2. B/S 的特征和基本结构:1. 在 B/S 结构中, 每个节点都分布在网络上, 这些网络节点可以分为 浏览器端、服务器端、中间件, 通过它们之间的链接和交互来完成系统的功能任务 。 三个层次的划分是从逻辑上分的, 在实际应用中多根据实际 物理网络 进行不同的物理划分 。2.1. 浏览器端: 即用户使用的浏览器, 是用户操作系统的接口, 用户通过浏览器界面向服务器端提出请求, 并对服务器端返回的结果进行处理并展示, 通过界面可以将系统的逻辑功能更好的表现出来 。2.2. 服务器端: 提供数据服务, 操作数据, 然后把结果返回中间层, 结果显示在系统界面上 。2.3. 中间件: 这是运行在浏览器和服务器之间的 。 这层主要完成系统逻辑, 实现具体的功能, 接受用户的请求并把这些请求传送给服务器, 然后将服务器的结果返回给用户, 浏览器端和服务器端需要交互的信息是通过中间件完成的 。2. CS架构1. 服务器-客户机; C/S结构通常采取两层结构 。 服务器负责数据的管理, 客户机负责完成与用户的交互任务 。
图片示例


2. 浏览器的一个请求从发送到返回都经历了什么

 1. 用户首先在浏览器输入 url, 浏览器会将这个 url 拆分解析 domain 。2. 最终将 domain 发送到我们的 DNS 服务器上, DNS 服务器会根据 domian 去查询 host 对应的 IP 地址, 再把 IP 地址返回给我们的浏览器 (浏览器缓存 -> 系统缓存 -> 路由器缓存 -> ISP DNS缓存 -> 递归搜索) 。3. 浏览器持有 IP 地址之后, 就知道要将请求发送到哪个地方去 。4. IP 以及一些相关的参数 会跟随我们的协议发送到网络中去 。5. 请求经过 局域网 -> 交换机 -> 路由器 -> 主干网络 到达我们的服务端 。6. 服务端它是有自己的架构的, 比如 MVC 架构:1. 请求会首先进入 Controller 中, 在 Controller 中进行相关的逻辑处理, 然后去调用我们的 Model 层 。2. Model 层是负责和数据进行交互的, 在数据进行交互的过程中,  MOdel 层会去读取 redis+db 数据库中的数据 。3. 获取数据之后, 最终将我们渲染好的页面 通过 View 层, 返回给我们的网络 。7. 这个时候一个 http 请求的 Response 就从我们的服务端又回到了浏览器 。8. 浏览器主要是做一个 render 的过程: render 的过程就是 浏览器根据返回的内容进行渲染的过程 。

3. 浏览器的一个请求从发送到返回的这个过程, 我们都有那些点可以进行优化:

 1. DNS 服务器(通过缓存, 减少 dns 查询时间)1. 在浏览器层面或者路由层面, 对 DNS 服务器相关信息做缓存优化: 这样的话我们访问 DNS 的时间就会缩短很多 (浏览器缓存 -> 系统缓存 -> 路由器缓存 -> ISP DNS缓存 -> 递归搜索) 。2. 网络请求的过程(走最近的网络环境):   涉及到 带宽/ 网络的选择 / 缓存1. 使用 CDN, 实际上它就解决了 网络的选择 / 缓存 的问题;1. 但是在访问 CDN 的过程中会有涉及到一个问题: 就是 CDN 它是请求静态资源使用的, 那么对于静态资源来说, 实际上我们请求中所携带的 cookie 是没有用的; 所以 CDN 的域名不要与主站的域名一样, 这样的话就能够防止访问 CDN 的时候携带主站 cookie 的问题 。3. 浏览器(静态资源的缓存):1. 对于一些接口是没有办法使用 CDN 的, 对于这样的接口我们可以在浏览器端做一些 缓存策略 的 。4. http 请求 大小:1. 我们的一个 http 请求能够控制它相对较小的时候, 那么访问的速度相对也是会快一些的 。5. 网络环境的损耗(合并网络请求, 减少 http 请求):1. 每一个 http 请求都会去走网络环境层到达我们的服务器, 实际上每次请求都会有网络环境的损耗, 我们将多次 http 请求合并为一次, 从而减少网络损耗 。6. 浏览器端的渲染过程:1. 使用框架的相关 服务端渲染 的方案 。

4. 深入理解 http 请求过程, 是前端性能优化的核心 。

之前有整理过部分知识点, 现在将整理的相关内容, 验证之后慢慢分享给大家; 这个专题 就是 “前端性能优化” 的相关专栏; 不积跬步,无以至千里, 戒焦戒躁 。

如果对你有所帮助,喜欢的可以点个关注, 必然回关; 文章会一直持续打磨 。

有什么想要了解的前端知识吗? 可以评论留言, 会及时跟进分享所提内容 。

整理知识点不易, 每次都是在工作繁忙之余夜深人静之时整理, 无论知识点是大是小, 都会验证后再分享, 以防自己发表的文章给大家造成误导 。如有问题还望不吝赐教,本人会及时更改 (本文原创, 如需转载,请注明出处) 。

性能优化: http 请求的过程及潜在的性能优化点相关推荐

  1. 5. SQL Server数据库性能监控 - 当前请求

    5. SQL Server数据库性能监控 - 当前请求 原文:5. SQL Server数据库性能监控 - 当前请求 对于在线运行的系统,当前数据库性能监控,通常监视以下几点: (1) 是否有阻塞 ( ...

  2. 构建高性能ASP.NET站点之二 优化HTTP请求(前端)

    上一篇文章主要讲述了请求一个页面的过程,同时也提出了在这个过程中的一些优化点,本篇就开始细化页面的请求过程并且提出优化的方案.同时,在上篇文章中,不少朋友也提出了一些问题,在本篇中也对这些问题给出了回 ...

  3. 项目优化经验mdash;mdash;垃圾回收导致的性能问题[z]

    谈谈最近优化一个网站项目的经验,首先说一下背景情况: 1) 在页面后台代码中我们把页面上大部分的HTML都使用字符串来拼接生成然后直接赋值给LiteralControl. 2) 网站CPU很高,基本都 ...

  4. Java 性能优化实战工具实践:如何获取代码性能数据?

    首先解答一下上一课时的问题.磁盘的速度这么慢,为什么 Kafka 操作磁盘,吞吐量还能那么高? 这是因为,磁盘之所以慢,主要就是慢在寻道的操作上面.Kafka 官方测试表明,这个寻道时间长达 10ms ...

  5. Mysql进阶优化篇01——四万字详解数据库性能分析工具(深入、全面、详细,收藏备用)

    前 言 ?? 作者简介:,长跑型选手,立志坚持写10年博客,专注于java后端 ?? 专栏简介:mysql进阶,主要讲解mysql数据库进阶知识,包括索引.数据库调优.分库分表等 ?? 文章简介:本文 ...

  6. 并发500,2000次请求,从10s到300ms的接口优化,我做了哪些事

    小程序的接口刚写完时,一个接口的调用时间大概是700ms左右,100并发的100请求的压测结果是9s,用的都是项目的底层方法(有缓存),框架是ci.而上线城市服务的三星基准是500并发500ms以下, ...

  7. 【性能优化】404- 从 12.67s到1.06s 性能优化实战

    作者:jerryOnlyZRJ 来源:https://juejin.im/post/5b6fa8c86fb9a0099910ac91 本文是对之前同名文章的修正,将所有webpack3的内容更新为we ...

  8. logstash 吞吐量优化_1002-谈谈ELK日志分析平台的性能优化理念

    在生产环境中,我们为了更好的服务于业务,通常会通过优化的手段来实现服务对外的性能最大化,节省系统性能开支:关注我的朋友们都知道,前段时间一直在搞ELK,同时也记录在了个人的博客篇章中,从部署到各个服务 ...

  9. 基于英特尔® 优化分析包(OAP)的 Spark 性能优化方案

    简介: Spark SQL 作为 Spark 用来处理结构化数据的一个基本模块,已经成为多数企业构建大数据应用的重要选择.但是,在大规模连接(Join).聚合(Aggregate)等工作负载下,Spa ...

最新文章

  1. 二叉树的5种遍历方式
  2. 系统集成项目管理工程师-项目采购管理笔记
  3. python读excel字体颜色_python 设置 excel 单元格颜色填充和字体效果
  4. c#中 cmd.parameters.add() 方法的问题
  5. 【FBI WARNING】一些Noip的黑科技 持续整理!
  6. css文件修改后没变化 static_Go Web编程使用Go语言创建静态文件服务器
  7. 33--二维数组中的查找
  8. 心理学系列:《乌合之众》读书笔记
  9. Ubuntu环境下NFS服务器搭建
  10. Python 自学笔记(教程)(七)
  11. 去掉input自动填充的黄色背景
  12. 使用pandas的话,如何直接删除这个表格里面X值是负数的行?
  13. Guava限流器RateLimiter
  14. 文件下载(解决中文文件名下载乱码问题)(二)
  15. java 常用类 - 大数据运算
  16. 看了下李航的《统计学习方法》
  17. 数据吞吐量高达800亿条!实时计算在贝壳找房的应用实践
  18. 中国古代历史发展的转折点
  19. JavaScript正则全面解析
  20. 第一次整理 数学建模入门 小石老师

热门文章

  1. 大学生提高计算机应用能力,大学生计算机应用能力的培养
  2. 【转】Hibernate中session的clear(),flush(),evict()方法详解
  3. Python并发编程系列之多线程
  4. 这15部评分9.0以上纪录片,让你放假后足不出户就可以看遍世界!(附链接)
  5. 【AI视野·今日CV 计算机视觉论文速览 第174期】Tue, 7 Jan 2020
  6. 量子计算之量子压缩编码(dense coding)
  7. 无线视频监控系统设计
  8. Hbase报错解决方法ERROR: KeeperErrorCode = NoNode for /hbase/master
  9. 满足5G无线基础设施的故障安全要求
  10. Ubuntu安装搜狗输入法后修改默认英文输入状态的方法