Javascript 如何内联页面布局多个部分所需的JS？ 让我们假设有一篇文章有多个照片库 每个图库中的照片都排列在一个复杂的网格中，只需通过JS即可构建 JS的大小小于~1KB（gzip） 第一个画廊可能在褶皱上方 我试图使这些图库的页面加载尽可能快（优化），并避免未设置样式的内容（当图库未设置样式时）闪现

这就是我现在的位置，HTML：

<div id="first" class="mygallery">...images markup...</div>
<script>
    /* Inline full JS code required for gallery (~1KB) */
    var gallery = function(id) {
        ...
    };
    gallery('#first');
</script>

<p>Some other content of any length.</p>

<div id="second" class="mygallery">...</div>
<script>
    /* just init gallery using code from the first one */
    gallery('#second');
</script>

<p>Some other content of any length.</p>

<div id="third" class="mygallery">...</div>
<script>
    /* just init gallery using code from the first one */
    gallery('#third');
</script>

etc...

…图像标记。。。
/*库所需的内联完整JS代码（~1KB）*/
变量库=函数（id）{
...
};
画廊（‘第一’）；
其他任何长度的内容

...
/*只需使用第一个库中的代码初始化库*/
画廊（第二）；
其他任何长度的内容

...
/*只需使用第一个库中的代码初始化库*/
画廊（‘第三’）；
等

我的问题是:

我应该直接在其元素之后初始化库，还是应该一次初始化所有库（在最后一个库DOM元素之后，或者在

document.ready

）中）

我应该通过

display:none

隐藏所有库，然后通过JS显示它们以避免FOUC吗？（对于没有js用户，我可以使用样式

display:block；

添加noscript标记）

我是否应该内联JS，1KB的Gzip JS不是太多了吗

另外，应该注意，当执行

gallery（）

方法时，

getComputedStyle（）

被调用一次（触发布局），然后应用样式（触发绘制）。这会影响你对第一个问题的回答吗

我应该在库元素之后直接初始化库，还是应该一次初始化所有库（在最后一个库DOM元素之后，或者在document.ready中）

如果目标是减少浏览器在屏幕上获取像素所需的工作量，则可以根据需要逐步初始化每个库，例如，仅初始化第一个库，延迟初始化其他库，直到稍后

我应该通过display:none隐藏所有库，然后通过JS显示它们以避免FOUC吗？（对于没有js用户，我可以添加带有样式显示的noscript标记：block；）

为获得最佳效果，提前为图库预留空间：这样可以最大限度地减少版面回流，并消除页面在内容加载时上下移动的恼人行为。有关更多信息，请参阅：

我是否应该内联JS，1KB的Gzip JS不是太多了吗

---

答案取决于许多变量。如果引入额外的RTT，则可能“太多”-例如，超过新TCP连接的第一个RTT允许的初始14KB有效负载。另一方面，如果这不是问题，那么1KB就可以了。此外，考虑缓存对缓存的影响——例如，多个页面使用此片段或仅一个片段，代码片段需要多长时间更改，并影响嵌入该页面的缓存生命周期等。所以在最后我这样做了：我在第一个库之后内联JS代码并初始化它。然后，在添加所有其他库的DOM元素之后，我计算它们的位置（getComputedStyle（）等），并同时将样式应用于所有库，以最小化回流。当通过WebGetTest进行测量时，它看起来相当快。希望我为避免FOUC而做的隐藏不会影响画廊中图像的SEO。。。