在页面加载方面加载js文件并在客户端使用js创建整个页面是否好
[英]Is it good in term of page loading to load js files and create whole page using js on client side
问题描述
I have read that multiple http request for web resources(html, css, js) results in lazy loading of web page.
我读到多个 http 请求 web 资源（html、css、js）导致延迟加载 web 页面。 What if we create whole html and css on client side using js.如果我们使用 js 在客户端创建整个 html 和 css 会怎样？ If i have index.html that contains following code:如果我有包含以下代码的 index.html：
<html>
<head></head>
<body>
<script src='main.js'></script>
</body>
</html>
and main.js contains something like:和 main.js 包含类似的东西：
var d = document.createDocumentFragment();
d.appendChild(para);
var para = document.createElement("P");
para.innerText = "This is a paragraph";
document.body.appendChild(d);
will it make page loading faster?它会使页面加载速度更快吗？
1 个解决方案
解决方案1
0 已采纳 2020-11-11 07:54:34
The short answer is perhaps not .简短的回答也许不是。
To illustrate:为了显示：
The time it takes for a page to load depends on a combination of many factors:页面加载所需的时间取决于多种因素的组合：
- Number of requests, which is what you're referring to.请求数，这就是您所指的。
- Total bytes to load, which is determined by the size of the HTML file and its assets.要加载的总字节数，由 HTML 文件及其资产的大小决定。
- User's connection speed.用户的连接速度。
- User's local resources (RAM and CPU).用户的本地资源（RAM 和 CPU）。
- And many more...还有很多...
In your example, you've written about 170 characters of Javascript that practically creates a <p> element.在您的示例中，您编写了 Javascript 的大约170 个字符，实际上创建了一个<p>元素。
The same result could be achieved by writing <p>This is a paragraph</p> which adds only 26 characters to your HTML.通过编写<p>This is a paragraph</p>可以达到相同的结果，它只向您的 HTML 添加26 个字符。
Having more characters in any of your HTML, CSS, and JS files means that the total size of your files is larger and it may take a user's browser more time to load them.在 HTML、CSS 和 JS 文件中包含更多字符意味着文件的总大小更大，并且用户的浏览器可能需要更多时间来加载它们。
Having said that, there is more nuance to optimizing web performance.话虽如此，优化 web 性能还有更多细微差别。 Reducing the number of requests CAN reduce load time, but it's important to be aware how your changes affect other factors that also influence the performance of your page.减少请求数量可以减少加载时间，但重要的是要了解您的更改如何影响也会影响页面性能的其他因素。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.