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

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

  HTML页面加载和解析流程

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

2. 浏览器开始载入html代码,发现<head>标签内有一个<link>标签引用外部CSS文件。

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

4. 浏览器继续载入html中<body>部分的代码,并且CSS文件已经拿到手了,可以开始渲染页面了。

5. 浏览器在代码中发现一个<img>标签引用了一张图片,向服务器发出请求。此时浏览器不会等到图片下载完,而是继续渲染后面的代码。

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

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

8. Javascript脚本执行了这条语句,它命令浏览器隐藏掉代码中的某个<style>(style.display=”none”)。杯具啊,突然就少了这么一个元素,浏览器不得不重新渲染这部分代码。

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

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

11. 浏览器召集了在座的各位<div><span><ul><li>们,“大伙儿收拾收拾行李,咱得重新来过……”,浏览器向服务器请求了新的CSS文件,重新渲染页面。

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

   2.还有就是最好将无论内部或是外部JS文件放到所有html内容之后,这样会令用户感觉页面加载速度变快了,否则如果将所有外部文件(包括css和JS)引用都放到<head>中,意味着必须等到全部的JS代码都被下载解析和执行完毕后,才能开始呈现页面的内容(当浏览器遇到<body>),这样会导致呈现页面时出现明显的延迟,二延迟期间的浏览器窗口将是一片空白。

时间: 2024-10-09 10:07:17

html、css、js文件加载顺序及执行情况的相关文章

【转】html、css、js文件加载顺序及执行情况

原链接:http://www.cnblogs.com/Walker-lyl/p/5262075.html 今天看书,看到html,css,js加载执行情况,发现自己并不是真正的了解,网上搜了半小时依然未弄明白,就在这时我找到了让我恍然大悟的一段话,如下: HTML页面加载和解析流程  1. 用户输入网址(假设是个html页面,并且是第一次访问),浏览器向服务器发出请求,服务器返回html文件.  2. 浏览器开始载入html代码,发现<head>标签内有一个<link>标签引用外部

前端设计中关于外部js文件加载的速度优化

在一般情况下,许多人都是将<script>写在了<head>标签中,而许多浏览器都是使用单一的线程来加载js文件的,从上往下,从左往右. 若是加载过程出错,那么网页就会阻塞,就像许多网站用Google的CDN库,而我们在墙内访问一样.页面不会出来,一直加载这个js文件,直到浏览器放弃加载为止! 1 <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default

JS文件加载:比较async和DOM Script

async与script动态加载都能使文件异步加载,本文叙述它们对页面渲染和load加载的影响方面. 目前我用demo.js作为执行文件操作.代码: var now = function() { return +(new Date()); } var t_s = now(); while(now() - t_s < 2000) { } 用sleep.php作为请求文件操作.代码: <?php sleep(3); echo 'var bb'; ?> 1. 一般script标签加载 <

redis重启后,相关文件加载顺序

同时存在aof和rdb文件时redis重启后,加载顺序是什么? 先加载的是aof文件

java web项目中classes文件夹下的class和WEB-INF/lib中jar里的class文件加载顺序

如果是发布到weblogic的话,可以在WebContent\WEB-INF\weblogic.xml里面配置.参考配置如下:<?xml version="1.0" encoding="UTF-8"?><weblogic-web-app xmlns="http://www.bea.com/ns/weblogic/90"xmlns:xsi="http://www.w3.org/2001/XMLSchema-instanc

js文件加载

遇到个问题,js文件在jsp页面末尾加载时,有个注意事项: 这种方式加载时,总是检测不到js文件. 但是,但是,但是: 这么加载时,检测到了JS文件(去掉了 type="javascript" 字段) 学以受用

文件加载顺序问题

今天在修改之前项目代码时,需要新增一块逻辑,逻辑中有用到其它文件中的方法,刚开始直接加载那个文件,还是有报错点,检查后发现是因为加载文件顺序问题,应该先加载通用方法,再加载主方法,如果先加载主方法,主方法中用到了通用方法中的内容,就会报错了.因此在后续代码书写规范时,要搞清楚各个方法文件的内容和顺序,最好在一些需要用到其它文件方法时,使用function_exists判断下,如果未定义的话再重新加载下相应方法,这样可以做到万无一失 原文地址:https://www.cnblogs.com/xin

DedeCms 文件加载顺序原理介绍

DedeCms 织梦cms可以说是国内最出名的cms系统了,对于我们研究cms,二次开发cms都是一个很好地学习. 下面分享下dedecms文件是如何加载模板是如何替换的. 比如织梦,ecshop这类模板引擎系统,研究它们的原理,就是从安装根目录的index.php看起来,看看都引入了那些文件,这些文件又起到了什么作用. 织梦的index首先判断了/data/common.inc.php这个文件存不存在,存在就是已经安装过了,否则就是没安装过,跳到install/index.php. 接下来引入

CI 中css样式或者js样式加载不进来的情况

首先,目录应该是放在根目录下面的,和 application 目录同级 然后再application\config\config.php ,将默认路径配置成为自己的本访问路径 $config['base_url'] = 'http://localhost/myblog/'; 页面中通过这样的方法调用 <link href="<?=base_url().'css/base.css'?>" rel="stylesheet"> 就这样直接调用会报错