onload、DOMContentLoaded与性能问题

onload事件 DomContentLoaded


 

1、onload事件

onload事件一般在所有的文档内容加载完成后触发,如果网页中图像、脚本较多,会等待这些文件都加载完毕,才会触发onload事件。实际上,这会影响用户体验,在文件未加载完毕,网页处于锁定状态。为了避免这一情况,W3C标准中有一个DOMContentLoaded事件,只要文档标记(即各种标签元素)载入完毕,就会触发,而不必等待图片下载完毕。

jQuery使用者,你可能会经常使用$(document).ready();或者$(function(){}) 这都是使用了DOMContentLoaded事件

 

2、DOMContentLoaded

该事件并不是所有浏览器都支持,ff opera chrome支持,其他暂不支持。 
/** IE中替代方案 **/ 
在文档最后附加一个脚本,通过这个脚本载入完成的标志来判断是否所有文档标记加载完毕。具体地:

 
  1. document.write("<script src='javascript:void(0)' id='ie_load' defer> </script>");
  2. var script=document.getElementById('ie_load');
  3. script.onreadystatechange=function (){
  4. if(this.readyState=='complete'){
  5. //执行load事件
  6. ........
  7. }
  8. };
 

3、使用场景

一般在涉及对图片相关属性的操作以及操作时,为了提高用户体验,可以不必等所有图片加载完成才执行脚本,这时可以使用DOMContentLoaded事件。 
否则的话,使用onload事件

onload、DOMContentLoaded与性能问题的更多相关文章

  1. window.onload、DOMContentLoaded和$(document).ready()

    <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="C ...

  2. 面试题HTML +CSS

    HTML+CSS部分1.行内元素和块级元素?img算什么?行内元素怎么转化为块级元素?行内元素:和有他元素都在一行上,高度.行高及外边距和内边距都不可改变,文字图片的宽度不可改变,只能容纳文本或者其他 ...

  3. js知识体系的梳理一

    今天简单的总结了js的一些东西,梳理下整个体系,每一次的总结都会有不同的收获:js总结一一.[获取元素]: 1.通过ID: var oBtn=document.getElementById('btn1 ...

  4. 前端基础面试题(JS部分)

    1.几种基本数据类型?复杂数据类型?值类型和引用数据类型?堆栈数据结构? 基本数据类型:Undefined.Null.Boolean.Number.String 值类型:数值.布尔值.null.und ...

  5. 前端基础面试题(js部分)

      前端基础面试题(JS部分)   1.几种基本数据类型?复杂数据类型?值类型和引用数据类型?堆栈数据结构? 基本数据类型:Undefined.Null.Boolean.Number.String值类 ...

  6. ducument.ready不生效的问题 ruby on rails

    rails web app页面之间的跳转的时候使用ducument.ready只有在再次加载的时候才生效, 因为rails用了turbolinks, https://github.com/turbol ...

  7. HTML与JS

    网页显示过程中的处理流程: 分析HTML 构造DOM树 载入外部JS文件及CSS文件 载入图像文件等外部资源 JS在分析后开始运行 全部完成 JS的表述方式及其执行流程: <script> ...

  8. ready与onload的性能

    <!DOCTYPE html> <html> <head> <title>ready与onload的性能</title> <meta ...

  9. DOMContentLoaded和jquery的ready和window.onload的顺序

    document.addEventListener('DOMContentLoaded', function(){ alert(1) }); window.onload=function(){ ale ...

随机推荐

  1. uva1267 Network

    https://vjudge.net/problem/UVA-1267 题意: 有一棵树,上面有一个放着水源的点s,给出一个数k,这个水源可以覆盖路径长度到s不超过k的叶子节点.现在需要把所有的叶子节 ...

  2. css3动画:弹出式菜单

    css3动画:弹出式菜单 今天主要来讲讲transition和transform结合做的动画,会举一些现在(2017年)常见的动画例子. 注:本人也接触css3不久,如果写的有纰漏请指出,不喜勿喷. ...

  3. Python数据分析(二): Numpy技巧 (2/4)

    numpy.pandas.matplotlib(+seaborn)是python数据分析/机器学习的基本工具. numpy的内容特别丰富,我这里只能介绍一下比较常见的方法和属性.   昨天晚上发了第一 ...

  4. Linux系统centOS7在虚拟机下的安装及XShell软件的配置

    前面的话 本文将详细介绍Linux系统centOS7在虚拟机下的安装 准备工作 [系统下载] 在安装centOS7之前,首先在官网下载合适的版本 然后,选择一个链接下载即可 [虚拟机配置] 接下来,需 ...

  5. C#中回车出发事件(+收藏)

    本文给大家介绍如何在c# winform中实现回车事件和回车键触发按钮的完美写法 我们常常要在c# winform中实现回车(enter)提交功能,这样比手动按按钮触发更快. 要完成回车按按钮功能,只 ...

  6. 规划自己的生活,从使用GTD时间管理法开始

    前言 为了不再浪费时间,不在茫然度过每一天,我为自己应用了GTD时间管理法,之前并不知道这种方法,实际和我自己定制的也差不太多,下面说说这个方法.   一.GTD时间管理 时间管理法有很多,而GTD( ...

  7. 有关 Hybrid 开发模式实践总结

    前言 随着公司业务不断发展,移动开发项目越来越多,项目任务时间紧,我们内部开发流程是以项目为导向,有别于一般公司对产品不断迭代的做法,但移动端开发人员资源有限,需要在不同项目之间做业务场景切换开发,就 ...

  8. ZOJ2006 一道很尴尬的string操作题

    ZOJ2006(最小表示法) 题目大意:输出第一个字符串的最小字典序字串的下标! 然后我居然想试一试string的erase的能力,暴力一下,然后20msAC了,尴尬的数据.......... #in ...

  9. java类加载小记

    java类只有当创建实体或被调用时才会加载,加载时按 编码顺序 先加载static后加载普通的.static模块和static变量都是同一等级的,谁写前面就先加载谁. 在调用某个静态类的方法时,会按编 ...

  10. 从头编写 asp.net core 2.0 web api 基础框架 (5) EF CRUD

    第1部分:http://www.cnblogs.com/cgzl/p/7637250.html 第2部分:http://www.cnblogs.com/cgzl/p/7640077.html 第3部分 ...