<!DOCTYPE HTML><HTML><head> <link href='http://2.cuzillion.com/bin/resource.cgi?type=CSS&sleep=10&n=2&t=1379426970&.CSS?v=1010' rel='stylesheet' /></head><body> <h1>Hello World!</h1></body></HTML>
Hello world将在10秒后显示
http://plnkr.co/edit/HyueD8agoYVmCfuRwjGJ?p=preview
解决方法 当链接样式表完全加载后,当前浏览器将在链接样式表之后呈现内容.这可以避免内容闪烁,否则您将始终在没有应用样式表规则的情况下短时间看到页面.并且因为样式表有10秒的延迟,页面渲染后的部分也会延迟10秒.
这不仅适用于样式表,也适用于脚本(未加载async属性).
编辑
对Ryan Kinal的评论.浏览器有多个通行证.
一个解析HTML代码并开始下载找到的资源的人.
并且一个将执行资源并按顺序呈现HTML的传递.
因此,样式表和脚本不一定按顺序加载.唯一重要的部分是它们按照它们在HTML结构中出现的顺序被应用/执行.
它就像一本建筑手册,需要一步一步地完成这些工作.您可以在构建之前阅读它.订购必要的物品.但是,当您收到该步骤所需的项目时,您只能继续下一步.因此,如果您收到除第一部分以外的所有内容,则无法开始构建.
Google-Developer: Put CSS in the document head
[…] browsers block rendering a web page until all external stylesheets have been downloaded. […] Therefore,it’s important to put references to external stylesheets,as well as inline style blocks,in the head of the page. By ensuring that stylesheets are downloaded and parsed first,you can allow the browser to progressively render the page. […]
Google-Developer: Optimize the order of styles and scripts
[…] Because JavaScript code can alter the content and layout of a web page,the browser delays rendering any content that follows a script tag until that script has been downloaded,parsed and executed. However,more importantly for round-trip times,many browsers block the downloading of resources referenced in the document after scripts until those scripts are downloaded and executed. On the other hand,if other files are already in the process of being downloaded when a Js file is referenced,the Js file is downloaded in parallel with them. […]
MDN: Tips for authoring fast-loading HTML pages: Minimize the number of files
Too much time spent querying the last modifIEd time of referenced files can delay the initial display of a web page,since the browser must check the modification time for each CSS or JavaScript file,before rendering the page.
MDN: Optimizing your pages for speculative parsig
总结Traditionally in browsers the HTML parser has run on the main thread and has blocked after a
</script>tag until the script has been retrIEved from the network and executed. The HTML parser in firefox 4 and later supports speculative parsing off the main thread. It parses ahead while scripts are being downloaded and executed. As in firefox 3.5 and 3.6,the HTML parser starts speculative loads for scripts,style sheets and images it finds ahead in the stream. However,in firefox 4 and later the HTML parser also runs the HTML tree construction algorithm speculatively. The upsIDe is that when a speculation succeeds,there’s no need to reparse the part of the incoming file that was already scanned for scripts,style sheets and images. The downsIDe is that there’s more work lost when the speculation fail
以上是内存溢出为你收集整理的为什么html元素只在加载所有css文件时显示全部内容，希望文章能够帮你解决为什么html元素只在加载所有css文件时显示所遇到的程序开发问题。
如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）