js延迟加载的性能优化

2023-11-18

  js的延迟加载有助于提高页面的加载速度,特别是竞价优化站是有一定的好处,今天来说说我是如何优化竞价站打开速度!

  案例:http://yzmb.pengchenggroup.cn/

  动态创建DOM方式

  

  

<script type="text/javascript">
   function downloadJSAtOnload() {
      var element = 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>

  

  

PS: 这里插一句 addEventListener() 也是常考的知识点之一:

    addEventListener() 方法用于向指定元素添加事件句柄。

    使用 removeEventListener() 方法来移除 addEventListener() 方法添加的事件句柄。

    语法:element.addEventListener(event, function, useCapture)
        event (必须)字符串,指定事件名。注意: 不要使用 “on” 前缀。 例如,使用 “click” ,而不是使用 “onclick”。
        function (必须)指定要事件触发时执行的函数。当事件对象会作为第一个参数传入函数。 事件对象的类型取决于特定的事件。例如, “click” 事件属于 MouseEvent(鼠标事件) 对象。
        useCapture (可选)布尔值,指定事件是否在捕获或冒泡阶段执行。【true:事件句柄在捕获阶段执行; false:默认,事件句柄在冒泡阶段执行】

转载于:https://www.cnblogs.com/68xi/p/11555401.html

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

js延迟加载的性能优化 的相关文章

随机推荐

  • [1181]linux两台服务器之间传输文件和文件夹

    文章目录 scp 1 从服务器复制文件到本地 2 复制文件到本地并重命名 3 从服务器复制文件夹到本地 4 从本地复制文件到服务器 不包括文件夹本身 5 从本地复制文件夹到服务器 包括文件夹本身 rcp 命令使用 wget rsync 在日
  • Vue3父子组件通信,父子传参

    Vue3父子组件通信 父子传参 前言 Vue2的小伙伴应该该经历过转战Vue3过程的中的抓狂 好多地方使用都不太一样 这期就给大家讲一下近期我也在用vue3开发中遇到到的问题父子组件通信 父传子 在父组件中引入son vue子组件 为子组件
  • sql 2008 R2 修改数据库表编辑行200小技巧

    在使用sql server 2008 R2时 有时候要打开一个表 看里面的数据 发现只能编辑前面200行 如下图 如果我的数据库表的数据 超过200 怎么办呢 其实只要修改下配置 就可以了 如下图 点击选项 进入选项界面 如下图 在sql
  • nginx配置主域名跳转www域名并支持ssl

    server listen 80 listen 443 ssl server name xxxx com return 301 https www xxx com request uri server listen 80 server na
  • 视频转码后有色差要如何处理

    目录 视频转码后有色差要如何处理 KEY COLOR STANDARD KEY COLOR RANGE 视频转码后有色差要如何处理 以下是回答 欢迎大家留言讨论补充 1 色差是如何产生的 1 有损压缩产生的质量损失 解决方法为尽可能的提高码
  • 如何用计算机计算log除法,对数计算器_如何使用计算器计算对数

    如何使用计算器计算对数 示例 使用Windows自带的计算器 这理假设要计算的对数是logaN a 32 N 2 1 打开计算器 快捷键WIN R 输入calc 然后回车 怎样使用科学计算器计算对数 计算机上的log都是默认以10为底的对数
  • c语言实现面向对象编程(const * ,* const)

    c语言实现面向对象编程 面向对象思想 封装 继承 多态 代码实现 函数签名及返回值的约定 const 重载 参考了onlyshi的博客代码 orz传送门 参考了嵌入式实践一些代码 这里就不加了 面向对象思想 面向对象编程 OOP 并不是一种
  • 千年虫及UNIX时间

    转自 http hi baidu com dugucloud blog item b903ba803e5192c59123d99d html 千年虫何来 在上个世纪 许多计算机系统只用二进制7 8位数 足够十进制二位数使用 表示年份 比如说
  • ANR触发机制分析

    ANR是一套监控Android应用程序响应是否及时的机制 可以把发生ANR比作是引爆炸弹 那么整个流程包含三部分组成 埋定时炸弹 system server进程启动倒计时 在规定时间内如果目标应用进程没有干完所有的活 则system ser
  • MySQL的基本语法

    Welcome Huihui s Code World 接下来看看由辉辉所写的关于MySQL的相关操作吧 目录 Welcome Huihui s Code World 一 数据库 建立 查看 使用 删除 建库 查看数据库 使用数据库 删除数
  • decrypt()解密和encrypt()加密

    1 解密函数 select dbo decrypt StName from student 2 加密函数 select dbo encrypt StName from student
  • CxImage的编译及简单使用举例

    1 从http sourceforge net projects cximage 下载最新的CxImage 702源码 2 解压缩后 以管理员身份打开CxImageFull vc10 sln工程 在编译之前先将每个工程属性的Characte
  • Vue中props组件和slot标签的区别

    在 Vue 中 props 和 slot 都是组件之间进行通信的机制 它们的作用和应用场景有一些区别 props 是一种组件的数据传递机制 通过在父组件中以属性的形式向子组件传递数据 子组件接收这些数据 并可以进行相应的处理和渲染 prop
  • 每日一练——day2

    前言 小亭子正在努力的学习编程 接下来将开启编程题的练习 分享的文章都是学习的笔记和感悟 如有不妥之处希望大佬们批评指正 同时如果本文对你有帮助的话 烦请点赞关注支持一波 感激不尽 第一题 题目描述 链接 https www nowcode
  • Jenkins执行python代码

    在ide运行正常 在jenkins运行提示 模块不存在 找了一圈 原来是jenkin运行python的环境没设置 解决方式 在Manage Jenkins System Configuration Configure System中设置全局
  • WSL2连接到宿主Windows程序的网络代理设置

    WSL2想要连上宿主机Windows里设置的网络代理端口很是蛋疼 前置条件 PS C Users overlord gt wsl l v NAME STATE VERSION Ubuntu 20 04 Running 2 获取Host和WS
  • Consul的简介与安装

    1 Consul简介 Consul是一套开源的分布式服务发现和配置管理系统 由HashiCorp公司用Go语言开发 Consul提供了微服务系统中的服务治理 配置中心 控制总线等功能 这些功能中的每一个都可以根据需要单独使用 也可以一起使用
  • wsl配置

    文章目录 1 systemd服务开启 2 固定IP 2 1 官网的方案 2 2 通过WSL2的Linux子系统设置静态IP 2 3 其他方案 3 运行 Linux GUI 应用安装 Chrome 浏览器 此文接我放弃了VMware 1 sy
  • vue(3)调整 App.vue 文件和router路由

    调整 App vue 文件 我们先把默认项目里面没用的东西先删除掉 把代码调整为下面的样子
  • js延迟加载的性能优化

    js的延迟加载有助于提高页面的加载速度 特别是竞价优化站是有一定的好处 今天来说说我是如何优化竞价站打开速度 案例 http yzmb pengchenggroup cn 动态创建DOM方式