为什么要做优化经典问题：白屏时间过长，用户体验差原因：网络问题，关键渲染路径（CRP）问题优化总结很多，无外乎网络优化和静态资源(html,js,css,image)优化。我们先抛开网络的优化，只分析静态资源的优化。静态资源优化的关键在于你要深入理解关键渲染路径（CRP）的运行原理和规则。一、了解浏览器的关键渲染路径（html加载过程）面试题：1、描述从url输入到页面显示的整个过程？2.描述一下html加载的全过程？如何准确回答像上面这样的问题，那我们就需要充分了解浏览器的关键渲染路径。只有了解了工作原理，才能更好的理解静态资源的优化方案。渲染的关键路径分为以下五个步骤BuildaDOMtree构建过程：Bytes->Characters->Tokens->Nodes->DomBuildaCSSOMtree构建过程：Bytes->Characters->Tokens->Nodes->CSSOM结合DOM树和CSSOM树构建渲染树1.Filter去掉不可见的节点（script标签，meta标签）2.过滤掉有隐藏样式的节点（display:none）根据渲染树布局，计算几何信息nodes(layout)和在屏幕上绘制每个节点(paint)首先从上面五个步骤可以看出，渲染树只有在DOM树和CSSOM树构建完成后才能构建，所以这两个步骤是阻塞的对于整体渲染。当然DOM树是必须的，它提供了页面内容，CSSOM的必要性不是太明显，所以在CSSOM构建的过程中可以做一些优化。在做优化之前，首先要了解这些知识点。1.默认情况下，CSS是一种阻塞渲染的资源。2、我们可以通过媒体查询和媒体类型将一部分CSS标记为非阻塞渲染（缺少媒体查询会严重影响关键渲染路径的性能）3.浏览器**会下载所有的CSS资源**，不管是否被拦截。根据以上三个知识点，会让你清楚的知道CSS优化能做的是，根据不同的CSS使用不同的场景和优先级进行非阻塞标记。如果需要CSS，请尽快加载到客户端（1.引用位置在前面，2.减小文件大小）到客户端，减少第一次渲染的阻塞。2.javascript对渲染的影响以及降低影响的策略首先我们来讨论一下javascript。它可以修改网页、内容、样式和对用户交互的响应的各个方面。但是javascript也会阻止DOM的构建，延迟网页的渲染。让我们看一下javascript、DOM和CSSOM之间的依赖关系。JavaScript可以修改内容和样式，无论是（内联javascript还是外部javascript文件）都会阻止DOM的构建如果在DOM构建过程中遇到javascript标签（非异步加载async），浏览器会终止DOM的构建并且立即执行javascript。这就是为什么非异步执行的javascript应该放在末尾或者可执行代码应该放在DOMContentLoaded回调中？因为如果javascript代码操作了还没有构造的DOM节点，会因为获取不到节点而无法执行相应的操作。CSSOM的构建影响javascript的执行。如果在浏览器完成下载和构建CSSOM之前运行javascript脚本，浏览器将延迟脚本的执行和DOM的构建，直到CSSOM的下载和构建完成。可以这样理解，当出现非异步加载的javascript时，CSSOM构建的完成时间早于javascript的执行，并且都早于DOMContentloaded（即DOM构建完成）。未优化--javascript正常加载优化后--javascript异步加载根据上面的分析，我们可以清楚地认识到异步加载对于不一定先加载的js是最好的选择。3、图片对首屏渲染的影响图片不会妨碍首屏渲染，但是为了增加用户体验，我们应该考虑加载一个合适大小的图片来加速首屏渲染图片。4、如果js修改了dom或者css会怎样？您只能重新执行渲染过程。也就是我们常说的重绘。如何评估关键渲染路径前面的内容让我们了解了关键路径渲染的基本原理和可能的优化机会。接下来，我们需要使用一些工具来帮助我们评估现有页面的CRP性能。测试工具：Lighthouse可以快速测试您的网页并提供性能报告监控工具：NivigationTimingApi设置您的代码并实时监控用户的性能。如何优化呢？请移步性能优化总结总结javascript阻止DOM构建（DOMContentLoaded触发延迟），css下载和补全阻止javascript执行。在没有javascript或者只有异步javascript的页面中，DOM的构建和CSSOM的构建互不影响。
