1.7 JS性能优化

从输入url到页面加载完成都做了些什么

输入

  URL - 资源定位符

http://www.zhaowa.com - http 协议

域名解析

    https://www.zhaowa.com => ip

    1. 切HOST? => 浏览器缓存映射、系统、路由、运营商、根服务器

    2. 实际的静态文件存放?

    大流量 => 多个IP地址、LB(负载均衡)、云服务

    访问延迟 => CDN - content delivery netWork

    缓存 => 各级缓存 => 浏览器缓存 - 强缓存(expire、cache-control)、协商缓存(last-modify、etag)

http 与 TCP

1. http - 应用层  < = > TCP - 传输层

2. 关联 - http基于TCP实现连接 < = > UDP

     => 握手 & 挥手 (传输速率上较UDP低) => http请求建立、发送、断开

优化点:1.0 1.1 2.0

 => 1.0 vs 1.1 —— 复用连接(持久连接 - connection: keep-alive)、队头拦截(pipelining)

 => 1.1 vs 2.0 —— 头部空间(协议层消除头部重复部分)、格式(二进制优化)、多路复用(复用通路,无并发限制)

https://www.zhaowa.com - https协议

追问:http 和 https

 1. https = http + SSL(TLS) => 位于TCP协议与应用层协议之间

 2. 实现原理 - 原理图

 优化 —— 安全性建立导致网络请求加载时间延长

 => 合并请求 长连接

节流 防抖

* 编译 & 渲染

打包优化 => 压缩、分割、按需加载、异步加载 => 工程化

渲染 => 浏览器原理

手写并发控制

分析:

    输入: max - 最大的同时处理量

    存储:reqpool - 并发池

    思路:执行 => 回调 => 塞入  —— 池

class LimitPromise {constructor(max) {// 异步“并发”上限this._max = max || 6// 当前正在执行的任务数量this._count = 0// 等待执行的任务队列this._taskQueue = []}run(caller) {// 主入口// 输入:外部要添加的请求// 输出:返回队列处理的promisereturn new Promise((resolve, reject) => {// 创建处理任务const task = this._createTask(caller, resolve, reject)// 当前的队列任务是否达到上限if (this._count >= this._max) {this._taskQueue.push(task)} else {task()}})}_createTask(caller, resolve, reject) {return () => {caller().then(res => {resolve(res)}).catch(err => {reject(err)}).finally(() => {this._count--if (this._taskQueue.length) {const task = this._taskQueue.shift()task()}})this._count++}}static instance = nullstatic getInstance(max) {if (!LimitPromise.instance) {LimitPromise.instance = new LimitPromise(max)}return LimitPromise.instance}}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/471071.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Linux基础1

Linux基础1 Linux基础1学习笔记 ‍ 声明&#xff01; ​​​学习视频来自B站up主 泷羽sec 有兴趣的师傅可以关注一下&#xff0c;如涉及侵权马上删除文章 笔记只是方便各位师傅的学习和探讨&#xff0c;文章所提到的网站以及内容&#xff0c;只做学习交流&#xff0c;其他…

【安全通信】告别信息泄露:搭建你的开源视频聊天系统briefing

文章目录 前言1.关于briefing2.本地部署briefing3.使用briefing4.cpolar内网穿透工具安装5.创建远程连接公网地址6.固定briefing公网地址 前言 在这个信息爆炸的时代&#xff0c;视频聊天几乎成了我们日常沟通的标配。但你是否曾在视频会议中感到不安&#xff0c;担心自己的私…

深度学习——优化算法、激活函数、归一化、正则化

文章目录 &#x1f33a;深度学习面试八股汇总&#x1f33a;优化算法方法梯度下降 (Gradient Descent, GD)动量法 (Momentum)AdaGrad (Adaptive Gradient Algorithm)RMSProp (Root Mean Square Propagation)Adam (Adaptive Moment Estimation)AdamW 优化算法总结 经验和实践建议…

Thread类及常见方法

目录 一、Thread常见构造方法 二、Thread常见属性 三、Thread常见方法 start() 获取当前线程 中断线程 join() 一、Thread常见构造方法 Thread类是JVM用来管理线程的一个类&#xff0c;每个线程都有唯一一个Thread对象与之对应&#xff0c;JVM会将这些对象组织起来&…

优化时钟网络之时钟抖动

Note&#xff1a;文章内容以Xilinx 7系列FPGA进行讲解 1、什么是时钟抖动 时钟抖动就是时钟周期之间出现的偏差。比如一个时钟周期为10ns的时钟&#xff0c;理想情况下&#xff0c;其上升沿会出现在0ns&#xff0c;10ns&#xff0c;20ns时刻&#xff0c;假设某个上升沿出现的时…

Vector 深度复制记录

有的时候数据得复制过去 有个疑问,自动分配内存吗? 不是估计有变化, 得在看看 指针作为值复制了 … … 挺好,修改原有的值 x86 的 SIM 程序 还有点问题 ; 无法直接绕过硬件错误 。。。 x86 gdb 没有问题 就是运行出现了问题&#xff0c;怎么解决&#xff1b;正常初始化没有问题…

贪心算法day03(最长递增序列问题)

目录 1.最长递增三元子序列 2.最长连续递增序列 1.最长递增三元子序列 题目链接&#xff1a;. - 力扣&#xff08;LeetCode&#xff09; 思路&#xff1a;我们只需要设置两个数进行比较就好。设a为nums[0]&#xff0c;b 为一个无穷大的数&#xff0c;只要有比a小的数字就赋值…

基于Java Web的传智播客crm企业管理系统的设计与实现

项目描述 临近学期结束&#xff0c;还是毕业设计&#xff0c;你还在做java程序网络编程&#xff0c;期末作业&#xff0c;老师的作业要求觉得大了吗?不知道毕业设计该怎么办?网页功能的数量是否太多?没有合适的类型或系统?等等。这里根据疫情当下&#xff0c;你想解决的问…

马斯克万卡集群AI数据中心引发的科技涟漪:智算数据中心挑战与机遇的全景洞察

一、AI 爆发重塑数据中心格局 随着AI 技术的迅猛发展&#xff0c;尤其是大模型的崛起&#xff0c;其对数据中心产生了极为深远的影响。大模型以其数以亿计甚至更多的参数和对海量数据的处理需求&#xff0c;成为了 AI 发展的核心驱动力之一&#xff0c;同时也为数据中心带来了…

机器学习在医疗健康领域的应用

&#x1f493; 博客主页&#xff1a;瑕疵的CSDN主页 &#x1f4dd; Gitee主页&#xff1a;瑕疵的gitee主页 ⏩ 文章专栏&#xff1a;《热点资讯》 机器学习在医疗健康领域的应用 机器学习在医疗健康领域的应用 机器学习在医疗健康领域的应用 引言 机器学习概述 定义与原理 发展…

学法减分交管12123模拟练习小程序源码前端和后端和搭建教程

交管推出个学法减分&#xff0c;每个驾驶员可以把被扣的6分&#xff0c;以看视频答题的形式学习回来&#xff0c;然后答题这个一共二十道题每道题60秒&#xff0c;有好多人不会&#xff0c;用咱们的小程序就可以模拟练习强化练习&#xff0c;还有拍照识别题目找到正确答案&…

AI大模型开发架构设计(18)——基于大模型构建企业知识库案例实战

文章目录 1 LLM 大模型在工作中的实际应用以及局限性LLM 大模型工作中实际应用大模型2点局限性 2 基于大模型和向量数据库的企业级知识库架构剖析向量数据库向量数据库选型知识库文档检索增强(Retrieval Augmented Generation)向量数据库应用技术总体架构向量数据库应用离线索引…

jmeter介绍、使用方法、性能测试、现参数化和数据驱动、分布式测试、压力测试、接口测试

目录 1.JMeter的组件介绍 2.JMeter介绍和使用方法 3.使用JMeter进行性能测试 4.JMeter如何实现参数化和数据驱动 5.使用JMeter进行分布式测试 6.使用JMeter完成压力测试 7.使用JMeter完成接口测试 下载并安装JMeter&#xff1a;从官方网站&#xff08;https://jmeter.ap…

Zotero 6.0 安装包及安装教程

Zotero的界面友好&#xff0c;操作简单&#xff0c;对于科研小白来说&#xff0c;是一款非常实用的文献管理软件。它不仅可以帮助用户精确获取、整理、引用文献&#xff0c;而且在学术实践中不可或缺的一环。 安 装 步 骤 压缩包文件&#xff0c;鼠标右击解压得到安装包。 仅用…

Docker 篇-Docker 详细安装、了解和使用 Docker 核心功能(数据卷、自定义镜像 Dockerfile、网络)

&#x1f525;博客主页&#xff1a; 【小扳_-CSDN博客】 ❤感谢大家点赞&#x1f44d;收藏⭐评论✍ 文章目录 1.0 Docker 概述 1.1 Docker 主要组成部分 1.2 Docker 安装 2.0 Docker 常见命令 2.1 常见的命令介绍 2.2 常见的命令演示 3.0 数据卷 3.1 数据卷常见的命令 3.2 常见…

华为大变革?仓颉编程语言会代替ArkTS吗?

在华为鸿蒙生态系统中&#xff0c;编程语言的选择一直是开发者关注的焦点。近期&#xff0c;华为推出了自研的通用编程语言——仓颉编程语言&#xff0c;这引发了关于仓颉是否会取代ArkTS的讨论。本文将从多个角度分析这两种语言的特点、应用场景及未来趋势&#xff0c;探讨仓颉…

随时随地编码:香橙派Zero3上安装Code Server远程开发指南

文章目录 前言1. 添加镜像源2. 部署Code server3. 安装内网穿透工具4. 配置公网地址5. 配置固定公网地址 前言 本文主要介绍如何在刷了CasaOS轻NAS系统的香橙派Orange Pi Zero3中&#xff0c;使用Docker本地部署Code server&#xff0c;并结合cpolar内网穿透实现远程使用浏览器…

npm list @types/node 命令用于列出当前项目中 @types/node 包及其依赖关系

文章目录 作用示例常用选项示例命令注意事项 1、实战举例**解决方法**1. **锁定唯一的 types/node 版本**2. **清理依赖并重新安装**3. **设置 tsconfig.json 的 types**4. **验证 Promise 类型支持** **总结** npm list types/node 命令用于列出当前项目中 types/node 包及其…

第一个 Flutter 项目(1)共46节

前端开发工具vs code&#xff0c;安装Flutter sdk&#xff0c;如果你的下载速度比较慢&#xff0c;可以选择这个&#x1f604; flutter sdk 解压码&#xff1a;stwq 配置可以看这Flutter 新建工程一直等待 解决办法-CSDN博客 如果你是新的 Flutter 开发者&#xff0c;我们建…

比ChatGPT更酷的AI工具

相较于寻找比ChatGPT更酷的AI工具&#xff0c;这听起来似乎是个挑战&#xff0c;因为ChatGPT已经以它强大的综合性能在AI界大名鼎鼎。然而&#xff0c;每个工具都有其独特的优势&#xff0c;特别是在特定的应用场景下&#xff0c;其他AI工具可能会展现出与ChatGPT不同的魅力。接…