登录  /  注册

html、css以及js文件加载顺序及执行情况

迷茫
发布: 2017-03-25 11:11:24
原创
2068人浏览过

今天看书,看到html,css,js加载执行情况,发现自己并不是真正的了解,网上搜了半小时依然未弄明白,就在这时我找到了让我恍然大悟的一段话,如下:

HTML页面加载和解析流程 

1. 用户输入网址(假设是个html页面,并且是第一次访问),浏览器向服务器发出请求,服务器返回html文件。 

2. 浏览器开始载入html代码,发现

标签内有一个标签引用外部CSS文件。 

3. 浏览器又发出CSS文件的请求,服务器返回这个CSS文件。 

4. 浏览器继续载入html中

部分的代码,并且CSS文件已经拿到手了,可以开始渲染页面了。 

5. 浏览器在代码中发现一个html、css以及js文件加载顺序及执行情况标签引用了一张图片,向服务器发出请求。此时浏览器不会等到图片下载完,而是继续渲染后面的代码。 

6. 服务器返回图片文件,由于图片占用了一定面积,影响了后面段落的排布,因此浏览器需要回过头来重新渲染这部分代码。 

7. 浏览器发现了一个包含一行Javascript代码的<script>标签,赶快运行它。 </script>

8. Javascript脚本执行了这条语句,它命令浏览器隐藏掉代码中的某个

9. 终于等到了的到来,浏览器泪流满面…… 

10. 等等,还没完,用户点了一下界面中的“换肤”按钮,Javascript让浏览器换了一下<link>标签的CSS路径。 

11. 浏览器召集了在座的各位

  • 们,“大伙儿收拾收拾行李,咱得重新来过……”,浏览器向服务器请求了新的CSS文件,重新渲染页面。

总结:1.总的来说就是按照html文档的顺序加载

   2.还有就是最好将无论内部或是外部JS文件放到所有html内容之后,这样会令用户感觉页面加载速度变快了,否则如果将所有外部文件(包括css和JS)引用都放到

中,意味着必须等到全部的JS代码都被下载解析和执行完毕后,才能开始呈现页面的内容(当浏览器遇到),这样会导致呈现页面时出现明显的延迟,二延迟期间的浏览器窗口将是一片空白。

 

以上就是html、css以及js文件加载顺序及执行情况的详细内容,更多请关注php中文网其它相关文章!

智能AI问答
PHP中文网智能助手能迅速回答你的编程问题,提供实时的代码和解决方案,帮助你解决各种难题。不仅如此,它还能提供编程资源和学习指导,帮助你快速提升编程技能。无论你是初学者还是专业人士,AI智能助手都能成为你的可靠助手,助力你在编程领域取得更大的成就。
来源:php中文网
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
最新问题
关于CSS思维导图的课件在哪? 课件
凡人来自于2024-04-16 10:10:18
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2024 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号