欢迎来到尧图网

客户服务 关于我们

您的位置:首页 > 教育 > 培训 > 1.7 JS性能优化

1.7 JS性能优化

2024/11/30 12:37:08 来源:https://blog.csdn.net/m0_38066007/article/details/143745795  浏览:    关键词: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}}

版权声明:

本网仅为发布的内容提供存储空间,不对发表、转载的内容提供任何形式的保证。凡本网注明“来源:XXX网络”的作品,均转载自其它媒体,著作权归作者所有,商业转载请联系作者获得授权,非商业转载请注明出处。

我们尊重并感谢每一位作者,均已注明文章来源和作者。如因作品内容、版权或其它问题,请及时与我们联系,联系邮箱:809451989@qq.com,投稿邮箱:809451989@qq.com