度量标准 标准 首次有效绘制：主要内容呈现在页面上英雄渲染时间：用户最关心的内容渲染完成可交互时间：页面布局稳定，关键页面字体可见，主程序可用于处理用户输入，可以交互输入响应：界面响应用户输入所需时间感知速度指数：页面加载视觉变化速度自定义指标 目标 100毫秒界面响应时间与60FPS速度指标小于 1250...

ol{ padding-left: 1.2rem; } 参考指标白屏时间、首屏时间、整页时间、DNS时间、CPU占有率等 网络传输优化 浏览器缓存 浏览器响应请求步骤 重定向 —> 拉取缓存 —> DNS 查询 —> 建立 TCP 连接 —> 发起请求 —> 接收响...

tree-shaking：无用代码移除 Webpack2 引入的功能，DCE 的一个方法 tree-shaking：找到需要的代码，灌入最终结果DCE：找到执行不到的代码，AST里清除 如何评价 Webpack 2 新引入的 Tree-shaking 代码优化技术？ scope hoisting：作用域提升...

强缓存和协商缓存区别：使用本地缓存时，是否需要向服务器验证本地缓存的有效性。 强缓存 主要通过 http 请求头中的 Cache-Control 和 Expire 两个字段控制 Cache-Control = “public, max-age=xxx” 表示 xxx 秒内再次访问该资源，均使用本地缓存 问题：...

伪类：伪类：伪元素：伪元素：： 伪类盒子阴影box-shadow 属性实现盒子阴影效果，repaint 消耗较多，可以通过修改伪元素的透明度实现盒子阴影 实现原理： Before Animate/transition box-shadow 可以使用box-shadow属性来实现盒子阴影效果，但重...

原理分析跨域通信的手段，原理如下： 利用 script 标签的 src 属性实现跨域 通过将前端方法作为参数传递到服务端，服务端注入参数后返回，实现服务端向客户端通信 由于使用 script 标签的 src 属性，只支持 get 方法 实现流程 设定 script 标签 callback定义了一个函数名...

特点只用一个线程处理所有请求，事件驱动编程 店小二：线程顾客：http请求工作（迎客，找座，下单）：服务端代码，能够快速执行后厨做菜，客人吃饭：耗时的I/O操作后厨召唤，上菜：耗时I/O操作完成后的事件客人召唤，结账：耗时I/O操作完成后的事件工作（上菜，结账）：快速执行代码，需要等待耗时I/O完成；确切的说是收...

过程. DNS 解析：域名解析成 IP 地址. TCP 连接：TCP 三次握手. 发送 HTTP 请求. 服务器处理请求并返回 HTTP 报文. 浏览器解析渲染页面. 断开连接：TCP 四次挥手 URL统一资源定位符，用于定位互联网上资源，网址（https://www.w3school.com.cn） 语法规则：...

共同点 改变函数执行时的上下文调用 call 和 apply 的对象，必须是一个函数 callFunction.call(obj, param1, param2, …, paramN) 注意点： 调用 call，必须是函数 call 第一个参数是一个对象，function 的调用者，this 指向这个对象，...

监控方案通过监听全局 window.onerror 事件捕获运行时错误，上报采集端，展示结果 采集 Script Error Script Error，浏览器对跨域错误处于安全机制考虑的一种处理方式 跨域 页面和页面中应用的javascript文件不同源（协议、域名、端口不一致） 避免Script Er...