📝script 标签中的 defer Vs. async
在 HTML 中，script 标签可以使用 defer 和 async 属性来控制外部 JavaScript 脚本加载和执行的方式。defer 和 async 都可以提高页面的加载性能，主要区别整理如下。 区别点 defer async 加载顺序 按顺序加载 异步加载，不保证加载顺序 执行顺序 按文档中出现的顺序执行 加载完立即执行，不保证执行顺序 执行时机 HTML 文档完全解析后执行，但在 DOMContentLoaded 事件之前 可能在 HTML 文档解析完成之前执行 阻塞行为 不会阻塞 HTML 的解析，浏览器解析 HTML 文档，脚本在后台异步加载 不会阻塞 HTML 的解析，浏览器解析 HTML 文档，脚本在后台异步加载 适用场景 需要保证执行顺序，并在文档解析完成后再执行的脚本。如依赖于 DOM 的脚本。 不依赖其他脚本、不依赖 DOM 的独立脚本。如分析工具或广告脚本。 注意：如果不使用 defer 或 async 属性，浏览器在遇到 <script> 标签时会阻塞 HTML...
📝style 标签写在 body 前和 body 后有什么区别？
style 标签写在 body 前和 body 后有什么区别？ 对比项 <style> 放在 <body> 之前 <style> 放在 <body> 之后 渲染速度 【优】所有样式信息在页面加载时可用，用户能够快速看到格式化后的页面 【劣】浏览器需要先解析 body 内容再应用样式,用户可能会先看到未格式化的内容，但只要解析到样式表就会立即渲染格式化后的页面 页面加载时间 【劣】如果样式表很大，可能会延迟页面的渲染时间，影响整体加载速度 【优】页面内容先加载，样式表加载不会阻塞页面内容的显示，有助于提高首屏加载速度 搜索引擎优化（SEO） 【劣】样式信息位于文档顶部，可能影响搜索引擎对页面内容的快速抓取 【优】搜索引擎可以先抓取和索引页面的主要内容，不会被样式信息干扰 JavaScript 与样式的关系 【优】样式表在 JavaScript 之前加载和应用,不会被 JavaScript 阻塞 【劣】如果页面中有大量 JavaScript...