标签: page-load-time

如果我将CSS基于移动样式,然后@media对逐渐变大的显示器(平板电脑,台式机等)使用查询,移动设备是否会使用桌面样式？

我相信通常情况下,移动设备会加载所有图像,即使它们不适用于自己特定的媒体大小.这意味着它将加载所有图像并隐藏与其基于查询的样式表不匹配的图像.

我想要做的是使用一个背景为更大的网站版本:

.splash {
    background: #1a1a1a url('/assets/imageLarge.png') no-repeat;
}

和另一个移动版本:

.splash {
    background: #1a1a1a url('/assets/imageSmall.png') no-repeat;
}

如果我在任何媒体查询之前应用移动CSS,并使用类似的查询添加下面的大型媒体CSS @media screen and (min-device-width: 481px) {...},那么移动设备是否也会加载大图像？

这是我长期以来一直存在的问题.我想在我的Windows计算机上运行PHP应用程序,它的加载时间非常长,大约10-25秒.我尝试了很多东西:

• 首先,我尝试了一个简单的XAMPP安装
• 我读WAMP可能会更快,所以我也尝试了WAMP.它给了我相同的结果
• 然后我用PHP安装了一个nginx服务器,但它也没有帮助
• 最后,我在VirtualBox中安装了一个Ubuntu 11.10并且我共享了包含我的项目的Windows文件,但结果更糟糕:每次超过22秒的加载时间.

更新:我甚至尝试过APC - 它有所改善,但仍然是6-8秒/页

我将我的文件上传到Linux服务器(共享主机),它运行在300-500毫秒左右.在XAMPP安装上,我尝试运行其他(即非Symfony2)应用程序(例如phpmyadmin),它也比共享主机慢,但速度不是很慢,加载时间为2-3秒.在我将Linux更改为主操作系统之前,我该如何提高性能？我的笔记本电脑配有i7 CPU,4 GB RAM,5400RPM HDD,Win7 x64.

谢谢您的帮助!

UPDATE2:由于一些神秘的原因,我的Symfony路由无法使用fcgid(它给了我一个404错误)所以我回去使用PHP作为模块.现在,它已成为有史以来最糟糕的(比以前更糟糕的模块):应用模式20-25秒,在开发模式下,每次超过30秒,所以我得到一个超时错误,它与没有启用APC.

在这里你可以看到这个错误.这是可重现的:每次在30秒内达到不同的执行点:

这个问题与哪些浏览器支持<script async ="async"/>相关？.

我最近看过几个脚本做的事情是这样的:

var s = document.createElement('script');
s.type = 'text/javascript';
s.async = true;
s.src = 'http://www.example.com/script.js';
document.getElementsByTagName('head')[0].appendChild(s);

这是向DOM动态添加脚本的常用方法,Steve Souders的书" Even Faster Web Sites "中的IIRC 提示所有现代浏览器异步加载脚本(即不阻止页面呈现或下载后续资产) .

如果我是正确的,该s.async = true声明是否有用？即使对于支持该属性的浏览器,它也不是多余的,因为动态附加脚本应该已经触发异步下载吗？

有没有办法检查页面加载需要多长时间？

编辑:

我会稍微提出一下这个问题.假设您正在处理ASP.NET项目,并且当您在Visual Studio中运行项目时,会有一些加载时间,然后您才能看到在屏幕上呈现的起始页面并准备使用.

如果此网站处于活动状态,则加载时间应与从Visual Studio启动项目时的加载时间不同.

我想看到的是如果网站在服务器上的实际加载时间.

编辑2:答案

Chrome - >右键单击 - >检查元素 - >网络选项卡.当您加载页面时,页面的时间轴有一个很好的报告,显示实际页面加载时间,css,js等加载时间.在Net选项卡下,Mozilla中有一个类似的工具.

我正在寻找一种正确的方法来测试页面完全加载其所有资源所需的时间.我到目前为止所做的是补充:

window.startTime = (new Date).getTime(); // after the title in my page

和

window.onload = function () {
    console.log((new Date).getTime() - window.startTime);
}
window.addEventListener('load',function () {
    console.log((new Date).getTime() - window.startTime);   
},false);

在页脚中向下.这是衡量的好方法吗？加载时间和感知加载时间之间是否存在差异？从我看到的所有资源加载包括图像后触发事件.这两个事件之间有什么不同吗？我也可以使用PageSpeed来测试吗？(我知道我可以在chrome dev工具中完成它,但我也想要一个脚本,以便我可以跟踪数据.)

目前是否存在可以缩小整个项目目录的解决方案？更重要的是,是否存在任何可以缩短类名,ID并在所有文档中保持一致的解决方案？

可以改变这种情况的东西:

Index.html ---

<div class="fooBar">
  <!-- Code -->
</div>

Styles.css ---

.fooBar { 
  // Comments and Messages
  background-color: #000000; 
}

Index.js ---

$(".fooBar").click( function () { 
  /* More Comments */
  alert( "fooBar" ); 
});

进入这个:

Index.html ---

<div class="a"></div>

Styles.css ---

.a{background-color:#000;}

Index.js ---

$(".a").click(function(){alert("fooBar");});

最近我开始注意到网站在某些时候加载速度非常慢.

我用firebug对此进行了调查,当页面需要很长时间加载时,它会显示出来:

它似乎完全随机,但对webfont.woff的请求只是等待并永远等待.如果我尝试手动达到这个资源,它工作正常,并在100毫秒内响应.我正在谈论的页面是http://wtf.maikelzweerink.nl,自定义字体来自主域maikelzweerink.nl.

face-fonts在default.css中声明,也来自主域:

@font-face {
    font-family: 'Proximanova Regular';
    src: url('//maikelzweerink.nl/general/font/Proximanova-Regular/webfont.eot');
    src: url('//maikelzweerink.nl/general/font/Proximanova-Regular/webfont.eot?#iefix') format('embedded-opentype'),
         url('//maikelzweerink.nl/general/font/Proximanova-Regular/webfont.woff') format('woff'),
         url('//maikelzweerink.nl/general/font/Proximanova-Regular/webfont.ttf') format('truetype'),
         url('//maikelzweerink.nl/general/font/Proximanova-Regular/webfont.svg#ProximaNovaRgRegular') format('svg');
}

即使使用正确的HTTP标头

在Chrome中同样的交易(点击查看大图):

我正在使用https://gtmetrix.com来诊断我的页面速度问题.

有问题的页面有一个嵌入的YouTube视频,GTMetrix说这个视频的JS调用正在减慢页面加载速度.

这是正在进行的呼叫:

<iframe width="640" height="360" src="https://www.youtube.com/embed/PgcokT0AWHo" frameborder="0" allowfullscreen></iframe>

我有一个网站(wordpress),上面有几千个帖子.帖子看起来像这样:

[tab:source1]
<iframe width="560" height="315" src="https://www.youtube.com/embed/U3rKPexoEcA" frameborder="0" allowfullscreen></iframe>
[tab:source2]
<iframe src="https://player.vimeo.com/video/60718161?title=0&byline=0&portrait=0&badge=0" width="640" height="360" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
<p><a href="https://vimeo.com/60718161">HOW TO SHARPEN PENCILS</a> from <a href="https://vimeo.com/pricefilms">Pricefilms</a> on <a href="https://vimeo.com">Vimeo</a>.</p>
[tab:source3]
<iframe width="640" height="360" src="http://www.worldstarhiphop.com/embed/100588" frameborder="0" allowfullscreen></iframe>

我的页面加载时间有时是两位数.我理解为什么会这样,但我不确定如何解决它.我想用以下两种方法修复它:

Iframe setTimeout()

或者:动态Asynch Iframe看起来像这样:

<script>
(function(d){
  var iframe = d.body.appendChild(d.createElement('iframe')),
  doc = iframe.contentWindow.document;

  // style the iframe with some CSS
  iframe.style.cssText = "position:absolute;width:200px;height:100px;left:0px;";

  doc.open().write('<body onload="' + 
  'var d = document;d.getElementsByTagName(\'head\')[0].' + 
  'appendChild(d.createElement(\'script\')).src' + 
  '=\'\/path\/to\/file\'">');

  doc.close(); //iframe onload event happens

  })(document);
</script>

使用这两种方法,我如何全局地将其应用于整个网站的所有iframe？我认为不可能单独更改每个iframe.

一个简单的问题,我不确定它是否有简短的答案!

说明
我有一个JavaScript文件,要在网站上加载,这里有一些关于它们的注释:

• 它们都来自同一个域(不需要跨域加载)
• 它们在网站上是相同的.
• 有几个文件,比如jQuery,还有5个其他插件加上我自己的基于它们的应用程序脚本.
• 它们的大小全部压缩= 224KB,(我将所有文件合并到一个文件中,然后使用YUI Compressor 2一次压缩它们

问题
我听说224KB并不适合放在一个文件中!它应该分成几个文件,每个文件最多44KB.我不记得我什么时候听到这个并且我不确定将它分成更多文件是否有效,但确实224KB需要很长时间首次加载,考虑网站当然加载图像和CSS.

我已经最小化了早期加载JavaScript文件的需要并把它放在了最底层,到目前为止这是一个很好的进展,但是我需要加载它与HTML一起使用以获得时间源和做出的决定是:

是还是不是？
将它保存在一个压缩的大文件中？或者将它们拆分成许多压缩文件并异步加载(我知道处理依赖关系相关的问题)？