避免CSS或JS代码内联代码的陷阱

过度使用内联CSS或JS代码，而不是通过静态资源提供代码，可能会损害网站的性能，我们将学习如何通过静态文件加载动态代码，避免内联代码过多的缺点。

内联是直接在HTML文档中包含文件内容的过程：CSS文件可以在style元素内部内联，JavaScript文件可以内联在script元素中：

通过打印HTML输出中已有的代码，内联可避免渲染阻塞请求，并在呈现页面之前执行代码。因此，它有助于提高站点的感知性能（即页面变得可用的时间。）例如，我们可以使用在加载站点（大约14kb）时立即传送的数据缓冲区来内联在关键的风格，以及字体大小和布局的宽度和高度，以避免跳跃的布局重新绘制时数据的其余部分被输送。

但是，当过度使用时，内联代码也会对站点的性能产生负面影响：由于代码不可缓存，因此会反复向客户端发送相同的内容，并且无法通过Service Workers预缓存，或者从内容交付网络缓存和访问。此外，在实施内容安全策略（CSP）时，内联脚本被认为是不安全的，然而，它是一个明智的策略，内联CSS和JS的关键部分，使网站加载更快，但尽可能避免。

我们一般都认为内联JS和CSS代码并不总是理想的，因为必须将代码重复发送到客户端，如果代码量很大，则可能会对性能产生影响。

因此，我们可以设计了一种通过将动态JS和CSS内联代码转换为静态资源来加快网站速度的方法，这可以增强多个级别的缓存（在客户端，服务工作者，CDN中），允许进一步将所有文件捆绑在一起成只有一个JS / CSS资源，以压缩所述输出（如通过GZip压缩）时改善的比率和避免同时处理多个资源（例如，在浏览器）浏览器中的开销，并且还允许添加属性async或defer到<script>标记以加快用户交互性，从而改善网站的明显加载时间。

作为一个有益的副作用，将代码拆分为静态资源也可以使代码更易读，处理代码单元而不是大量的HTML，这可以更好地维护项目。

我们开发设计的解决方案是在PHP中完成的，代码本身非常简单，更重要是PHP与HTML更好的配合，从而可以帮助HTML页面提升速度，当然值得注意是我们在开发过程中都尽量避免内联CSS或JS代码才是关键。