DF11G_0001的博客

防抖和节流：性能优化的方案之一。防止单一行为短时间被重复调用多次。 防抖：单次频发中只调用一次 以窗口滑动为例 function debounce(fn, sec) { // 防抖函数 let time = null return () => { // 返回一个函数 用闭包保存time 防止全局变量污染 if (time) { clearTimeout(time) time = setTimeout(fn, sec

一、浏览器构建对象模型(JavaScript,HTML,Style)： 构建DOM对象： 下载HTML文档，读取文本，将文本转换为单个的字符。 通过标签识别出节点对象，将节点对象构建为DOM树。 构建CSSOM对象： CSS同理，通过识别CSS文本形成CSSOM 构建渲染树： 浏览器根据DOM树和CSS树构建渲染树 二、布局和绘制(Layout,Paint,开销最高） 布局的特性： 渲染树只包含网页需要的节点，而布局计算每个节点精确的大爱小和位置（盒子模型）。 布局只关心 位置 和 ...

性能优化-响应： 交互响应：用户与页面的交互足够快 画面流畅（帧率FPS）：画面的帧数达到足够平滑流畅 异步请求速度：异步请求的加载足够快，最好小于1s。如果时间过长需要补充加载动画。 性能优化-加载： Speed Index：页面内容渲染所消耗的时间（速度指数） TTFB：请求发送到响应传回所需的时间 页面加载时间：所有资源加载完所需时间（瀑布图红线） 首次渲染：页面第一次出现内容所需的时间 RAIL测量模型 Response：响应 Animation：动画 Idol：空闲 Lo