Web前端面试指导(三十八):js延迟加载的方式有哪些?

2023-10-29

题目点评

主要考察对程序的性能方面是否有研究,程序的性能是一个项目不断地追求的,通常也是项目完成后需要长期做的一件事情,像腾讯QQ依然对程序的性能不断地做优化,让用户的体验更好,性能优化的核心思想就是快,可以预先准备数据(如缓存的使用),可以按需获取,可以分段获取等都是常见的优化手段。

解题思路

1.defer 属性

<scriptsrc="file.js" defer></script>

浏览器会并行下载 file.js和其它有 defer 属性的script,而不会阻塞页面后续处理。defer属性在IE 4.0中就实现了,超过10多年了!Firefox从 3.5 开始支持defer属性 。

注:所有的defer脚本保证是按顺序依次执行的。

2.async 属性

<scriptsrc="file.js" async></script>

async属性是HTML5新增的。作用和defer类似,但是它将在下载后尽快执行,不能保证脚本会按顺序执行。它们将在onload 事件之前完成。

Firefox3.6、Opera 10.5、IE 9和 最新的Chrome 和 Safari 都支持 async 属性。可以同时使用 async 和 defer,这样IE 4之后的所有IE 都支持异步加载。

3.动态创建DOM方式

<script type="text/javascript">
   function downloadJSAtOnload() {
       varelement = document.createElement("script");
      element.src = "defer.js";
      document.body.appendChild(element);
   }
   if (window.addEventListener)
      window.addEventListener("load",downloadJSAtOnload, false);
   else if (window.attachEvent)
      window.attachEvent("onload",downloadJSAtOnload);
   else window.onload =downloadJSAtOnload;
</script>

4.使用Jquery的getScript()方法

  $.getScript("outer.js",function(){//回调函数,成功获取文件后执行的函数
        console.log("脚本加载完成")
  });

从源码可以看出,这个方法最后还是调用了jQuery.ajax()来请求了js文件的。

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

Web前端面试指导(三十八):js延迟加载的方式有哪些? 的相关文章

  • 科技感十足的網站頁面

    http www bootstrapmb com item 9102 preview
  • TestComplete数据驱动测试教程(三)——修改记录测试

    TestComplete是一款具有人工智能的自动UI测试工具 利用自动化测试工具和人工智能支持的混合对象识别引擎 轻松检测和测试每个桌面 Web和移动应用程序 本文中我们将讲解如何进行数据驱动的测试 方便大家更快更直接的学习TestComp
  • SIMD优化之ARM纯汇编开发

    ARM纯汇编开发 注 这篇文章是两年前写的 现在更新到CSDN 当时认知不足 其中可能有不少错误 敬请行家指正 为什么要用纯汇编 开发效率高 这里可能让很多人大跌眼镜了 纯汇编开发效率高 首先 这个是有限定条件的 需要反复调优的重度运算场景
  • React 中ref的几种用法

    React 中ref的几种用法 1 字符串 通过 this refs a 来引用真实dom的节点 dom 节点上使用
  • 微信小程序开发教程

    一 准备 下载微信小程序开发者工具 下载地址 注册微信小程序 前往注册 微信小程序开发文档 前往阅览 打开开发者工具 用微信扫码进入创建页面 填写配置如下 需要注意的是 AppId可以选择已经注册的账号Appid 也可以选择测试号 区别是测
  • MySQL索引优化(超详细)

    Mysql索引优化 1 索引介绍 1 1 什么时MySQL的索引 MySQL官方对于索引的定义 索引是帮助MySQL高效获取数据的数据结构 MySQL在存储数据之外 数据库系统中还维护着满足特定查找算法的数据结构 这些数据结构以某种引用 指
  • Android性能优化系列:如何合理使用内存

    文章目录 1 Android编译器 2 内存泄漏 3 内存抖动 4 引用 5 取消部分后台服务 6 数据类型 7 自动装箱 8 Sparse数组集 9 ArrayMap 10 循环 11 枚举 12 常量 静态变量 13 字符串 14 本地
  • VUE之Echarts图表x轴y轴提示文字过长处理为省略号

    只需对显示文字格式修改即可 yAxis type category axisLine show false 轴线 axisTick show false 去除刻度 axisLabel formatter function params co
  • uniapp的那些坑

    1 selectedColor不起作用 1 查看位置是否写对 与lis同级 2 是否为16进制 selectedColor写的rgb不支持 3 是否被其他样式覆盖 其他地方也设置过selectedColor 可以全局搜索一下 2 pages
  • 微信小程序开发实战第五讲之授权登录

    上一节 我们实现了简单的通过用户名和密码调用接口进行登录的实战 但是在小程序中 有个特殊的情况 就是很少有厂商去开发一个注册功能或者是通过用户名 密码来登录的逻辑 为什么 因为APP 小程序为了用户体验 是尽量多的避免用户多次输入交互 所以
  • 20最佳代码审查工具-专门为开发人员准备

    程序员总是面临最后期限的压力和很多延误软件设计相当不稳定 整个产品是不稳定的 这种不稳定性的设计软件的原因是 它是不能正常测试 来的工作代码审查工具 的代码审查工具可以帮助web开发人员指出他们哪些区域的程序代码是错误的也可能有机会是不正确
  • 提升应用性能的关键步骤——UniApp性能优化策略与技巧详解

    前言 作者主页 雪碧有白泡泡 个人网站 雪碧的个人网站 推荐专栏 java一站式服务 前端炫酷代码分享 uniapp 从构建到提升 从0到英雄 vue成神之路 解决算法 一个专栏就够了 架构咱们从0说 数据流通的精妙之道 文章目录 前言 代
  • JS 时区时间转换

    业务场景 页面服务器时间是东八区时间 页面 JS 功能需要对比服务器时间和用户本地时间 为兼容世界各地时间 需要将用户本地时间转换为东八区时间 基本概念 格林威治时间 格林威治子午线上的地方时 或零时区 中时区 的区时叫做格林威治时间 也叫
  • HTML、CSS、JavaScript分别实现什么功能?

    学习Web前端开发基础技术需要掌握 HTML CSS JavaScript 那么这三个都是分别实现什么功能的呢 下面和小编一起来看看吧 一 HTML是网页内容的载体 内容就是网页制作者放在页面上想要让用户浏览的信息 可以包含文字 图片 视频
  • 理解HTTP headers之Expires、Cache-Control、IF-Modified-Since

    一 什么是Http headers 当你在浏览器地址栏里键入一个url 你的浏览器将会类似如下的http请求 GET tutorials other top 20 mysql best practices HTTP 1 1 Host net
  • 谷歌(Chrome)浏览器自定义插件

    准备 1 js文件 需要的功能逻辑 2 插件主入口及配置 manifest json 3 插件图标 目录结构 添加插件流程 选择插件文件夹 代码 manifest json name 百度 manifest version 2 versio
  • 点击按钮复制链接

    做点击按钮复制链接 网上找的方法是用原生js document execCommand Copy window clipboardData setData Text url value 发现微信上存在不兼容 在安卓和PC段都可以 但是在苹果
  • node中间件是什么意思?

    node中间件是什么意思 2020 09 11 16 11 17分类 常见问题 Node js答疑阅读 1757 评论 0 中间件是一种独立的系统软件或服务程序 分布式应用软件借助这种软件在不同的技术之间共享资源 中间件位于客户机 服务器的
  • 记一次性能优化,单台4核8G机器支撑5万QPS!

    前言 这篇文章的主题是记录一次Python程序的性能优化 在优化的过程中遇到的问题 以及如何去解决的 为大家提供一个优化的思路 首先要声明的一点是 我的方式不是唯一的 大家在性能优化之路上遇到的问题都绝对不止一个解决方案 如何优化 首先大家
  • 第8章 多媒体嵌入

    学习目标 了解视频 音频嵌入技术 能够总结HTML5视频 音频嵌入技术的优点 了解常用的视频文件格式和音频文件格式 能够归纳HTML5支持的视频和音频格式 掌握HTML5中视频的嵌入方法 能够在HTML5页面中添加视频文件 掌握HTML5中

随机推荐

  • JDK8新特性详解Lambda、StreamAPI、Optional等

    JDK8学习笔记 学习视频地址 https www bilibili com video BV1k64y1R7sA 操作代码 https gitee com rederic study jdk8 git 一 JDK8新特性 1 Lambda
  • 会linux基本命令是脚本语言吗,shell脚本语言与linux命令的联系与区别

    使用linux肯定是要会使用命令的 就算提供有用户界面 绝大部分功能还是要通过命令行去操作的 而shell脚本语言也是运行在linux上的脚本语言 对于服务器运维人员也是几乎必须要掌握的 而shell脚本语言和linux命令有什么联系 有什
  • 毕设——代码5中Keras TensorFlow配置

    问题 pip安装成功两个包后 cmd窗口进行python的import包操作正常 返回到pycharm环境中仍然报错ModuleNotFoundError No module named sklearn datasets 解决办法 step
  • Python基础知识学习:从零到100

    Python基础知识学习 从零到100 基础知识 1 变量 2 控制流 条件语句 3 循环 迭代器 4 列表 集合 数组 数据结构 5 字典 键值数据结构 6 迭代 遍历数据结构 7 类和对象 8 Python 面向对象编程模式 开启 9
  • ubuntu16.04 安装多版本cuda(原10.0,新安装10.1),实现任意切换

    TOC ubuntu16 04 安装多版本cuda 原10 0 新安装10 1 实现任意切换 前言 需求 单位需要使用yolo v5训练模型 可所需的pytorch对cuda的依赖版本较高 而仅仅安装单个高版本的cuda又会与原先的项目产生
  • 面试经典(14)--二叉树镜像

    题目描述 输入一个二叉树 输出该二叉树的镜像 分析与解法 使用先序遍历方式 如果节点是非叶子节点 就交换左子树和右子树指针 注意退出条件即可 掌握前序遍历这个题目解这道题目难度不大 代码如下 struct Node Node m pLeft
  • IMX6学习记录(17)-编译官方SDK,制作镜像,DD烧录

    上面是我的微信和QQ群 欢迎新朋友的加入 1 下载 地址 https www nxp com cn products processors and microcontrollers arm processors i mx applicati
  • 数据分析回头看2——重复值检查/元素替换/异常值筛选

    0 前言 这部分内容是对Pandas的回顾 同时也是对Pandas处理异常数据的一些技巧的总结 不一定全面 只是自己在数据处理当中遇到的问题进行的总结 1 当数据中有重复行的时候需要检测重复行 方法 使用pandas中的duplicated
  • 提高Python编程效率的十个技巧

    1 模块化编程 将代码拆分为模块和函数 提高可重用性和可维护性 合理组织代码 使其易于阅读和理解 2 利用Python标准库 Python标准库提供了众多功能强大的模块和工具 如os re和datetime等 熟悉并善于使用标准库可以加快开
  • PAT C入门题目-7-30 念数字 (15 分)(关于string.h头文件)

    7 30 念数字 15 分 输入一个整数 输出每个数字对应的拼音 当整数为负数时 先输出fu字 十个数字对应的拼音如下 0 ling 1 yi 2 er 3 san 4 si 5 wu 6 liu 7 qi 8 ba 9 jiu 输入格式
  • linux -- 命令行中大于号、小于号的用法

    语法 命令 lt 文件 这是将文件作为命令输入 命令 lt 文件1 gt 文件2 将文件1输入到命令中 然后将结果输出到文件2中
  • tensorflow各版本下载地址

    https pypi org project tensorflow gpu 1 13 0 files 把13改对你想要的版本 转载于 https www cnblogs com xpylovely p 11609250 html
  • 2022 re:Invent 凌云驭势 重塑未来

    2022年11月29日 一年一度的亚马逊 re Invent全球大会在拉斯维加斯再度上演 这是亚马逊云科技第11年举办re Invent 来自全球的5万多客户和合作伙伴参加了此次线下盛会 还有超过30万人线上参会 在此次大会上 亚马逊云科技
  • 埃斯顿服务器上电无显示,埃斯顿伺服常见现象报警及排除

    用户在试用埃斯顿伺服电机时可能会遇见以下的问题 在此我整理一下 希望能帮助到大家 一 过载报警A04 1 伺服电机的配线有误或配线有漏 1 电机U V W相线接错 2 伺服电机侧连接器的插入是否不良 2 伺服驱动器与电机的型号不匹配 检查驱
  • Android 内存泄漏的原因以及解决方案

    内存泄漏是什么 内存泄漏即 ML Memory Leak 指 程序在申请内存后 当该内存不需再使用 但 却无法被释放 归还给 程序的现象 内存泄漏的原因以及解决方案 内存泄漏的原因归根到底就是当需要被回收变量的内存被其他变量引用持有 导致内
  • 光照 (4) 镜面光贴图示例

    通过使用镜面光贴图我们可以可以对物体设置大量的细节 比如物体的哪些部分需要有闪闪发光的属性 我们甚至可以设置它们对应的强度 镜面光贴图能够在漫反射贴图之上给予我们更高一层的控制 step1 对镜面光贴图使用一个不同的纹理单元 见纹理 在渲染
  • 软考高级之系统架构师之项目管理

    今天是2023年09月06日 距离软考高级只有58天 加油 概念 临时性 是指每一个项目都有一个明确的开始时间和结束时间 临时性也指项目是一次性的 风险 风险具有以下特性 客观性 偶然性 相对性 社会性 不确定性 风险的四要素 事件 原因
  • 邮件服务器测试方法

    邮件服务器测试方法一 测试是在问题邮件服务器上完成的 二 登陆问题邮件服务器 使用nslookup命令查看需测试的邮件服务器域名解析记录 找到测试端的DNS可以解析到的MX记录 三 通过TELNET命令进行测试 一 TELNET需注意的事项
  • 什么是爬虫?爬虫的具体作用?

    什么是爬虫 答 爬虫的官方名字 spider 爬虫又被称之为网络蜘蛛 网络机器人等 就是模拟客户端发送网络请求 接收请求响应 按照一定的规则自动的抓取互联网信息的程序 爬虫的具体作用 答 数据采集 搜索引擎 软件测试 短信轰炸等等 一般是用
  • Web前端面试指导(三十八):js延迟加载的方式有哪些?

    题目点评 主要考察对程序的性能方面是否有研究 程序的性能是一个项目不断地追求的 通常也是项目完成后需要长期做的一件事情 像腾讯QQ依然对程序的性能不断地做优化 让用户的体验更好 性能优化的核心思想就是快 可以预先准备数据 如缓存的使用 可以