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:默认,事件句柄在冒泡阶段执行】

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

  1. 【转】js JavaScript 的性能优化:加载和执行

    JavaScript 的性能优化:加载和执行 转自:https://www.ibm.com/developerworks/cn/web/1308_caiys_jsload/ 随着 Web2.0 技术的 ...

  2. 网页性能优化之异步加载js文件

    一个网页的有很多地方可以进行性能优化,比较常见的一种方式就是异步加载js脚本文件.在谈异步加载之前,先来看看浏览器加载js文件的原理. 浏览器加载 JavaScript 脚本,主要通过<scri ...

  3. 多个JS文件性能优化

    页面中引入的JS文件是阻塞式加载的,这样会影响页面性能.以下是JS文件性能优化方法: 一:将所有的<script>标签放到页面底部,也就是</body>闭合标签之前,这能确保在 ...

  4. 性能优化之html、css、js三者的加载顺序

    前言 我们知道一个页面通常由,html,css,js三部分组成,一般我们会把css文件放在head头部加载,而js文件则放在页面的最底部加载,想要知道为什么大家都会不约而同的按照这个标准进行构建页面, ...

  5. js性能优化-事件委托

    js性能优化-事件委托 考虑一个列表,在li的数量非常少的时候,为每一个li添加事件侦听当然不会存在太多性能方面的问题,但是当列表非常的长,长到上百上千甚至上万的时候(当然只是一个解释,实际工作中很少 ...

  6. Web性能优化-合并js与css,减少请求

    Web性能优化已经是老生常谈的话题了, 不过笔者也一直没放在心上,主要的原因还是项目的用户量以及页面中的js,css文件就那几个,感觉没什么优化的.人总要进步的嘛,最近在被angularjs吸引着,也 ...

  7. Web前端性能优化教程07:精简JS 移除重复脚本

    本文是Web前端性能优化系列文章中的第七篇,主要讲述内容:精简Javascript代码,以及移出重复脚本.完整教程可查看:  一.精简javascript 基础知识 精简:从javascript代码中 ...

  8. JS性能优化笔记搜索整理

    通过网上查找资料了解关于性能优化方面的内容,现简单整理,仅供大家在优化的过程中参考使用,如有什么问题请及时提出,再做出相应的补充修改. 一. 让代码简洁:一些简略的表达方式也会产生很好的优化 eg:x ...

  9. JS 之性能优化(2)

    继续上一篇的JS性能优化之后,下面接着讲关于前端性能优化的内容.如果有不对的地方欢迎纠正. 1.避免过多的重排与重绘操作. 尽量将DOM中的多个读操作放一起,中间不要插入写的操作,因为写操作会导致浏览 ...

随机推荐

  1. Lab2:物理内存管理

    前言 现在内存管理的方法都是非连续内存管理,也就是结合段机制和分页机制 段机制 段地址空间 进程的段地址空间由多个段组成,比如代码段.堆栈段和符号表段等等 段对应一个连续的内存"块" ...

  2. 用ADB 抓取和存储APP日志方法

    前置条件:电脑已经安装好adb (一)  进入adb目录下连接手机,检测出手机 CD 到SDK的platform-tools (二)adb logcat-c  清除日志  (三)adb  logcat ...

  3. Win 10 没有 Hyper-V 解决方案

    1.首先新建一个记事本文件. 2.在记事本中写入. pushd "%~dp0" dir /b %SystemRoot%\servicing\Packages\*Hyper-V*.m ...

  4. 爬虫框架 ---- scrapy 框架的介绍与安装

    -----  爬虫 基于B/S 模式的数据采集技术,按照一定的规则,自动的抓取万维网信息程序 以一个或多个页面为爬取起点,从页面中提取链接实现深度爬取 使用爬虫的列子 第三方抢票软件(360/猎豹/ ...

  5. 最近C#项目中不小心踩的低级坑

    都是很基础的错误问题,大部分都是因为不查一下资料就直接根据其它类似语言的经验写代码导致的 1. 一个企业微信上的正常的界面突然不能滚动了 本以为是浏览器代码计算问题,结果发现是JS出错导致. 2. R ...

  6. C++随机数笔记

    版权声明:本文为CSDN博主「candyliuxj」的原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接及本声明. 原文链接:https://blog.csdn.net/can ...

  7. Java学习:抽象方法和抽象类的使用

    抽象 抽象方法:就是加上abstract关键字,然后去掉大括,直接分号结束.抽象类:抽象方法所在的类,必须是抽象类才行.在class之前写上abstract即可. 如何使用抽象类和抽象方法: 1.不能 ...

  8. windows上 nginx 配置代理服务,配置多域名,以及最简单实现跨域配置

    Nginx,不用多说啦,大家都熟悉的不能再熟悉了,它是一款轻量级的高性能Web 服务器/反向代理服务器及电子邮件(IMAP/POP3)代理服务器,最近在本地研究将nginx和resin配合使用,使服务 ...

  9. C#中精确计时的一点收获 Stopwatch

    http://www.cnblogs.com/jintianhu/archive/2010/09/01/1815031.html 参考: https://www.cnblogs.com/kissdod ...

  10. dotnet core 之 CORS使用示例

    这里列举几个经过验证的可用的CORS使用示例, 方便在需要的时候可以直接使用 示例1 #region snippet2 public void ConfigureServices(IServiceCo ...