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延迟加载的方式有哪些? 的相关文章

  • Allure在自动化测试中的应用!

    01 Allure的简介及使用 1 应用场景 自动化的结果一定是通过一个报告来进行体现 Allure 是一个独立的报告插件 生成美观易读的报告 目前支持Python Java PHP C 等语言 为dev QA 提供详尽的测试报告 测试步骤
  • 一张图告诉你如何提高 API 性能

    API 性能是指一个 API 在执行其功能时的效率和性能表现 通常用于衡量 API 的响应时间 吞吐量 可伸缩性和稳定性等方面的表现 API 性能的指标包括 响应时间 API 的响应时间是指从发出请求到接收到响应所需的时间 较低的响应时间通
  • input标签是什么?input标签属性有哪些

    input标签属于什么标签 input标签属性有哪些 相信刚接触的表单的小白应该很陌生 那么接下来我们就来讲一下input标签属性有哪些 首先小编在这里谢谢大家一直的支持 每天都会更新十个web前端基础内容 需要的可以关注我 另外也可以进我
  • html登录页面

    效果图 html代码 index html
  • React重新渲染的触发机制及其优化策略

    React是一个用于构建用户界面的JavaScript库 它的核心特点之一是使用虚拟DOM Virtual DOM 来实现高效的组件渲染 那组件重新渲染的机制是如何呢 基于这些机制 如果进行优化呢 虚拟DOM是一个用JavaScript对象
  • Web启动项目走Https协议(Webpack版,Umi版和Host代理版)

    需求 Web项目的启动 一般是默认的http协议 在某些业务需求时 需要走https来调试 Webpack版本 只需在webpack的devServer中配置就可以了 devServer host 0 0 0 0 port 8080 htt
  • 父容器display:flex后,子元素的内部元素height:100%无效解决方法

    父容器display flex后 子元素的内部元素height 100 无效解决方法 解救办法 父类容器position relative 子元素 position absolute width 100 height 100 效果图 代码如
  • 什么是javascript内存泄漏?以及解决方法

    什么是javascript内存泄漏 以及解决方法 一 什么是javascript内存泄漏 二 常见的内存泄漏 1 意外的全局变量 通常是变量未被定义或者胡乱引用了全局变量 2 计时器 3 闭包 4 事件监听未被移除 5 console lo
  • vue/cli3添加自定义icon图标

    1 从阿里巴巴矢量图表库将需要的图标 加入购物车 点击购物车 2 选择添加至项目 3 下载到本地 放到项目中 4 在main js中引入iconfont css文件 以实际位置为准 import assets fonts download
  • MYSQL篇——性能调优专题

    MYSQL是业界最常使用的数据库 本文以5 7为主 从数据结构到性能调优阐述 深入理解mysql 但是本文只是九牛一毛 若对MYSQL感兴趣建议阅读源码 官方文档 文章目录 MYSQL调优篇 深入理解Mysql索引底层数据结构与算法 Exp
  • C之(9)函数内联(inline)深入分析

    C之 9 函数内联 inline 深入分析 Author Once Day Date 2023年8月9日 漫漫长路 有人对你微笑过嘛 参考引用文档 Using the GNU Compiler Collection GCC Inline 文
  • 浅析赋值、浅拷贝、深拷贝的区别

    1 原理 赋值 将某一对象赋给某个变量的过程 称为赋值 浅拷贝 浅拷贝是创建一个对象 这个对象有着原始对象属性值的一份精准拷贝 如果属性是基本类型 拷贝的就是基本类型的值 如果属性是引用类型 拷贝的就是内存地址 如果其中一个对象改变了这个地
  • 提升应用性能的关键步骤——UniApp性能优化策略与技巧详解

    前言 作者主页 雪碧有白泡泡 个人网站 雪碧的个人网站 推荐专栏 java一站式服务 前端炫酷代码分享 uniapp 从构建到提升 从0到英雄 vue成神之路 解决算法 一个专栏就够了 架构咱们从0说 数据流通的精妙之道 文章目录 前言 代
  • 15 个高级 Java 多线程面试题及回答

    在任何Java面试当中多线程和并发方面的问题都是必不可少的一部分 如果你想获得任何股票投资银行的前台资讯职位 那么你应该准备很多关于多线程的问题 在投资银行业务中多线程和并发是一个非常受欢迎的话题 特别是电子交易发展方面相关的 他们会问面试
  • Js中的defer属性和async属性

    Js中的defer属性和async属性 一 defer和async 1 defer 指外部js文件和当前html页面同时加载 异步加载 但只在当前页面解析完成之后执行js代码 async 指外部js文件和当前html页面同时加载 异步加载
  • 点击按钮复制链接

    做点击按钮复制链接 网上找的方法是用原生js document execCommand Copy window clipboardData setData Text url value 发现微信上存在不兼容 在安卓和PC段都可以 但是在苹果
  • 探索CSS:从入门到精通Web开发(二)

    前言 当我们谈论网页设计和开发时 CSS 层叠样式表 无疑是其中的重要一环 作为HTML的伴侣 CSS赋予网页以丰富的样式和布局 使得网站看起来更加吸引人并且具备更好的可读性 本书将通过一系列深入浅出的方式 带你从入门到精通CSS 探索We
  • 记一次性能优化,单台4核8G机器支撑5万QPS!

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

    本文内容主要包括以下几个方面 分析查询SQL MySQL查询优化器 数据库存储结构 索引 索引维护 索引设计 SQL优化 表结构设计 分库分表 查询功能架构设计 分析查询SQL MySQL提供了一个性能分析工具 EXPLAIN 它可以帮助我
  • Redis10大性能优化策略

    1 Redis为什么变慢了 1 Redis真的变慢了吗 对 Redis 进行基准性能测试 例如 我的机器配置比较低 当延迟为 2ms 时 我就认为 Redis 变慢了 但是如果你的硬件配置比较高 那么在你的运行环境下 可能延迟是 0 5ms

随机推荐

  • 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依然对程序的性能不断地做优化 让用户的体验更好 性能优化的核心思想就是快 可以预先准备数据 如缓存的使用 可以