CS架构:比如我们的代码开发好,打包成apk,发布到平台,那么最终怎么运行到用户的手机上呢,用户首先需要从相关的应用商城下载这个apk包,并且运行这个 apk 包,那么这个 apk 包就会被解压,最后运行在安卓的操作系统上。实际上对于最终访问的 app 来说呢,他访问的资源在安卓系统本地是有一份的。他访问的是本地的一些资源。这就是 CS 架构
BS架构:BS架构是不一样的,就好像 web 前端不一样的地方。我们开发完前端代码之后,也有一个发布的过程,这个跟 CS 架构不一样,他不是发布一个安装包,他是把我们的代码发布到远程的服务器上,以及我们的 CDN 上。运行的过程是用户打开浏览器,然后输入相应的网址,这个时候我们的浏览器才去向我们的远程服务器发出请求,动态的增量式的加载我们的静态资源。因此产生了一个重要的问题
浏览器的一个请求从发送到返回都经历了什么?我们了解了这个过程就能从中去找到优化点。将这个请求的时间去缩短。从而加快返回的速度,提升性能。

这是请求整体的流程图,用户首先在浏览器中输入一个 url ,浏览器的核心代码会把这个 url 进行拆分解析,最终将这个 domain 发送到 dns 服务器上。dns 服务器会根据这个 domain 去查询 host 对应的 ip 地址,从而将 ip 地址返回给我们的浏览器,浏览器知道 ip 地址之后,就知道这个请求发布到哪个地方去。就跟随我们的协议以及参数,最终发送到网络中去。经过我们的局域网,交换机,路由器,主干网络。然后最终到达服务端,服务端是有一个 MVC 架构的,请求会到我们的 Controller 中,在 Controller 进行一个逻辑处理,以及请求的分发,然后去调用我们的 Model 层, Model 层是负责和数据进行交互的,在数据进行交互的过程中,Model 层会去读取我们的 redis + db 的数据,获取到数据之后,最终将我们渲染好的页面通过 View 层返回给我们的网络,这个时候一个 http response 又回到我们的浏览器,那么浏览器做一个 render 的过程。这个render 过程就是浏览器渲染的过程,会生成 dom 树和 css 树,然后两者结合,生成一个页面,然后再进行动态js的运行。这就是一个 url 到看到页面的一个过程。那么在这个过程中,有哪些点,可以进行一个前端的性能优化呢

首先 dns 这块能不能进行一个优化呢?我们可以在这层做一个浏览器缓存。这样的话,返回 dns 的时间就可以缩短很多
然后就是一个网络请求的过程,网络请求的过程涉及到带宽,涉及到网络的选择,涉及到缓存,那么在这个过程中,我们有没有什么优化的点,实际在网络请求的过程中,很多公司基本上都会使用到 CDN , 使用了 CDN 就实际上解决了网络选择以及缓存的问题。但是在访问 CDN 的过程中还会涉及到一个问题。就是 CDN 是请求静态资源用的。那么对于静态资源来说,实际上,我们请求所带的 cookie 是没有用的。实际上在请求 CDN 的过程中,能把 cookie 给去掉。但是很多时候我们 CDN 域名会弄得跟网站本身的域名相同。那么就会将主站的一些 cookie 。通过我们的网络携带到 CDN 的服务端。这个实际上是对网络无畏的损耗,所以我们的 CDN 的域名要非常注意,这个 CDN 的域名不要和主站的一样。这样的话就可以放置访问 CDN 的时候还携带主站 cookie 这个问题,使用 CDN 可以解决我们静态资源,网络选择,以及缓存的问题。但是对于一些接口是没法使用 CDN 的。实际上可以在浏览器上做缓存
除了缓存,路径选择,带宽也是非常重要的一点,如果一个 http 请求的大小会小一点,那么返回的速度相对会快一些。所以如何减少 http 请求的大小也是整个优化中非常重要的一点
另外每一个 http 请求都会经过网络环境到达服务器。实际上每次请求都有一个网络环境的损耗。那么能否将多次 http 请求合并成一次,从而减少相同的网络损耗呢
最后就是浏览器端的渲染过程。对于现在的一些大型框架来说,比如 react,vue 来说。这样的框架,他的模板都是在浏览器端进行渲染的,不是直出的 html ,而是要通过相应的框架代码才能渲染出我们的页面。这个渲染过程,对于首屏就有很大的损耗。这个其实是不利于前端的性能的。在这个情况下,业界就会有一个服务端渲染的方案,在服务端进行这个 html 渲染,从而将这个 html 直出到浏览器端。而不是在浏览器端进行渲染,所以渲染这层,可以进行服务端渲染以及渲染的方案。
上面这些点就是 http 请求中细节的优化点,了解这整个过程,从而就发现一些潜在的优化点
1、dns 是否可以通过缓存减少 dns 查询时间?
2、网络请求的过程走最近的网络环境?
3、相同的静态资源是否可以缓存?
4、能否减少请求 http 请求大小?
5、减少 http 请求的数量
6、服务端渲染

真正的是结合业务,然后进行相应的优化,所以结论是 深入理解 http 请求的过程是前端性能优化的核心;

前端性能优化 http请求的过程及潜在的优化点的更多相关文章

  1. web前端性能意义、关注重点、测试方案、优化技巧

    1.前段性能的意义 对于访问一个网站,最花费时间的并不是后端应用程序处理以及数据库等消耗的时间,而是前端花费的时间(包括请求.网络传输.页面加载.渲染等).根据web优化的黄金法则: 80%的最终用户 ...

  2. http请求的过程及潜在的性能优化点

    web前端的看富于部署过程 开发者将开发的代码发布到远程的服务器(webserver/cdn),用户通过访问浏览器输入相应的网址,浏览器向远程服务器发送请求,动态的增量式的加载资源 web前端就是一个 ...

  3. 如何提升Web前端性能?

    什么是WEB前端呢?就是用户电脑的浏览器所做的一切事情.我们来看看用户访问网站,浏览器都做了哪些事情:输入网址 –> 解析域名 -> 请求页面 -> 解析页面并发送页面中的资源请求 ...

  4. 前端性能优化成神之路—资源合并与压缩减少HTTP请求

    资源合并与压缩减少HTTP请求的概要 资源合并与压缩减少HTTP请求主要的两个优化点是减少HTTP请求的数量和减少请求资源的大小 http协议是无状态的应用层协议,意味着每次http请求都需要建立通信 ...

  5. Web前端性能优化教程01:减少Http请求

    性能黄金法则 只有10%-20%的最终用户响应时间花在接收请求的HTML文档上,剩下的80%-90%时间花在HTML文档所引用的所有组件(图片,script,css,flash等等)进行的HTTP请求 ...

  6. 前端性能优化-减少http请求,dns预解析,减少repaint和reflow

    前端性能优化方法: 一 . 减少http请求 (1)通过合并图片,减少请求,俗称css sprites(css精灵)css sprites (2)lazyload懒加载,在需要的时候再加载 1.定义: ...

  7. CSS3与页面布局学习总结(八)——浏览器兼容与前端性能优化

    一.浏览器兼容 1.1.概要 世界上没有任何一个浏览器是一样的,同样的代码在不一样的浏览器上运行就存在兼容性问题.不同浏览器其内核亦不尽相同,相同内核的版本不同,相同版本的内核浏览器品牌不一样,各种运 ...

  8. 【前端构建】WebPack实例与前端性能优化

    计划把微信的文章也搬一份上来. 这篇主要介绍一下我在玩Webpack过程中的心得.通过实例介绍WebPack的安装,插件使用及加载策略.感受构建工具给前端优化工作带来的便利. 壹 | Fisrt 曾几 ...

  9. 移动H5前端性能优化指南

    移动H5前端性能优化指南 概述 1. PC优化手段在Mobile侧同样适用2. 在Mobile侧我们提出三秒种渲染完成首屏指标3. 基于第二点,首屏加载3秒完成或使用Loading4. 基于联通3G网 ...

随机推荐

  1. 11/10 <priorityQueue> 215 347

    215. Kth Largest Element in an Array 快速排序法,选择一个数,比这个数大的交换到左边,比这个数小的交换到右边. class Solution { public in ...

  2. [LeetCode] 380. Insert Delete GetRandom O(1) 常数时间内插入删除和获得随机数

    Design a data structure that supports all following operations in average O(1) time. insert(val): In ...

  3. nginx ubantu 安装步骤

    Ubuntu14.04默认安装的是Nginx 1.4.6 如果已经安装,请先卸载sudo apt-get remove nginx最新的稳定版Nginx 1.6.0在ubuntuupdates ppa ...

  4. STM32Cube生成的HID项目,找不到hUsbDeviceFS

    症状 在main中尝试发消息给上位机: 解决方法 在STM32生成的HID项目里,默认是没有把hUsbDeviceFS导出的,需要修改usb_device.h文件,在USER CODE BEGIN V ...

  5. addpath(),genpath()

    clear all:clear clc: addpath(): 打开不在同一目录下的文件 addpath('sparse-coding');%sparse-coding,SIFT均表示路径,此目录下的 ...

  6. ScheduledThreadPoolExecutor周期任务或延时任务线程池

    ScheduledThreadPoolExecutor可以代替timer,timer的缺点是一个timer启动一个线程,如果任务数量很多,会创建很多线程,不推荐使用. ScheduledThreadP ...

  7. Nginx php上传文件大小的设置

  8. vue组件、自定义指令、路由

    1.vue组件 组件(Component)是 Vue.js 最强大的功能之一.组件可以扩展 HTML 元素,封装可重用的代码.组件系统让我们可以用独立可复用的小组件来构建大型应用,几乎任意类型的应用的 ...

  9. why’s kafka so fast

    As we all know that Kafka is very fast, much faster than most of its competitors. So what’s the reas ...

  10. 【ELK】elasticsearch中使用脚本报错:scripts of type [inline], operation [update] and lang [groovy] are disabled

    查看ID为2的这条数据: 使用更新命令: 使用脚本对年龄+5 curl -XPOST http://192.168.6.16:9200/my_new_index/user/2/_update?pret ...