• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com专业计算机教程网站
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure
您的位置:首页 > 网页设计 >html5 > 为什么有些网页一开始不显示内容,等不耐烦了关掉的时候却显示了内容一闪而过?

为什么有些网页一开始不显示内容,等不耐烦了关掉的时候却显示了内容一闪而过?

作者:匿名 字体:[增加 减小] 来源:互联网 时间:2018-12-03

本文主要包含firefox等相关知识,匿名希望在学习及工作中可以帮助到您
哪里的问题?
我用的firefox

回复内容:

猜测某资源文件在一直加载,浏览器在等,关的时候就放弃加载了,浏览器就渲染了,然后窗口被关闭了。 主要原因是某个资源文件(常常是 js 文件)阻塞了页面的渲染。

用人话来说,就是在载入页面的时候,有一部分文件没载入完,导致页面没有显示。(但是这个文件其实可能并不影响页面显示)
当你关闭页面时,浏览器会先放弃载入该文件,此时阻塞消失,渲染行为完成,页面一闪而过。

一个常见的情景是很多网站会引用谷歌统计的代码,但是在中国出于众所周知的原因访问谷歌统计受到了很大限制,导致其他页面文件都下载完了就这个文件下不完。此时就会出现题主说的现象。

解决方法很简单。发现页面卡在某个资源上时可以点叉号停止加载,如果这个资源对页面没啥影响就可以正常显示了;当然学习穿墙术一般也能解决该问题。 其实我不太懂,不过我猜测是关闭网页的时候,浏览器执行的步骤可能是先终止网页的下载,显示已经渲染好的部分网页,然后再结束这个标签页。估计这个显示的内容也是不完整的,有一部分资源尚未下载完成,因此之前总是不显示。 其实你不要关网页,按一下ESC,也可以看到这样的效果。具体原因跟 @金一鸣 和 @huiter 的答案差不离 我去买东西的时候猛砍价,
对方直呼亏本宁死不卖,
转身就走的一瞬间
他又同意了 造成这个问题的原因主要是浏览器请求的某些资源传输过于缓慢或者网络不可达。

举个例子:
这是一个很常见的例子。假定我们访问国内某先进人士的个人博客站点。该站点带有一键分享文章到twitter的功能。
对于博客本身内容,由于其托管在国内,网络访问良好。对于twitter分享的小控件由于众所周知的原因其相关的js文件无法下载。
如果这时候博主一时疏忽,把这个js文件的搞成同步加载了。那问题就出现了,博文内容已加载完毕但是还不能渲染,因为还差这一个文件得等他返回。所以长时间一片空白。一旦触发标签关闭,首先就会中断正在请求的链接。在链接中断的一瞬间,网页就完成了渲染,下一个瞬间这个标签或窗口也被销毁了。(有次可见现代浏览器渲染的速度是如此惊人。感觉上网慢更多的还是网络本身的问题,其实与使用哪种浏览器关系不是太大)
其实此时已加载的内容完全可以先渲染。如果网站开发的时候设计得当这些问题本能避免。当然也不是只哟这种情况,其他可能的情况还包括引用了不可靠的站外资源、突发性的CDN节点宕机、DNS的宕机或污染以及其他网络故障都可能导致此问题。

作为一般网页浏览的用户如发现此问题,先排除偶发因素。如果仅仅是短时间内有这种问题后续不在复发,那么不必多虑一般是网站方面的问题造成的。如果你发现自己最近访问的网页不断的频繁有此问题出现,我想你是时候学习些“黑科技”了。

您可能想查找下面的文章:

相关文章

  • 2018-12-03html5实现分层屏幕适配
  • 2018-12-03深入解析HTML5中的Blob对象的使用_html5教程技巧
  • 2018-12-03实现卡片3D翻转效果
  • 2018-12-03详解HTML5使用DOM进行自定义控制示例代码
  • 2018-12-03想尝试开发些HTML5小游戏,请大大们推荐款JS游戏引擎,轻量的,简单的有么?
  • 2018-12-03详解html5 Canvas drawing的示例代码 (一)
  • 2018-12-03canvas如何绘制时钟?canvas画环形时钟的实现过程
  • 2018-12-03对Tap事件和Tap点透原理的分析
  • 2017-08-06html5 浏览器支持 如何让所有的浏览器都支持HTML5标签样式
  • 2018-12-03HTML5新特性之Mutation Observer代码详解

文章分类

  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure

最近更新的内容

    • 毛毛虫爬行动画怎样实现
    • 大一计算机学生,如何自学成为一名前端开发工程师?
    • 分享几款炫酷的HTML5实现的图片特效
    • HTML5 History API 实现无刷新跳转
    • 【HTML5】3D模型--百行代码实现旋转立体魔方实例
    • Canvas属性方法整理
    • 5个你不知道的HTML5的接口介绍_html5教程技巧
    • HTML5 Canvas 起步(2) - 路径
    • 用css3实现打点效果实例讲解
    • 22个HTML5 技巧三

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有