青训营X豆包MarsCode 之性能优化 ｜ 豆包MarsCode AI 刷题

面试题：

URL：url - 资源定位符

//http://www.zhaowa.com - http协议
//追问：http和TCP的区别
//1.分类：OSI |http - 应用层 TCP - 传输层
//2.关联：http基于TCP实现连接 =>http请求 发送 断开
  //优化？-网络层面 ：1.0 1.1 2.0版本迭代

  //=>UDP vs TCP -三次握手 四次挥手 慢的原因
  //=> http1.1 keep-alive-保持通路建立的畅通--连接一直存在-不用反复建立连接=> 进行了优化
  //http2.0多条并发请求复用同一条通路，利用frame结构+包头优化进行效率提升

//3.http - 无状态 TPC - 有状态
//  优化点：
	//=> socket连接，封装化的TCP

域名解析

//1.浏览器缓存中 - 浏览器中缓存一段时间
//2. 系统缓存中 - 系统中找缓存 - HOST（电脑强行写路由表）
//3. 路由器缓存 - 各级路由缓存域名信息
//4. 运营商地方总站点
//5.根服务器
  //优化：
   //=> CDN - content delivery network
	//1.分发节点网络
 	//2.LB -负载均衡 
	
   //=>缓存=>各级缓存=>   浏览器缓存
	//强缓存：直接本地缓存
	//协商缓存：

web服务器

//ngnix |静态 or 动态
//反向代理 => 类似于中介
//1.接收请求 => 给服务端传递信息
//2.利用反向代理服务信息归纳和转发
//3.条件匹配

服务 网络优化

//面试：并发优化 10个请求，只能同时执行三个
//分析：
//输入；max参数=>可以传输的最大个数
//存储：reqpool - 并发池
//思路：塞入 + 执行
class LimitPromise(){
    constructor(max){
        //异步并发上线
        this._max=max|| 6
        //当前正在执行的任务数量
        this._count= 0
        //等待执行的任务队列
        this._taskQueue= []
        //单例
        this.instance=null
    }
    run(caller){
	//主入口
    //输入：外部需要添加的请求
    //输出：返回队列处理的porimise
        return 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 getInstance(max){
        if(!this.instance){ //是否有实例生成
            this.instance= new LimitPromise(max)
        }
        return this.instance
    }
}

浏览器渲染

浏览器执行顺序

主线：HTML=>DOM +CSSOM => renderTree +js =>layout =>paint

支线：

repaint(重绘) -改变文本、颜色

reflow(重排) -元素几何尺寸、布局

=>优化点：减少重绘、避免重排

脚本执行时- JS

Mark & Sweep => 触达标记，锁定情况、未触达直接抹掉

//内存分配：申明变量、函数、对象
//内存使用：读写内存
//内存释放：GC垃圾回收

const zhaowa:{
	js:{
		performance:'good'
    }
}
//内存分配
const _obj=zhaowa
//引用源被替换 - 暂未GC
zhaowa='best'
//深入层级做引用 - 暂未GC
const _class=obj.js
//引用方发生替换- 暂未GC
_obj='over'

_class=null
//GC完成销毁zhaowa

打包配置

 // 1.懒加载 - 分trunk - 非必要不加载
 //2.按需引用 - CDN - 非必要不引入
 //3.抽离公共 - 相同项目合并公用- 非必要不新增