入门 基础知识点：浏览器到底是如何下载资源的
最新回答
携余温的黄昏
2021-10-02 12:09:18
浏览器下载资源的过程是一个复杂且高效的系统，它涉及多个步骤和策略来确保网页能够尽快且正确地加载和显示。以下是浏览器下载资源的基础知识点详解：
1. HTML解析与资源发现- HTML解析：浏览器首先会解析HTML文档，构建DOM树。在解析过程中，遇到如<img>、<link>（用于CSS）、<script>等标签时，会识别到需要下载的资源。
- 同步与异步：对于<script>标签，如果未指定async或defer属性，浏览器会停止DOM解析，等待JS文件下载并执行完毕后再继续。这会导致页面渲染的阻塞。而CSS文件虽然不会直接阻塞DOM解析，但会阻塞JS的执行（因为JS可能依赖于CSS样式）。
- img资源：在HTML、CSS文件中解析到的img资源会最先开始下载，因为它们通常用于显示内容，对首屏渲染至关重要。
- CSS与字体：CSS文件会尽早开始下载，但字体文件（如通过CSS中的@font-face引入）通常会在布局完成后才开始下载。这是因为字体文件的大小和数量可能较大，且不一定立即需要用于首屏渲染。
- JS文件：JS文件的下载和执行顺序取决于其属性。同步JS会阻塞DOM解析，而异步JS（async）或延迟JS（defer）则允许DOM继续解析，并在适当的时候执行。
- 优先级设置：浏览器会根据资源的类型和重要性为其分配优先级。通常，CSS和关键JS文件的优先级较高，而图片和SVG等资源的优先级较低。这些优先级可以通过HTTP/2的优先级机制进行调整。
- 多路复用：HTTP/2协议支持多路复用，即同一个domain上的多个请求可以共享同一个TCP连接，从而减少了连接建立和关闭的开销，提高了下载效率。
- 优先级机制：HTTP/2通过HEADERS帧和PRIORITY帧为流（即资源下载任务）分配和更改优先级。这允许浏览器根据资源的重要性和依赖关系来动态调整下载顺序和带宽分配。
- 依赖与权重：通过调整流的依赖关系和权重，可以实现更精细的资源下载控制。例如，可以让JS文件等待CSS文件下载完毕后再开始下载，或者为某些资源分配更多的带宽以加快下载速度。
- 图片懒加载：对于非首屏的图片资源，可以使用懒加载技术来延迟其下载，从而节省带宽和加快首屏渲染速度。
- CDN服务：使用CDN服务可以加速资源的下载速度，因为CDN会将资源缓存在离用户更近的服务器上。同时，CDN服务商通常也支持HTTP/2协议和优先级设置等高级功能。
- 性能监控与优化：使用Performance等工具监控网页性能，分析资源下载和加载的瓶颈，并进行相应的优化。例如，合并CSS和JS文件、压缩图片等都可以减少资源的大小和下载时间。
以下图片展示了字体文件在CSS文件下载并解析完成后的下载情况：
以及HTTP/2协议中流的优先级和权重设置：
综上所述，浏览器下载资源的过程涉及多个方面，包括HTML解析、资源下载顺序与优先级、HTTP/2协议优化以及实际应用中的考虑。通过深入理解这些知识点，可以更好地优化网页性能，提升用户体验。
热门标签
