关于js css html加载顺序整理
参考原文 豆豆蛙:关于js css html加载顺序整理
1.js放在head中会立即执行,阻塞后续的资源下载与执行。因为js有可能会修改dom,如果不阻塞后续的资源下载,dom的操作顺序不可控。
正常的网页加载流程是这样的。
浏览器一边下载HTML网页,一边开始解析
解析过程中,发现<script>标签
暂停解析,网页渲染的控制权转交给JavaScript引擎
如果<script>标签引用了外部脚本,就下载该脚本,否则就直接执行
执行完毕,控制权交还渲染引擎,恢复往下解析HTML网页
如果外部脚本加载时间很长(比如一直无法完成下载),就会造成网页长时间失去响应,浏览器就会呈现“假死”状态,这被称为“阻塞效应”。
html需要等head中所有的js和css加载完成后才会开始绘制,
但是html不需要等待放在body最后的js下载执行就会开始绘制,因此将js放在body的最后面,可以避免资源阻塞,同时使静态的html页面迅速显示。
将脚本文件都放在网页尾部加载,还有一个好处。在DOM结构生成之前就调用DOM,JavaScript会报错,如果脚本都在网页尾部加载,就不存在这个问题,因为这时DOM肯定已经生成了。
2.js的执行依赖前面的样式。即只有前面的样式全部下载完成后才会执行js,但是此时外链css和外链js是并行下载的。
css需要分块,首页的css独立,其余的css需要动态加载,因为html的绘制会被css阻塞,这样可以减少首次进入时的白屏时间。
3.外链的js如果含有defer="true"属性,将会并行加载js,到页面全部加载完成后才会执行,会按顺序执行。
defer属性的作用是,告诉浏览器,等到DOM加载完成后,再执行指定脚本。
浏览器开始解析HTML网页
解析过程中,发现带有defer属性的script标签
浏览器继续往下解析HTML网页,同时并行下载script标签中的外部脚本
浏览器完成解析HTML网页,此时再执行下载的脚本
对于内置而不是连接外部脚本的script标签,以及动态生成的script标签,defer属性不起作用。
4.外链的js如果含有async="true"属性,将不会依赖于任何js和css的执行,此js下载完成后立刻执行,不保证按照书写的顺序执行。因为async="true"属性会告诉浏览器,js不会修改dom和样式,故不必依赖其它的js和css。
async属性的作用是,使用另一个进程下载脚本,下载时不会阻塞渲染。
浏览器开始解析HTML网页
解析过程中,发现带有async属性的script标签
浏览器继续往下解析HTML网页,同时并行下载script标签中的外部脚本
脚本下载完成,浏览器暂停解析HTML网页,开始执行下载的脚本
脚本执行完毕,浏览器恢复解析HTML网页
async属性可以保证脚本下载的同时,浏览器继续渲染。需要注意的是,一旦采用这个属性,就无法保证脚本的执行顺序。哪个脚本先下载结束,就先执行那个脚本。另外,使用async属性的脚本文件中,不应该使用document.write方法。
一般来说,如果脚本之间没有依赖关系,就使用async属性,如果脚本之间有依赖关系,就使用defer属性。如果同时使用async和defer属性,后者不起作用,浏览器行为由async属性决定。
转载于:https://www.cnblogs.com/lexiaofei/p/8078689.html
关于js css html加载顺序整理相关推荐
- JS JQ 页面加载顺序方法的区别
document.ready和onload的区别--JavaScript文档加载完成事件 页面加载完成有两种事件 一是ready,表示文档结构已经加载完成(不包含图片等非文字媒体文件) 二是onloa ...
- css样式加载顺序及覆盖顺序深入理解
代码如下: { height: 100%; width: 200; position: absolute; left: 0; border: solid 2 #EEE; } .curre ...
- css样式加载顺序和覆盖顺序
查找一些教材中(w3schools等),只说css的顺序是"元素上的style" > "文件头上的style元素" >"外部样式文件&qu ...
- 如何使用echo.js实现图片的懒加载(整理)
如何使用echo.js实现图片的懒加载(整理) 一.总结 一句话总结:a.在img标签中添加data-echo属性加载真实图片:<img class="loading" sr ...
- python博客下载本地文件_解决django无法访问本地static文件(js,css,img)网页里js,cs都加载不了...
1.今天网上下载一个博客项目,发现本地访问,js,css加载不了. 我想应该是项目上线的安全措施,但是我想调试项目.找到方法如下 在settings.py里面编辑 添加 STATICFILES_DIR ...
- js插件动态加载js、css解决方案
最近因为工作需要做了一个js自动导入的插件,一开始很天真的以为动态创建个script添加到head中就ok了,试了之后才发现了问题,就是如果同时引入了多个js文件,而且后一个文件中用到了前一个文件中的 ...
- [css] css的加载会阻塞js运行吗?为什么?
[css] css的加载会阻塞js运行吗?为什么? 会阻塞js的执行,因为js可能会去获取或改变元素的样式,所以浏览为了不重复渲染, 等所有的css加载渲染完成后在执行js 个人简介 我是歌谣,欢迎和 ...
- nginx实现动态分离,解决css和js等图片加载问题
nginx实现动态分离,解决css和js等图片加载问题 参考文章: (1)nginx实现动态分离,解决css和js等图片加载问题 (2)https://www.cnblogs.com/sz-jack/ ...
- 用手机UC浏览器页面打开vue项目,图片,css,js都没加载
用手机UC浏览器页面打开vue项目,图片,css,js都没加载 用HBuilder X创建了一个普通的vue项目,在电脑上使用浏览器看没有什么问题,然后提交到了公司的服务器上,发现用手机,除了火狐,谷 ...
最新文章
- 如何检查MyISAM表的错误?
- python散点图图例只显示一个标记点_python – Matplotlib图例:如何分配多个散点值...
- STL总结 (C++)
- matlab调用ansys需要安装mpi,Ansys 14中Fluent并行计算MPI全程详解
- Response响应方法详解
- GitHub 推出原生 iOS 和 Android 客户端
- JAVA常用API或编程工具002---SpringSource Tool Suite:基于Eclipse的Spring应用开发环境
- 眼擎科技CEO朱继志:如何设计自动驾驶的视觉成像系统 | 吃瓜笔记
- HDU2537 8球胜负【水题】
- react 属性与状态 学习笔记
- WM_NOTIFY的使用
- maven安装oracle驱动,maven 安装 Oracle 驱动 ojdbc14.jar
- OA系统四级模块编写测试用例(用户模块)
- photoshop 前端切图基础教程
- 用MATLAB求序列反折
- [CyanogenMOD移植教程] 前言:什么是CyanogenMod
- mysql slave_pending_jobs_size_max_MySQL:关于Wating for Slave workers to free pending events等待...
- php-fpm status,使用php-fpm状态页观察当前的php-fpm状态
- 网络舆情舆论信息监督和收集的现代化技术解决方法
- 贪心——Greedy