摘要：推荐几篇值得收藏，反复阅读的文章内联的位置本文仅仅讨论在一般的情况下，内联应该放在哪个位置。结论对于一些全局函数，全局统计逻辑等，我们往往会以内联的形式放在内的里。写在后面本文聚焦探索了内联在内的最佳位置。
写在前面
本文首发于公众号：符合预期的CoyPan
内联JavaScript在现在的前端项目中是比较常见的，比如一些全局函数，全局统计逻辑等，我们可能会以内联JavaScript的方式写在HTML里。那么，内联JavaScript最好应该放在哪里呢？
页面渲染流程首先来看看这个问题：页面是怎么渲染的？大致流程如下：
页面的渲染是一个复杂的过程，这里就不再详细说了。简单总结一下，就是使用HTML构建DOM树，CSS构建CSSOM，两者结合生成Render Tree，然后再进行渲染。
推荐几篇值得收藏，反复阅读的文章：
https://developers.google.com...
https://developers.google.com...
https://developers.google.com...
https://developers.google.com...
https://developers.google.com...
内联JS的位置本文仅仅讨论在一般的情况下，内联JS应该放在哪个位置。首先，下面两点可以算是【共识】：
JS尽量放在HTML底部。
CSS尽量放在HTML头部。
JS放在底部是为了防止阻塞DOM的解析，CSS放在头部是为了尽早完成CSSOM的构建，从而尽早paint页面。下面是一个常见的页面的HTML代码：
....
假如我们有一段内联的、需要提前加载的、JS统计逻辑代码，很自然的，会把内联JS放在head里。那么是放在css前面，还是后面呢？这是本文将要阐述的问题。我做了两个实验来看看两个位置下的页面渲染流程。为了突出实验效果，我模拟的是3g下的网速。
代码：
hello word_1
hello word_2
hello word_3
hello word_4
hello word_5
timeline如下：
eventlog如下：
从上面两个图可以看到，开始解析HTML后，会开始执行内联JS，并且发起网络请求下载CSS和JS文件，当CSS下载完成后，便开始进入渲染。
代码：
hello word_1
hello word_2
hello word_3
hello word_4
hello word_5
timeline如下：
eventlog如下：
从上面两个图可以看到，浏览器开始解析HTML后，会发起网络请求下载JS和CSS，当CSS下载完成后，才会继续执行内联JS，页面的渲染被推迟了，推迟的时间就是内联JS的执行时间。
浏览器解析HTML的时候，会对整个HTML进行『preload scanner』，提前发起网络请求，下载外链资源，并不是解析到对应标签才会进行下载。而外链下载这个过程是由浏览器进程的网络线程完成的，不会阻塞当前渲染器进程的主线程逻辑。
JS会阻塞HTML的解析。内联JS在CSS前面的时候，执行内联JS可以和网络请求并行执行，执行完内联JS后会继续解析HTML，并且在CSS文件下载完成后，选择合适的时机进行渲染。而内联JS在CSS后面的时候，由于考虑到内联JS可能会修改CSSOM，所以主线程会暂停，直到CSS下载完成，生成CSSOM后，才会继续执行内联JS、解析HTML。
结论对于一些全局函数，全局统计逻辑等，我们往往会以内联JS的形式放在HTML内的head里。此时，最好把内联JS放在外链CSS之前，以提高首屏速度，至少不会拖慢首屏速度。
写在后面本文聚焦探索了内联JS在HTML内的最佳位置。网上关于页面渲染流程的文章很多，而自己去亲自实践后，才能更好的理解整个渲染流程。符合预期。
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/54241.html
摘要：推荐几篇值得收藏，反复阅读的文章内联的位置本文仅仅讨论在一般的情况下，内联应该放在哪个位置。结论对于一些全局函数，全局统计逻辑等，我们往往会以内联的形式放在内的里。写在后面本文聚焦探索了内联在内的最佳位置。 写在前面 本文首发于公众号：符合预期的CoyPan 内联JavaScript在现在的前端项目中是比较常见的，比如一些全局函数，全局统计逻辑等，我们可能会以内联JavaScript的...
摘要：延迟加载当我们调用外部的时候，使用事件在页面内部被加载前，外部将不被加载脚本调用外部文件拷贝以上代码。代码代码片段组合外部工具列表页面加速优化页面请求工具工具大全扩展阅读方面的设置 内联 CSS 优点 使用内联 CSS 可以减少浏览器去服务端去下载 CSS 文件 关键 CSS 内联到 HTML 文件中 缺点 CSS 文件没法被缓存 注意：该方法只适用于很小的 CSS...
摘要：延迟加载当我们调用外部的时候，使用事件在页面内部被加载前，外部将不被加载脚本调用外部文件拷贝以上代码。代码代码片段组合外部工具列表页面加速优化页面请求工具工具大全扩展阅读方面的设置 内联 CSS 优点 使用内联 CSS 可以减少浏览器去服务端去下载 CSS 文件 关键 CSS 内联到 HTML 文件中 缺点 CSS 文件没法被缓存 注意：该方法只适用于很小的 CSS...
摘要：规则使用内容发布网络用户同服务器的距离会对页面响应时间产生影响。这不仅能达到响应时间大幅减少的目的，还很容易实现。提供动态页面会引入特殊的存储要求数据库连接状态管理验证硬件和优化等，这些复杂性超过了的范围。 链接参考： https://developer.yahoo.com/performance/rules.html 只有10%～20%的最终用户响应时间花在了下载HTML文档上...
阅读 2659·2021-11-23 09:51
阅读 3250·2021-11-22 14:44
阅读 4578·2021-11-22 09:34
阅读 5112·2021-10-08 10:14
阅读 2414·2021-09-22 15:47
阅读 3504·2021-09-22 15:40
阅读 1514·2019-08-30 15:44
阅读 1623·2019-08-28 18:23
