开发者社区> damon风> 正文

在HTML中使用JavaScript(浏览器对js的加载机制分析)

简介: 前言:   向HTML页面中插入JavaScrip的主要方法,就是使用标签。主要探讨标签的在HTML页面的渲染机制。对应的业务场景:从js的加载机制,去优化首次加载页面白屏时间过长的问题   要点:   1.script标签用外链的src引入文件时,内嵌的js代码无效。
+关注继续查看

前言:

  向HTML页面中插入JavaScrip的主要方法,就是使用<script>标签。主要探讨<script>标签的在HTML页面的渲染机制。对应的业务场景:从js的加载机制,去优化首次加载页面白屏时间过长的问题

 

要点:

  1.script标签用外链的src引入文件时,内嵌的js代码无效。

  2.只要不存在defer和async属性,浏览器都会按照script元素在页面中出现的先后顺序对他们依次进行解析(文件下载和代码执行)。换句话说,在第一个script元素包含的代码解析完成后,第二个script包含的代码才会被解析,然后第三个,第四个……。这种方式会阻塞页面的渲染。

  3.defer:延迟脚本。脚本会被延迟到整个页面都解析完毕后再运行。相当于告诉浏览器立即下载,但是延迟执行。这种方式不阻塞页面的渲染。h5规范要求脚本按照出现的顺序执行,因此第一个延迟的脚本会优先于第二延迟脚本执行,都会先于DOMContentLoaded事情。在现实中,可能顺序不能一定得到保证。ps:用最新谷歌浏览器测试过,能保证顺序。

  4.async:异步脚本。与defer类似,告诉浏览器立即下载文件,但是延迟执行,也不阻塞页面渲染。但是不能保证执行顺序。所有,带有async属性的script文件之间无法保证顺序,不应该有包含互相依赖的js代码。

 

补充:来自阮一峰博客对defer和async异同点说明

defer与async的区别是:defer要等到整个页面在内存中正常渲染结束(DOM 结构完全生成,以及其他脚本执行完成),才会执行;async一旦下载完,渲染引擎就会中断渲染,执行这个脚本以后,再继续渲染。一句话,defer是“渲染完再执行”,async是“下载完就执行”。另外,如果有多个defer脚本,会按照它们在页面出现的顺序加载,而多个async脚本是不能保证加载顺序的。

总结:

  一点思考:

  1、一般性都要保证js文件的引入顺序就是它的执行顺序,所以async慎用。

  2、script的解析包括:js文件的下载和执行。下载可不阻塞页面渲染,执行一定会阻塞页面渲染(有待考究)。

  3、假如defer在现代浏览器(特别是移动端),都能遵循h5规范按顺序执行。那么是否可以在每个script标签加上defer属性,优点如下:1.js文件解析不阻塞HTML页面的渲染。2.js文件解析可分为两步,第一步下载js文件,相较不加defer属性的多个script标签而言,加了defer可实现异步并行下载script文件(有待考究);第二部解析js文件,按顺序同步执行js代码。以此达到最快的js解析速度(下载js文件效率提高)。

  以上总结是一些思考,有些地方有待demo测试验证。

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
javascript 表达式、括号、常用函数和jquery库怎么样实现的分析
(一)javascript表达式 表达式是什么?表达式是对变更进行赋值、更改或计算等操作的语句。它是变量、常量、操作符的综合。根据操作符的不类型,可以分为字符操作表达式、赋值表达式、逻辑表达式、关系表达式、自增自减表达式、位表达式等。
744 0
java-工具-tomcat-加载机制
最近看了Tomcat后, 对Tomcat类加载还不是很清楚, 在网上找了这篇文章, 很赞.  原文排版更精美, 推荐阅读原文. 前言   说到本篇的tomcat类加载机制,不得不说翻译学习tomcat的初衷。
1374 0
DalekJS – 基于 JavaScript 实现跨浏览器的自动化测试
  在 Web 项目中,浏览器兼容以及跨浏览器测试是最重要的也是最费劲的工作。DalekJS 是一个基于 JavaScript(或 Node.js) 的免费和开源的自动化测试接口。它能够同时运行测试一组流行的浏览器(Chrome,IE,Firefox 和 WebKit)。
660 0
Java对文件的读、写随机访问,RandomAccessFile类的使用分析
  在网上看了一些关于java中的RandomAccessFile类的介绍,又经过查看Java API和自己编的测试程序,总算是对RandomAccessFile的使用有了一定的了解。自己做了以下比较详细的总结吧。
1067 0
javascript:使用document.getElementById读取数据为空分析
  今天写个网页,想在页面加载onLoad时,动态显示由后台其他程序传来的数据时,用document.getElementById获取控件对象总是为空。但是检查了这个id确实是存在的。在网上查阅一番后才知道了其中的原因。
946 0
+关注
damon风
温文尔雅
11
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
JS零基础入门教程(上册)
立即下载
性能优化方法论
立即下载
手把手学习日志服务SLS,云启实验室实战指南
立即下载