一说到页面的性能优化，大家可能都会想起雅虎军规、2-5-8原则、3秒钟首屏指标等规则，这些规则在开发过程中不是强制要求的，但是有时候为了追求页面性能的完美和体验，就不得不对原有的代码进行修改和优化。...在M端提出3秒钟渲染完成首屏指标 基于第二点，首屏加载3秒内完成或使用Loading进行占位 基于联通3G网络平均338kb/s(2.71mb/s)，首屏资源不应超过1014kb M端因配置原因，除加载外渲染速度也是优化重点...Loading：进入页面时Loading 不可感知Loading：提前加载下一页 「压缩图像」：使用图像时选择最合适的格式和大小，然后使用工具压缩，同时在代码中用srcset来按需显示(「过度压缩图像大小影响图像显示效果...：首次加载不大于1014kb、不宽于640px PS切图时D端图像保存质量为80，M端图像保存质量为60 「减少Cookie」：Cookie会影响加载速度，静态资源域名不使用Cookie 「避免重定向」...标签：video、canvas、webgl CSS属性：opacity、transform、transition ❝「样式优化」 ❞ 「避免在HTML中书写style」 「避免CSS表达式」：CSS表达式的执行需跳出
一说到页面的性能优化，大家可能都会想起雅虎军规、2-5-8原则、3秒钟首屏指标等规则，这些规则在开发过程中不是强制要求的，但是有时候为了追求页面性能的完美和体验，就不得不对原有的代码进行修改和优化。...M端同样适用 在M端提出3秒钟渲染完成首屏指标 基于第二点，首屏加载3秒内完成或使用Loading进行占位 基于联通3G网络平均338kb/s(2.71mb/s)，首屏资源不应超过1014kb...不可感知Loading：提前加载下一页 「压缩图像」：使用图像时选择最合适的格式和大小，然后使用工具压缩，同时在代码中用srcset来按需显示(「过度压缩图像大小影响图像显示效果」)...，影响速度和效率 「尽量避免重置图像大小」：多次重置图像大小会引发图像的多次重绘，影响性能 「图像尽量避免使用DataURL」：DataURL图像没有使用图像的压缩算法，文件会变大，并且要解码后再渲染...，加载慢耗时长 执行处理不当会阻塞页面加载和渲染 ❝ 「渲染优化」 ❞ ❝ 「样式优化」 ❞ 「避免在HTML中书写style」 「避免CSS表达式」：CSS表达式的执行需跳出
一说到页面的性能优化，大家可能都会想起雅虎军规、2-5-8原则、3秒钟首屏指标等规则，这些规则在开发过程中不是强制要求的，但是有时候为了追求页面性能的完美和体验，就不得不对原有的代码进行修改和优化。...在M端提出3秒钟渲染完成首屏指标 基于第二点，首屏加载3秒内完成或使用Loading进行占位 基于联通3G网络平均338kb/s(2.71mb/s)，首屏资源不应超过1014kb M端因配置原因，除加载外渲染速度也是优化重点...Loading 不可感知Loading：提前加载下一页 「压缩图像」：使用图像时选择最合适的格式和大小，然后使用工具压缩，同时在代码中用srcset来按需显示(「过度压缩图像大小影响图像显示效果」) 使用...1014kb、不宽于640px PS切图时D端图像保存质量为80，M端图像保存质量为60 「减少Cookie」：Cookie会影响加载速度，静态资源域名不使用Cookie 「避免重定向」：重定向会影响加载速度...标签：video、canvas、webgl CSS属性：opacity、transform、transition ❝「样式优化」 ❞ 「避免在HTML中书写style」 「避免CSS表达式」：CSS表达式的执行需跳出
性能优化.png 所有的性能优化都围绕着两大层面两小层面实现，核心层面是网络层面和渲染层面，辅助层面是时间层面和体积层面，而辅助层面则充满在核心层面里。...这是一个古老配置，在webpack v2时已存在，不过现在webpack v4+已不推荐使用该配置，因为其版本迭代带来的性能提升足以忽略DllPlugin所带来的效益。...「所有静态资源走CDN」：开发阶段确定哪些文件属于静态资源 「把静态资源与主页面置于不同域名下」：避免请求带上Cookie 「内容分发网络」简称「CDN」，指一组分布在各地存储数据副本并可根据就近原则满足数据请求的服务器...CSS策略 避免出现超过三层的嵌套规则 避免为ID选择器添加多余选择器 避免使用标签选择器代替类选择器 避免使用通配选择器，只对目标节点声明规则 避免重复匹配重复定义，关注可继承属性 DOM策略 缓存DOM...script>设置async 回流重绘策略 缓存DOM计算属性 使用类合并样式，避免逐条改变样式 使用display控制DOM显隐，将DOM离线化 异步更新策略 在异步任务中修改DOM时把其包装成微任务
webpack打包 在资源请求的过程中，涉及到网络请求的，包括：HTTP、TCP、DNS。其中TCP、DNS前端能做的工作非常有限，因此「优化HTTP」就成为了首要任务。...比如说当使用「babel-loader」时，用 include 或 exclude 来帮我们避免不必要的转译。...（复杂的视图层会给这个阶段的 GPU 计算带来一些压力，在实际应用中为了优化动画性能，我们有时会手动区分不同的图层）。 css优化 浏览器解析css是从右往左匹配规则。我们要做到： 避免使用通配符。...避免逐条改变样式，使用类名去合并样式。 将DOM离线。也就是display: none 。 减少DOM操作 使用document.fragment来减少DOM操作。...节流 所谓的“节流”，是通过在一段时间内「无视后来产生的回调请求」来实现的。也就是说，一段时间内，以「第一个请求」为准。这段时间所有的其他请求都被忽略。
网络层中的 IP 协议会确定 IP 地址，并且指示了数据传输中如何跳转路由器。...强缓存中，当请求再次发出时，浏览器会根据其中的 expires 和 cache-control 判断目标资源是否“命中”强缓存，若命中则直接从缓存中获取资源，不会再与服务端发生通信。...避免使用通配符，只对需要用到的元素进行选择。 关注可以通过继承实现的属性，避免重复匹配重复定义。 少用标签选择器。如果可以，用类选择器替代。...浏览器在构建 CSSOM 的过程中，不会渲染任何已处理的内容。即便 DOM 已经解析完毕了，只要 CSSOM 不 OK，那么渲染这个事情就不 OK。...它被当做一个轻量版的 Document 使用，用于存储已排好版的或尚未打理好格式的XML片段。
image.png 页面生成流水线 如上图页面生成过程中进程之间的关系如下： 当用户在地址栏输入地址时，浏览器主进程处理输入信息（是输入内容还是请求url，如果是url，拼装协议），回车后的事件触发（...直接发送给渲染进程（浏览器进程确认文档被提交后，会建立网络进程和渲染进程的数据通道） 渲染进程收到提交文档消息后，开始不断接受网络进程数据进行渲染流程 渲染进程在合成阶段利用GPU进程快速生成位图，一旦所有的图块都被栅格化完成...，GPU进程完成一帧图像的绘制，其中IO线程主要负责和网络进程、浏览器主进程之间的交互将任务添加到消息队列尾部，主线程通过循环机不断地消费任务队列中的任务，按照渲染的时间顺序，渲染流水线可分为如下几个子阶段...，DOM就是对html文档结构的一个表述 image.png DOM树 DOM是生成页面的基本数据结构 DOM提供改变文档、样式、内容的接口 DOM是一道安全防线，在解析过程中如果有不安全的内容会被拒绝...解析器解析到内联脚本，暂停dom解析，js引擎执行脚本，修改已生成的dom结构、内容，脚本执行结束，html解析器恢复继续执行 css样式优先下载解析 js引擎在解析执行脚本之前，并不知道是否有操作document.styleSheets
网络请求 OSI网络七层模型：物理层、数据链路层、网络层、传输层、会话层、表示层、应用层 在实际应用中物理层、数据链路层被统称为物理层，会话层、表示层、应用层被统称为应用层，所以实际使用时通常分为4个层级...开始发送http请求(请求行/请求头/请求体)，也就是图1中【Request】以及图2中的【已发送请求】。...但一个TCP连接同一时间只能发送一个HTTP请求，为了不阻塞多个请求，Chrome允许创建6个TCP连接，所以在HTTP/1.1中，最多能够同时发送6个网络请求。...命令行方式使用 在Chrome中使用 npm install -g lighthouse lighthouse --view https://m.baidu.com Network(网络) 网络请求中的...正在排队：网络请求队列的排队时间 已停止：阻塞住用于处理其他事情的时间 DNS查找：用于DNS解析IP地址的时间 初始连接：创建TCP连接时间 SSL：用于SSL协商的时间 已发送请求：用于发送请求的时间
:页面已经构建好DOM，所需要的HTML、CSS和JS文件都已经下载完成 Load:浏览器已经加载了所有的资源(图片、样式表等) 详细信息中的Timing Queued:排队–资源优先级、6个TCP...，显示器的工作就是每秒固定读取60张从前缓冲区中的图像，显示在显示器上。...，显示器从显卡前缓冲区读取这个图像，显示在显示器上。...Service Worker 主要思想是：在页面和网络直接增加一个拦截器，用来缓存和拦截请求。...安装了 Service Worker 模块之后，WebApp 请求资源时，会先通过 Service Worker，让它判断是返回 Service Worker 缓存的资源还是重新去网络请求资源。
常见方法：合并多个CSS文件和js文件，利用CSS Sprites整合图像，Inline Images(使用 data：URL scheme在实际的页面嵌入图像数据 )，合理设置HTTP缓存等。...(2)减少DNS查找 (3)避免重定向 (4)使用Ajax缓存 (5)延迟加载组件,预加载组件 (6)减少DOM元素数量:页面中存在大量DOM元素,会导致javascript遍历DOM的效率变慢。...(8)避免404：HTTP请求时间消耗是很大的，因此使用HTTP请求来获得一个没有用处的响应（例如404没有找到页面）是完全没有必要的，它只会降低用户体验而不会有一点好处。...服务器优化 (1)使用内容分发网络（CDN）：把网站内容分散到多个、处于不同地域位置的服务器上可以加快下载速度。...(4)提前刷新缓冲区 (5)对Ajax请求使用GET方法 (6)避免空的图像src Cookie优化 (1)减小Cookie大小 (2)针对Web组件使用域名无关的Cookie CSS优化 (1)将CSS
区分静态内容和动态内容，避免以后页面访问中不必要的HTTP请求。...20、减少DOM元素个数 使用更适合或者在语意是更贴切的标签，要考虑大量DOM元素中循环的性能开销。...事件冒泡时你可以捕捉到事件并判断出是哪个事件发出的。 你同样也不用为了操作DOM树而等待onload事件的发生。你需要做的就是等待树结构中你要访问的元素出现。你也不用等待所有图像都加载完毕。...32、不要在HTML中缩放图像——须权衡 不要为了在HTML中设置长宽而使用比实际需要大的图片。...这个图片文件还会影响下载顺序，例如在IE中当你在 onload中请求额外的文件时，favicon会在这些额外内容被加载前下载。
遇到优先级更高的时，进入待排队状态 浏览器会为每个域名最多维护 6 个 TCP 连接，如果发起一个 HTTP 请求时，这 6 个 TCP 连接都处于忙碌状态，请求就会处于排队状态 网络进程在为数据分配磁盘空间时...显卡负责合成新图像，并将图像保存到后缓存区中，一旦显卡将合成图像写到后缓冲区，系统就会让后缓冲区和前缓冲区互换，这样能保证显示器能读取到最新显卡合成的图像。...，将任务放到主线程外的线程，在 Web Workers 可以执行 JavaScript 脚本，不过不能访问 DOM、CSSOM 避免强制同步布局 强制同步布局：JavaScript 强制将计算样式和布局操作提前到当前的任务中...如，查询元素 offsetWidth 或 offsetHeight 等 为了避免强制同步布局，可以在修改 DOM 之前进行相关值的查询 避免布局抖动 布局抖动：指在一次 JavaScript 执行过程中...DOM 树 然后比较两个树，找出变化的地方，并把变化的地方一次性更新到真实的 DOM 树上 最后渲染引擎更新渲染流水线，并生成新的页面 从双缓存和 MVC 模型看虚拟 DOM： 双缓存 在开发游戏或处理其他图像的过程中
，按照效率推荐合成方式优先，在不能满足需求时使用重绘甚至重排的方式。...(Web Workers 中没有 DOM、CSSOM 环境) 避免强制同步布局 通过 DOM 接口执行元素添加或删除等操作后，为避免当前任务占用主线程太长时间，一般重新计算样式和布局操作是在另外的任务中异步完成的...布局抖动是指在一次 JavaScript 执行过程中，多次执行强制布局和抖动操作，应该尽量避免在修改 DOM 结构时再查询一些相关值。...2014年标准委员会提出了 Service Worker 的概念：在页面和网络模块之间增加一个拦截器，用于缓存和拦截请求。...此外，和 Web Worker 运行在单个页面的渲染进程中不同，Service Worker 运行在浏览器进程中，在整个浏览器生命周期内为所有的页面提供服务。
这里有几条减少HTTP请求次数同时又可能保持页面内容丰富的技术。 合并文件是通过把所有的脚本放到一个文件中来减少HTTP请求的方法，如可以简单地把所有的CSS文件都放入一个样式表中。...把内联图像放到样式表（可缓存）中可以减少HTTP请求同时又避免增加页面文件的大小。但是内联图像现在还没有得到主流浏览器的支持。 减少页面的HTTP请求次数是你首先要做的一步。...预加载是在浏览器空闲时请求将来可能会用到的页面内容（如图像、样式表和脚本）。使用这种方法，当用户要访问下一个页面时，页面中的内容大部分已经加载到缓存中了，因此可以大大改善访问速度。...因此你可以在访问新站之前就加载一部内容来避免这种结果的出现。在你的旧站中利用浏览器的空余时间加载新站中用到的图像的和脚本来提高访问速度。...比如当你增加一个事件句柄时在500和5000个DOM元素中循环效果肯定是不一样的。 大量的DOM元素的存在意味着页面中有可以不用移除内容只需要替换元素标签就可以精简的部分。
把内联图像放到样式表（可缓存）中可以减少HTTP请求同时又避免增加页面文件的大小。 但是内联图像现在还没有得到主流浏览器的支持。 减少页面的HTTP请求次数是你首先要做的一步。...预加载是在浏览器空闲时请求将来可能会用到的页面内容（如图像、样式表和脚本）。使用这种方法，当用户要访问下一个页面时，页面中的内容大部分已经加载到缓存中了，因此可以大大改善访问速度。...比如当你增加一个事件句柄时在500和5000个DOM元素中循环效果肯定是不一样的。 大量的DOM元素的存在意味着页面中有可以不用移除内容只需要替换元素标签就可以精简的部分。...减少DOM访问 使用JavaScript访问DOM元素比较慢，因此为了获得更多的应该页面，应该做到： 缓存已经访问过的有关元素 线下更新完节点之后再将它们添加到文档树中 避免使用JavaScript来修改页面布局...对于页面内容使用无coockie域名 当浏览器在请求中同时请求一张静态的图片和发送coockie时，服务器对于这些coockie不会做任何地使用。因此他们只是因为某些负面因素而创建的网络传输。
领取专属 10元无门槛券
手把手带您无忧上云
