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. spring boot2X整合Consul一使用RestTemplate实现服务调用

    Consul可以用于实现分布式系统的服务发现与配置 服务调用有两种方式: A.使用RestTemplate 进行服务调用 负载均衡——通过Ribbon注解RestTemplate B.使用Feign ...

  2. 【2019年05月13日】A股ROE最高排名

    个股滚动ROE = 最近4个季度的归母净利润 / ((期初归母净资产 + 期末归母净资产) / 2). 查看更多个股ROE最高排名. 兰州民百(SH600738) - 滚动ROE:86.45% - 滚 ...

  3. python数据分析5 数据转换

    1数据转换 数据转换时数据准备的重要环节,它通过数据平滑,数据聚集,数据概化,规范化等凡是将数据转换成适用于数据挖掘的形式 1.1 数据平滑 去除数据中的噪声,将连续数据离散化.这里可以采用分箱.聚类 ...

  4. Python【每日一问】27

    问: [基础题1]:将一个正整数分解质因数.例如:输入 90, 打印出 90=2*3*3*5 . [基础题2]:一个数如果恰好等于它的因子之和,这个数就称为“完数” .例如6=1+2+3.请找出 10 ...

  5. 使用 Jest 和 Supertest 进行接口端点测试

    如何创建测试是一件困难的事.网络上有许多关于测试的文章,却从来不告诉你他们是如何开始创建测试的. 所以,今天我将分享我在实际工作中是如何从头开始创建测试的.希望能够对你提供一些灵感. 目录: 使用 E ...

  6. C++引用与常量

    常量: 在C++中有许多种数据类型(如int,float,bool等等).而这些数据类型又可以声明定义出变量与常量两种不同的具体数据.它们两种分类的标准是不一样的,是两个角度可以叠加的分类,举个栗子: ...

  7. Scala 匹配模式

    模式匹配 // Scala是没有Java中的switch case语法的,相对应的,Scala提供了更加强大的match case语法,即模式匹配,类替代switch case,match case也 ...

  8. Java学习:JDBC各类详解

    JDBC各个类详解 代码实现: //1.导入驱动jar包 //2.注册驱动 Class.forName("com.mysql.jdbc.Driver"); //3.获取数据库连对象 ...

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

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

  10. ELK学习笔记之ELK6.0 X-pack设置用户名和密码

    $ bin/elasticsearch-plugin install x-pack -> Downloading x-pack from elastic [=================== ...