位置: 编程技术 - 正文

学习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例题)

  • 退回的所得税与增值税的财务处理?
  • 现金流量表现金流量项目明细分类
  • 股权投资公司属于金融企业吗
  • 客户到期不付款如何处理
  • 本地的住宿费怎么交
  • 主营业务成本可以暂估吗
  • 成本类科目有哪些口诀
  • 周转材料核算科目是什么
  • 进项税额转出要补所得税吗
  • 报销交通费的会计怎么做
  • 实际利率法的计算过程
  • 工程违约金收入如何入账
  • 支付外聘老师的培训费
  • 自创商誉企业所得税可以扣除吗
  • 发票红冲钱怎么退给对方
  • 技术服务费属于无形资产吗
  • 外贸企业购买生产车辆
  • 后续支出均应计入当期损益
  • 小微企业附加税减半
  • 承兑汇票背书用什么方法?
  • 土地投资入股需要什么资料
  • 开电子发票是填不含税单价吗
  • 收到总公司拨款发奖金如何入账
  • 退回的发票怎么处理
  • 在建工程工程款优先受偿权
  • 现金流量表的编制基础是权责发生制
  • 如何把文件夹加密码锁手机
  • 税额差异会计分录
  • php变量底层实现
  • php中substr_replace
  • php模板引擎语法
  • php中false的作用
  • 业务招待费会计分录
  • 特许权使用费包括哪些内容
  • Laravel5.5新特性之友好报错以及展示详解
  • 废旧物资回收企业所得税优惠政策
  • 收取的延期付款利息会计调账处理
  • 生产企业成本会计难吗?
  • SSD目标检测算法
  • 卡比托丽娜·瓦西里耶娃
  • vue脚手架配合springsecurity
  • 雪花算法时钟回拨
  • 微擎框架开发小程序
  • 金蝶系统采购发票
  • 为什么计入资本公积
  • 理财收益 投资收益
  • 进口货物如何支付外汇
  • 权责发生制是根据发票入账吗
  • 材料采购如何做好市场调研工作
  • 开票金额和发票金额
  • 公司年度汇算清缴费用多少
  • 劳务费个人所得税核定征收
  • 固定资产对外投资通过固定资产清理吗
  • 更换公司新公章流程
  • 购买固定资产是应付账款还是其他应付款
  • 公司经营范围怎么填
  • sql server复制表数据
  • sql语句大全实例教程
  • windows vista
  • Windows Server 2008如何改动服务器名称与管理员密码?
  • linux系统的电脑如何共享
  • ghost重装步骤
  • 重装win7系统后鼠标键盘不能用
  • win10预览版绿屏重启解决
  • win7系统怎么禁止更新
  • win8如何进入metro界面
  • Quick cocos2dx-Lua(V3.3R1)学习笔记(7) ---计时器,我是个定时吃饭睡觉的好孩子
  • cocos资源释放
  • dos字符串替换
  • 网页字体大小调整方案
  • shell脚本编程实例
  • js中排序的函数
  • 手游开发商和发行商有哪些
  • jquery上滑下滑
  • jquery插件库怎么导入
  • python深入浅出
  • 广东税务局一般几点上班
  • 矿山占用荒山是什么意思
  • 湖州市2020年最低生活保障
  • 四川职工医保联网了吗
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设