Jon*_*lov 13 html javascript optimization dom-events
在网站上,我遇到了页面加载之间出现白色的"闪光".它看起来很糟糕,因为我正在使用背景图像,当页面加载时,背景图像在进入屏幕之前会闪烁(请自行查看).这个问题出现在chrome和IE中,但不在firefox中.
该网站有一种预加载东西的方法.页面上的每个元素都在div包装器中#website,最初位于display:none,并且每个图像都在div包装器中#website-images,也是隐藏的.然后该站点(使用jquery插件)检查是否所有图像#website-images都已完成加载,一旦它们被设置为cookie,就会记住该用户已经加载了图像,因此一旦它们不会经过预加载过程转到另一个页面或重新加载当前页面,然后拨打电话$("#website").show()以显示该网页.
那么什么可能导致页面加载之间的这种闪烁？这是我预装图像的方式吗？我添加了不同的doctypes,并更改了元信息,但NOTHING已经有效.我真的迷失在这里,有没有人有任何想法或见解？
Gre*_*reg 45
发生这种情况是因为DOMLoaded事件在页面实际呈现之前的毫秒内被触发.
简而言之,这意味着您必须优化网站的速度.这并不意味着让它下载更快,但它意味着以非阻塞的方式以正确的顺序下载.
1)似乎你可以做很多事情来优化你的标记.首先,可以优化样式表和JavaScripts的顺序.为确保以异步方式下载CSS文件,您必须在外部JavaScript文件之前包含外部CSS.style.css在部分/全部JavaScript调用后下载.
在外部CSS文件和另一个资源之间的头部有1个脚本块.要允许并行下载,请在外部CSS文件之前或在下一个资源之后移动内联脚本.
2)您的主JavaScript文件内嵌在您的标记中.这不仅会阻止页面下载,直到脚本完成下载,而是在您的内容可能导致(或添加)白色闪存之前使用它.
在头部异步加载脚本是我首选的方法.然后,您必须在DOM加载完成后触发脚本,或者通过将脚本放在body标签的底部来实现相同的结果.
1)查看http标头,有28个项目作为单独的HTTP调用提供,不会在浏览器上缓存(包括html页面,jpg图像,样式表和JavaScript文件).
这些项目明确是不可缓存的,可以通过编辑Web服务器的配置轻松修复.
2)启用gzip压缩.大多数Web浏览器(是的,甚至是IE)都支持gzip解压缩,大多数(如果不是全部)Web服务器都支持使用gzip进行压缩.你甚至可以过度使用SPDY,这是一种替代的轻量级HTTP协议(Chrome和Firefox支持).
您的域名中有大约30个单独的项目.首先,考虑如何减少这些请求数量.每页30个HTTP请求视图很多.您可以使用以下方法解决此问题:
1)跨多个主机名并行下载.浏览器当前限制到单个域的并发连接数.从单独的域(例如,img.bigtim.ca)提供图像可以允许它们与其他内容并行提供.
2)将多个项目合并为一个.下载的许多项目都是纯粹的样式内容,例如徽标,菜单元素等.这些内容可以合并为单个图像(仅下载一次),并使用CSS进行拆分.这称为CSS spriting.Stack Overflow就是这样做的:看看这里.
3)如果您无法减少需要下载的项目数量,您可以通过提供来自无Cookie域的静态内容来减轻服务器(以及客户端浏览器)的负载.Stack Overflow使用所有静态内容(如图像,样式表和脚本)执行此操作.
HTTP和浏览器技术可以帮助您提高网站的速度.最后一步取决于你.
1)你有没有理由选择自己主持jquery？Jquery的下载页面显示了多个CDN,您可以在其中指向快速,缓存的脚本下载.
2)您的样式表中目前有超过20个未使用的CSS规则(占整个CSS文件的36%).重新考虑真正需要的东西.
3)JavaScript的主要部分(在你身体标签的顶部)似乎是一个试图加快速度的黑客,但可能没有任何帮助.
正在设置cookie以指定页面是否已经淡入.您不仅使用JavaScript来执行可以由CSS执行的转换,而且超过一半的脚本用于定义读取和写入cookie的功能.
看到这样的事情:$("body").css ("background-image", "url('images/background.png')");和$("#website").show ();平时让我咆哮着"关注点分离",但这个答案是足够长的时间,现在,所以希望你可以看到,这是不好的做法,在相同的代码混合风格和功能.
附录:查看代码,根本不需要jquery来执行您正在执行的操作.但话说回来,没有必要执行你正在做的事情,所以你可以在没有任何JavaScript的情况下做得更好.
