前端静态资源加载顺序
一.js放在head中会立即执行,阻塞后续的资源下载与执行。因为js有可能会修改dom,如果不阻塞后续的资源下载,dom的操作顺序不可控。
正常的网页加载流程是这样的。
- 浏览器一边下载HTML网页,一边开始解析
- 解析过程中,发现<script>标签
- 暂停解析,网页渲染的控制权转交给JavaScript引擎32
- 如果<script>标签引用了外部脚本,就下载该脚本,否则就直接执行
- 执行完毕,控制权交还渲染引擎,恢复往下解析HTML网页
如果外部脚本加载时间很长(比如一直无法完成下载),就会造成网页长时间失去响应,浏览器就会呈现“假死”状态,这被称为“阻塞效应”。html需要等head中所有的js和css加载完成后才会开始绘制,但是html不需要等待放在body最后的js下载执行就会开始绘制,因此将js放在body的最后面,可以避免资源阻塞,同时使静态的html页面迅速显示。将脚本文件都放在网页尾部加载,还有一个好处。在DOM结构生成之前就调用DOM,JavaScript会报错,如果脚本都在网页尾部加载,就不存在这个问题,因为这时DOM肯定已经生成了。
二.js的执行依赖前面的样式。即只有前面的样式全部下载完成后才会执行js,但是此时外链css和外链js是并行下载的。
css需要分块,首页的css独立,其余的css需要动态加载,因为html的绘制会被css阻塞,这样可以减少首次进入时的白屏时间。
三.外链的js如果含有defer="true"属性,将会并行加载js,到页面全部加载完成后才会执行,会按顺序执行。
defer属性的作用是,告诉浏览器,等到DOM加载完成后,再执行指定脚本。
- 浏览器开始解析HTML网页
- 解析过程中,发现带有defer属性的script标签
- 浏览器继续往下解析HTML网页,同时并行下载script标签中的外部脚本
- 浏览器完成解析HTML网页,此时再执行下载的脚本
对于内置而不是连接外部脚本的script标签,以及动态生成的script标签,defer属性不起作用。
四.外链的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://mp.weixin.qq.com/s?__biz=MjM5NjQ5MTI5OA==&mid=2651747208&idx=1&sn=b9fc54300 ...
- 【Bug档案01】Spring Boot的控制器+thymeleaf模板 -使用中出现静态资源加载路径不当的问题 -解决时间:3h
[Bug档案01]Spring Boot的控制器+thymeleaf模板 -使用中出现静态资源加载路径不当的问题 -解决时间:3h 参考文章: (1)[Bug档案01]Spring Boot的控制器+ ...
- SpringMVC配置静态资源加载, 中文乱码处理,注解驱动
常规配置(Controller加载控制) SpringMVC的处理器对应的bean必须按照规范格式开发,未避免加入无效的bean可通过bean加载过滤器进行包含设定或排除设定,表现层bean标注通常设 ...
- Spring MVC中静态资源加载
问题:MVC 静态资源加载,包括 js.css.image加载不出来 由于web.xml中dispatcherServlet中 url-pattern 使用 / 拦截所有访问,而导致静态资源也交给了D ...
- 浏览器了解(五)资源加载顺序
资源加载顺序 在加载web资源时,首先下载html文件,进行html解析,在遇到javascript或css标签时,启动相应的解析机处理. 当遇到外部资源时(如<script src='xxx' ...
- Flask-模板-静态资源加载-jsonify
文章目录 1.模板 1.1 render_template 1.2 模板标签 1.3 模板继承 1.4 模板包含 1.5 模板过滤器 1.6 宏 2. 静态资源加载 3. jsonify() 1.模板 ...
- html src加载外部静态资源,前端性能优化2:静态资源加载与优化
css和js的装载与执行-HTML 页面加载渲染的过程 一个网站在浏览器端是如何进行渲染的呢? 流程示意图.png HTML渲染过程的一些特点 顺序执行.并发加载(单个域名的并发数量是有限的,所以多个 ...
- webpack-dev-server实现静态资源加载和proxy代理
文章目录 webpack专辑 webpack Dev Server 配置选项 1.静态资源访问 2.Proxy 代理 小结 webpack专辑 如何使用webpack实现模块化打包? 如何通过Load ...
- Vue踩坑之二级路由下静态资源加载失败
在使用vue开发过程中意外发现 , 当我的路由加到二级时我的页面背景突然没了? 这是怎么回事呢? 让我们先来复现一下问题吧 起初我的登陆页面的路由是这样子的 我的背景图片是在外部的一个css中写着的 ...
最新文章
- ajax: PopupControlExtender使用
- codeforces315Div1 B Symmetric and Transitive
- 用ASP实现简单的繁简转换
- fnCustomBootTask for local sandbox 在何处赋值
- gitlab ci mysql_php-Gitlab CI:在阶段之间保留MySQL数据
- 在资源管理器中使鼠标右键增加一个命令,运行cmd,同时使得当前路径为资源管理器当前的目录...
- java innerexception_java – 为什么使用反射访问外部类的私有成员抛出IllegalAccessException?...
- 加载mySQL数据到内存_【测试验证】数据库加载到内存占用大小
- 同样是机器学习算法工程师,你的面试为什么过不了?
- MySQL5.7安装手册
- 一个删除文件的批处理
- 集美大学计算机工程学院 曾勇进,电子政务评估方法AHP 的研究及实现.pdf
- C语言常见的关键字汇总
- 微信小程序:使用VantUI组件库
- Python爬虫实战之三:requests-百度/360搜索关键词提交
- linux 薄膜键盘驱动,一份*级薄膜键盘的简历— HHKB 静电容 键盘
- java实现微博后台登录后台发送微博
- kegg 上ko号对应的通路数据
- gmsh+fltk配置过程
- uni-app 框架分析 一
热门文章
- 山科大图形学知识整理和2022考试回忆
- vivado 2019.1 仿真 闪退
- 服务器做raid 10后更换硬盘,做RAID10内置硬盘更换步骤
- 图片、pdf、wrod和excel 在线预览
- HBASE Compaction 简介
- 真菌疾病可能是造成恐龙大灭绝的“元凶”
- android漂亮的进度条,Android编程之NumberProgressBar:漂亮的Android进度条
- networkx中求解平均度_networkX用法整
- How To Turn Up Logging on the Siebel Web Server Extension in Siebel Versions 7.x and 8.x? [ID 477185
- asserted与deasserted