位置: 编程技术 - 正文

学习javascript文件加载优化(学javascript的书)

编辑:rootadmin

推荐整理分享学习javascript文件加载优化(学javascript的书),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:javascript学到什么程度,学javascript的书,javascript怎么学好,javascript学了有什么用,学javascript的书,javascript怎么学好,javascript怎么学好,javascript要学到什么程度,内容如对您有帮助,希望把文章链接给更多的朋友!

在js引擎部分,我们可以了解到,当渲染引擎解析到script标签时,会将控制权给JS引擎,如果script加载的是外部资源,则需要等待下载完后才能执行。 所以,在这里,我们可以对其进行很多优化工作。

放置在BODY底部

为了让渲染引擎能够及早的将DOM树给渲染出来,我们需要将script放在body的底部,让页面尽早脱离白屏的现象,即会提早触发DOMContentLoaded事件. 但是由于在IOS Safari, Android browser以及IOS webview里面即使你把js脚本放到body尾部,结果还是一样, 所以这里需要另外的操作来对js文件加载进行优化.

DEFER加载

这是HTML4中定义的一个script属性,它用来表示的是,当渲染引擎遇到script的时候,如果script引用的是外部资源,则会暂时挂起,并进行加载。 渲染引擎继续解析下面的HTML文档,解析完时,则会执行script里面的脚本。

他的支持度是<=IE9的. 并且,他的执行顺序,是严格依赖的,即:

当页面解析完后,他便会开始按照顺序执行 outside1 和 outside2文件。如果你在IE9以下使用defer的话,可能会遇到 它们两个不是顺序执行的,这里需要一个hack进行处理,即在两个中间加上一个空的script标签

ASYNC加载

学习javascript文件加载优化(学javascript的书)

async是H5新定义的一个script 属性。 他是另外一种js的加载模式。

渲染引擎解析文件,如果遇到script(with async) 继续解析剩下的文件,同时并行加载script的外部资源 当script加载完成之后,则浏览器暂停解析文档,将权限交给JS引擎,指定加载的脚本。 执行完后,则恢复浏览器解析脚本

可以看出async也可以解决 阻塞加载 这个问题。不过,async执行的时候是异步执行,造成的是,执行文件的顺序不一致。即:

这时,谁先加载完,就先执行谁。所以,一般依赖文件就不应该使用async而应该使用defer.defer的兼容性比较差,为IE9+,不过一般是在移动端使用,也就不存在这个problem了。

脚本异步

脚本异步是一些异步加载库(比如require)使用的基本加载原理. 直接上代码:

这时候,可以异步加载文件,不会造成阻塞的效果.但是,这样加载的js文件是无序的,无法正常加载依赖文件。这时候,我们需要对上述函数进行优化.

但是,使用脚本一步加载的话,需要等待css文件加载完后,才开始进行加载,不能充分利用浏览器的并发加载优势。而使用静态文本加载async或者defer则不会出现这个问题。

使用脚本异步加载时,只能等待css加载完后才会加载使用静态的async加载时,css和js会并发一起加载

关于这三种如何取舍,那就主要看leader给我们目标是什么,是兼容IE8,9还是手机端,还是桌面浏览器,或者两两组合。 但是对于单独使用某一个技能的场景,使用时需要注意一些tips。

1、js文件放置位置应该放置到body末尾2、如果使用async的话,最后加上defer以求向下兼容

通常,我们使用的加载都是defer加载,因为很强的依赖关系。

标签: 学javascript的书

本文链接地址:https://www.jiuchutong.com/biancheng/380387.html 转载请保留说明!

上一篇:复杂的javascript窗口分帧解析(复杂的字)

下一篇:基于JavaScript实现弹出框效果(javascript例题)

  • 进项税额转出的例题
  • 其他应收款平账怎么做分录
  • 小微企业免征工会经费
  • 本年利润期末一般有余额吗
  • 企业发生破产清算
  • 企业进行税收筹划
  • 超市里的摊位租金贵吗
  • 17%增值税发票怎么计算成13%
  • 用友软件作废凭证
  • 开个人普发票需要什么资料?
  • 需要预缴增值税
  • 营业执照首次年报
  • 审计费用需要计什么科目
  • 新公司领取营业执照后的流程
  • 代销商品手续费计入
  • 企业财务负责人和办税人哪个责任大
  • 工程未结算能主张工程款吗
  • 对外开具发票
  • 负债判断
  • 二手车交易增值税按照多少征收税率减半征收
  • 免税农产品抵扣政策
  • 勒索病毒文件怎么恢复
  • 调解仲裁法什么时候实施
  • 如何备份计算机的注册表
  • php 字符串
  • 企业购入固定资产在每期末应使用公允价值法进行计量
  • 财政扶持企业政策
  • 房地产开发公司组织架构
  • 调制解调器的作用包括
  • php缓存原理
  • 二手车交易如何开票
  • 出差补贴如何入账报销
  • 所有者权益会计要素包括
  • 超过认证错误限制
  • 记账凭证的总账科目是什么
  • php连接mysql8.0
  • 汉字转拚音
  • thinkphp i方法
  • pytorch 例子
  • 微信公众号的推送
  • 审计外聘人员支付标准
  • 融资租赁各方
  • 用友t3资产负债表怎么生成季报
  • 小规模纳税人是什么意思
  • 进项税额转出期限是多久
  • 事业单位小规模纳税人增值税账务处理
  • 开具信用证的费用能开专票吗
  • 航天金税服务费280元每年都交吗
  • 售后回购融资租赁的会计处理
  • 营改增现代服务中合同能源管理服务
  • 本期预付的费用属于本期费用吗
  • 生产性服务企业税率
  • 游戏公司的主营业务成本
  • 应收账款的审计方式和手段
  • 以前年度多计提的社保费怎么冲回
  • 哪些税费计入税金及附加科目
  • 政府部门有税务和审计审查吗
  • 其他非流动资产包括哪些
  • 隐藏在大山深处的罪恶
  • windows7 ip地址冲突
  • win10病毒与防护
  • ubuntu ftp服务器怎么搭建
  • 潘 pan
  • win7打开游戏显示已停止工作
  • js实例教程
  • nodejs实现文件压缩下载
  • js函数详解
  • jQuery ajaxForm()的应用
  • 代码行数不够了,怎么弄多行
  • jQuery Easyui DataGrid点击某个单元格即进入编辑状态焦点移开后保存数据
  • javascript中checkbox使用方法简单实例演示
  • android pipepline
  • python中set用法
  • 云南省税务局app缴费
  • 深圳如何打印个人征信
  • 怎么注册用户名短的淘宝账号
  • 网上缴公积金怎么查询
  • 国税局巡察整改方案
  • 在网上缴费后如何退款
  • 增值税发票打印机怎么调整打印位置
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设