时间戳

首页 > 解决方案 > Javascript 在同一个 html/php 文件或单独的 js 文件中的性能

jquery - Javascript 在同一个 html/php 文件或单独的 js 文件中的性能

问题描述

我想知道什么对性能更好，包括您的 html 代码下的 js 文件或有一个单独的 js 文件，例如

索引.html

<html>
<head></head>
<body>
<button id="done">click me!</button >
<script>
 $( "#done").click(function(e) {
   alert("Hello");
 });
</script>
</body>
</html>

索引.html

<button id="done">click me!</button >

自定义.js

 $( "#done").click(function(e) {
   alert("Hello");
 });

标签： jquery

解决方案

就代码编译和执行速度而言，两者都是一样的，代码就是代码。

然而对于页面加载速度来说，这实际上并不像人们想象的那么简单。

对于具有少量代码的小页面 -内联 JS 会更快。

这是因为您没有等待 Javascript 加载的往返时间（尤其是在移动连接上，请求到达服务器并返回可能需要 350 毫秒）。

随着 JS 大小的增加，尽管您可以并行下载多个文件，这抵消了启动与服务器的连接所需的时间。

除非您真的要从页面中挤出最后一点性能，否则请使用外部脚本（即使您要追求最高速度，也要将 JS 保持在 20kb GZIPped 以下，否则不值得）。

如果您想提高加载速度，请使用“异步”或“延迟”（如果您的 JS 不依赖加载顺序，则首选异步）并将它们添加到页面的 HEADER（这与大多数建议相反，但因为它们是延迟或异步的，它们不会阻止渲染，并且会更快地被请求）。

如果你想要性能提升

内联渲染“首屏”所有内容所需的 CSS - 这让网站感觉快如闪电（但它比您想象的要难）。

花更多的时间来最小化请求的数量和文件的大小。

推荐阅读