app页面开发时间估算_网站速度优化：离线估算页面加载时间

app页面开发时间估算

Before you can optimize the speed of your web pages you must determine how fast they load in their current state. The means by which you do so depends on the way in which your website is deployed. If your site is not yet hosted on a server, you are limited to using offline tools. By their very nature, these tools tend to provide rather rough estimates of download speed, but they are better than nothing.

在优化网页速度之前，必须确定网页在当前状态下加载的速度。 这样做的方法取决于网站的部署方式。 如果您的站点尚未托管在服务器上，则只能使用离线工具。 从本质上讲，这些工具往往提供下载速度的粗略估计，但总比没有好。

You can gain a quick estimate of how long a page will take to load by looking at its total size:

您可以通过查看页面的总大小来快速估算页面的加载时间：

• With the Web Developer Toolbar in Firefox: use Information / Show Document Size from the toolbar. The total size shown – images, styles, JavaScript files – is the complete size of the page. You want this number to be as low as possible: under 100K, if possible.

  使用Firefox中的Web Developer工具栏 ：使用工具栏中的 信息/显示文档大小 。 显示的总大小(图像，样式，JavaScript文件)是页面的完整大小。 您希望此数字尽可能的低：如果可能，请小于100K。

• In DreamWeaver: switch to Design Mode for the page and look in the bottom right hand corner of the window. DreamWeaver will provide the total size of the page and an estimated download time (over DSL, by default: this can be changed in the application’s Preferences panel). Again, you are looking for a page size under 100K, and a load time of less than five seconds; ideally, less than two seconds.

  在DreamWeaver中：转到页面的“ 设计模式 ”，然后在窗口的右下角查看。 DreamWeaver将提供页面的总大小和估计的下载时间(默认情况下是通过DSL：可以在应用程序的“首选项”面板中更改)。 同样，您正在寻找的页面大小小于100K，并且加载时间少于5秒； 理想情况下，少于两秒钟。

There is a major drawback with this technique: both tools add together all the content on the page and express it as the total file size. That is, they present the speed of the page in terms of downloading every last byte of code and content. In reality, you can hide a great deal from the browser using CSS, PHP or JavaScript, and stream it as the page loads: for example, showing one central portfolio image and hiding the others, which may be equally large, until the visitor clicks on a link. The hidden images will have the opportunity to load “behind the scenes” while the user chooses their next action… but neither DreamWeaver or the Web Developer toolbar recognize this technique, especially when CSS is used.

这种技术的主要缺点是：这两种工具将页面上的所有内容加在一起，并以文件总大小表示。 也就是说，它们以下载代码和内容的每个最后字节的形式表示页面的速度。 实际上，您可以使用CSS ， PHP或JavaScript在浏览器中隐藏大量内容，并在页面加载时对其进行流式处理：例如， 显示一个中央组合图像，然后隐藏其他中央组合图像，该图像可能同样大，直到访问者单击为止。在链接上。 当用户选择下一步操作时，隐藏的图像将有机会“隐藏在后台”……但是DreamWeaver或Web Developer工具栏都无法识别这种技术，尤其是在使用CSS的情况下。

Under those conditions, creating an accurate estimate means falling back to adding up the file size of the visible content yourself. An easy way to do this in Firefox is to hit CMD/CTRL + I for information about the page: on the screen that appears, the General “size” refers to the file size of the code and text of the page, whereas the elements listed under “Media” are the size of the images and other content.

在这种情况下，创建准确的估算值意味着要自己退还可见内容的文件大小。 在Firefox中执行此操作的一种简单方法是按CMD / CTRL + I获取有关页面的信息：在出现的屏幕上，“大小”是指页面代码和页面文本的文件大小，而元素是“媒体”下列出的是图像和其他内容的大小。

翻译自: https://thenewcode.com/480/Site-Speed-Optimization-Estimating-Page-Load-Time-Offline

app页面开发时间估算