前端性能优化 http请求的过程及潜在的优化点
这是请求整体的流程图,用户首先在浏览器中输入一个 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 到看到页面的一个过程。那么在这个过程中,有哪些点,可以进行一个前端的性能优化呢
1、dns 是否可以通过缓存减少 dns 查询时间?
2、网络请求的过程走最近的网络环境?
3、相同的静态资源是否可以缓存?
4、能否减少请求 http 请求大小?
5、减少 http 请求的数量
6、服务端渲染
真正的是结合业务,然后进行相应的优化,所以结论是 深入理解 http 请求的过程是前端性能优化的核心;
前端性能优化 http请求的过程及潜在的优化点的更多相关文章
- web前端性能意义、关注重点、测试方案、优化技巧
1.前段性能的意义 对于访问一个网站,最花费时间的并不是后端应用程序处理以及数据库等消耗的时间,而是前端花费的时间(包括请求.网络传输.页面加载.渲染等).根据web优化的黄金法则: 80%的最终用户 ...
- http请求的过程及潜在的性能优化点
web前端的看富于部署过程 开发者将开发的代码发布到远程的服务器(webserver/cdn),用户通过访问浏览器输入相应的网址,浏览器向远程服务器发送请求,动态的增量式的加载资源 web前端就是一个 ...
- 如何提升Web前端性能?
什么是WEB前端呢?就是用户电脑的浏览器所做的一切事情.我们来看看用户访问网站,浏览器都做了哪些事情:输入网址 –> 解析域名 -> 请求页面 -> 解析页面并发送页面中的资源请求 ...
- 前端性能优化成神之路—资源合并与压缩减少HTTP请求
资源合并与压缩减少HTTP请求的概要 资源合并与压缩减少HTTP请求主要的两个优化点是减少HTTP请求的数量和减少请求资源的大小 http协议是无状态的应用层协议,意味着每次http请求都需要建立通信 ...
- Web前端性能优化教程01:减少Http请求
性能黄金法则 只有10%-20%的最终用户响应时间花在接收请求的HTML文档上,剩下的80%-90%时间花在HTML文档所引用的所有组件(图片,script,css,flash等等)进行的HTTP请求 ...
- 前端性能优化-减少http请求,dns预解析,减少repaint和reflow
前端性能优化方法: 一 . 减少http请求 (1)通过合并图片,减少请求,俗称css sprites(css精灵)css sprites (2)lazyload懒加载,在需要的时候再加载 1.定义: ...
- CSS3与页面布局学习总结(八)——浏览器兼容与前端性能优化
一.浏览器兼容 1.1.概要 世界上没有任何一个浏览器是一样的,同样的代码在不一样的浏览器上运行就存在兼容性问题.不同浏览器其内核亦不尽相同,相同内核的版本不同,相同版本的内核浏览器品牌不一样,各种运 ...
- 【前端构建】WebPack实例与前端性能优化
计划把微信的文章也搬一份上来. 这篇主要介绍一下我在玩Webpack过程中的心得.通过实例介绍WebPack的安装,插件使用及加载策略.感受构建工具给前端优化工作带来的便利. 壹 | Fisrt 曾几 ...
- 移动H5前端性能优化指南
移动H5前端性能优化指南 概述 1. PC优化手段在Mobile侧同样适用2. 在Mobile侧我们提出三秒种渲染完成首屏指标3. 基于第二点,首屏加载3秒完成或使用Loading4. 基于联通3G网 ...
随机推荐
- 11/10 <priorityQueue> 215 347
215. Kth Largest Element in an Array 快速排序法,选择一个数,比这个数大的交换到左边,比这个数小的交换到右边. class Solution { public in ...
- [LeetCode] 380. Insert Delete GetRandom O(1) 常数时间内插入删除和获得随机数
Design a data structure that supports all following operations in average O(1) time. insert(val): In ...
- nginx ubantu 安装步骤
Ubuntu14.04默认安装的是Nginx 1.4.6 如果已经安装,请先卸载sudo apt-get remove nginx最新的稳定版Nginx 1.6.0在ubuntuupdates ppa ...
- STM32Cube生成的HID项目,找不到hUsbDeviceFS
症状 在main中尝试发消息给上位机: 解决方法 在STM32生成的HID项目里,默认是没有把hUsbDeviceFS导出的,需要修改usb_device.h文件,在USER CODE BEGIN V ...
- addpath(),genpath()
clear all:clear clc: addpath(): 打开不在同一目录下的文件 addpath('sparse-coding');%sparse-coding,SIFT均表示路径,此目录下的 ...
- ScheduledThreadPoolExecutor周期任务或延时任务线程池
ScheduledThreadPoolExecutor可以代替timer,timer的缺点是一个timer启动一个线程,如果任务数量很多,会创建很多线程,不推荐使用. ScheduledThreadP ...
- Nginx php上传文件大小的设置
- vue组件、自定义指令、路由
1.vue组件 组件(Component)是 Vue.js 最强大的功能之一.组件可以扩展 HTML 元素,封装可重用的代码.组件系统让我们可以用独立可复用的小组件来构建大型应用,几乎任意类型的应用的 ...
- 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 ...
- 【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 ...