html页面加载顺序
页面总是从上往下执行
CSS为什么要放在头部
1.CSS可以和html一起同时进行解析和渲染
2.如果你把CSS放到body后面,不但没有跟html一起进行加载渲染,还要花费额外时间去加载CSS,这样将导致首先加载到一个没有样式的页面结构,等到CSS加载完了之后,突然又变为一个有样式的结构,这样用户体验非常不好
JavaScript为什么要放在尾部
JavaScript解析加载时,会暂停html的解析和css渲染,把页面的控制权,交给JavaScript引擎,等到JavaScript加载完了之后再把控制权交给html页面,然后html继续开始解析加载,如果JavaScript文件很多,需要加载的时间很久,甚至迟迟加载不了,这将导致页面卡死,处于一种假死状态,对用户体验不好
具体的流程是这样:
1.浏览器一边下载html网页,一边开始解析
2.解析过程中,发现JavaScript便签
3.暂停解析,网页渲染的控制权转交给JavaScript引擎
4.如JavaScript标签引入外部脚本,就下载脚本,否则就直接执行
5.执行完毕,控制权交还给渲染引擎,恢复往下解析html网页
外链的script包含async或者defer如何处理?
这两个属性只是script标签在header标签中使用的,如果你把它放在body后面是无效的。
script 的这两个属性主要用于其js文件没有操作DOM的情况,这时候就可以将该js脚本设置为异步加载,通过async或defer来标记代码。
async和defer的区别:
0、async和defer都仅对外部脚本有效,对于内置而不是连接外部脚本的script标签,以及动态生成的script标签不起作用。
1、async和defer虽然都是异步的,不过使用async标志的脚本文件一旦加载完成就会立即执行;而使用defer标记的脚本文件,会在 DOMContentLoaded 事件之前(也就是页面DOM加载完成时)执行。
2、如果有多个js脚本文件,async标记不保证按照书写的顺序执行,哪个脚本先下载结束,就先执行那个脚本。而defer标记则会按照js脚本书写顺序执行。
3、一般来说,如果脚本之间没有依赖关系,就使用async属性,如果脚本之间有依赖关系,就使用defer属性。如果同时使用async和defer属性,后者不起作用,浏览器行为由async属性决定。
对于async标记,浏览器的解析过程是这样的:
浏览器开始解析HTML网页
解析过程中,发现带有async属性的script标签
浏览器继续往下解析HTML网页,同时并行下载script标签中的外部脚本
脚本下载完成,浏览器暂停解析HTML网页,开始执行下载的脚本
脚本执行完毕,浏览器恢复解析HTML网页
对于defer标记,浏览器的解析过程是这样的:
浏览器开始解析HTML网页
解析过程中,发现带有defer属性的script标签
浏览器继续往下解析HTML网页,同时并行下载script标签中的外部脚本
浏览器完成解析HTML网页,此时再执行下载的脚本
由于使用了async或defer的script会放在header中,而header又会存在外链css,那么二者有顺序要求吗?
header中script和外链css的位置顺序
先说结论:
如果在html的header中同时有js脚本和外链css,js脚本最好放外链css前面。
其实js的执行是依赖css样式的。即只有css样式全部下载完成后才会执行js。
因为如果脚本的内容是获取元素的样式,宽高等CSS控制的属性,浏览器是需要计算的,也就是依赖于CSS。浏览器无法感知脚本内容到底是什么,为避免样式获取错误,因而只好等前面所有的样式下载完后,再执行JS。
但是如果css下载事件很长的话,js也无法正常运行,导致html无法正常解析出来。如果css的内容下载更快的话,是没影响的,但反过来的话,JS就要等待了,然而这些等待的时间是完全不必要的。
html页面加载顺序的更多相关文章
- 从html页面加载顺序来更好的理解jquery初始化
一,html页面加载顺序 1,用户输入网址(假设是个html页面,并且是第一次访问),浏览器向服务器发出请求,服务器返回html文件:2,浏览器开始载入html代码,发现<head>标签内 ...
- 20180911 关于页面加载顺序引发的JS的undefined/null错误
引用: 百度知道-HTML+JavaScript执行顺序问题 这是我在学习JS滚动播放图片案例意外遇到的一个问题,代码完成后console弹出错误警告: Uncaught TypeError: Can ...
- C# 问题解决思路--《数组bytes未定义》,ASP.NET页面加载顺序
好久没写博客了,废话不多说,直接说问题. 问题发生情况,首先这个是老项目,然后我是第一次修改.当我解决了各种引用,数据库配置之后等类似的问题,我启动的项目的时候,无任何问题,但是当我点击页面的按钮的时 ...
- html页面的加载顺序
页面加载顺序: 解析HTML结构加载外部脚本和样式表文件解析并执行脚本代码构造HTML DOM模型加载图片等外部文件页面加载完毕 window.onload = function () { } / ...
- HTML加载顺序总结测试
首先,页面加载顺序:解析HTML结构.加载外部脚本和样式表文件.解析并执行脚本代码.构造HTML DOM模型.加载图片等外部文件.页面加载完毕. 也就是:html → head → title → # ...
- jquery mobile在页面加载时添加加载中效果 document.ready 和window.onload执行顺序比较
想要添加这个效果,先来弄明白页面的加载和事件执行顺序,看这个简单例子: <html xmlns="http://www.w3.org/1999/xhtml"> < ...
- MVC中 _ViewStart _Layout Index三个页面中的加载顺序
MVC学习中忽然想到一个问题.. 在访问一个Index.cshtml页面时, MVC的加载顺序是怎么样的呢? 首先说下我的结论 . _ViewStart.cshtml . Index.cshtml . ...
- html页面元素加载顺序
一般来说,添加背景图片有三种办法: 直接写在标签的style里面,如: <div style="background-image:url('images/Css.JPG')" ...
- jsp页面中的代码执行加载顺序介绍
1. java是在服务器端运行的代码,jsp在服务器的servlet里运行,而javascript和html都是在浏览器端运行的代码.所以加载执行顺序是是java>jsp>js. 2. j ...
随机推荐
- Spring框架中文件目录遍历漏洞 Directory traversal in Spring framework
官方给出的描述是Spring框架中报告了一个与静态资源处理相关的目录遍历漏洞.某些URL在使用前未正确加密,使得攻击者能够获取文件系统上的任何文件,这些文件也可用于运行SpringWeb应用程序的进程 ...
- Blazor WebAssembly 3.2.0 正式起飞,blazor 适合你吗?
最近blazor更新很快,今天在官方博客上发布了Blazor WebAssembly 3.2.0 RC:https://devblogs.microsoft.com/aspnet/blazor-web ...
- JAVA 之 JSTL
一.什么是JSTL JSP标准标签库(JSTL)是一个JSP标签集合,它封装了JSP应用的通用核心功能. JSTL支持通用的.结构化的任务,比如迭代,条件判断,XML文档操作,国际化标签,SQL标签. ...
- java 之 jsp简介
什么是jsp? JSP全称Java Server Pages,是一种动态网页开发技术.它使用JSP标签在HTML网页中插入Java代码.标签通常以<%开头以%>结束. JSP是一种Java ...
- 解决Vue-cli3.0下scss文件编译过慢、卡顿问题
在使用Vue-cli 3.0构建的项目中,可能存在项目编译过慢的问题,具体表现在编译时会在某一进度比如40%时停顿,等好一会儿才能够编译完成.这使得浏览器中的实时预览也会卡顿,不利于我们快速查看效果, ...
- 《Redis设计与实现》之第十二章:事件
Redis服务器是一个事件驱动程序,服务器需要处理两类事件: 文件事件: 文件事件就是服务器对套接字(socket)操作的抽象,服务器和客户端的通信会产生文件事件 时间事件: 时间事件就是服务器对定时 ...
- Eclipse中获取html jsp 标签的属性提示信息方法
操作方法: windows------preferences----------搜索 html----------找到 html Source这项---------找到 content assist ...
- 题解 AT4867 【[ABC155D] Pairs】
题目 两次二分 首先对ans进行二分,在\([-10^{18},10^{18}]\)之间 考虑怎么check 对于每个ans,枚举每个\(a_i\),二分查找有几个\(a_j\),使得\(a_i\ti ...
- matlab-均值滤波
均值滤波 主要思想为邻域平均法,即用几个像素灰度的平均值来代替每个像素的灰度.有效抑制加性噪声.缺点:容易引起图像模糊,可以对其进行改进,主要避开对景物边缘的平滑处理. 均值滤波器的缺点是存在着边缘模 ...
- 使用npm发布插件
使用npm发布插件 博客说明 文章所涉及的资料来自互联网整理和个人总结,意在于个人学习和经验汇总,如有什么地方侵权,请联系本人删除,谢谢! 简介 npm是一个全球性的包管理工具,上面有着许许多多的前端 ...