onload、DOMContentLoaded与性能问题
onload、DOMContentLoaded与性能问题
onload事件
DomContentLoaded
1、onload事件
onload事件一般在所有的文档内容加载完成后触发,如果网页中图像、脚本较多,会等待这些文件都加载完毕,才会触发onload事件。实际上,这会影响用户体验,在文件未加载完毕,网页处于锁定状态。为了避免这一情况,W3C标准中有一个DOMContentLoaded事件,只要文档标记(即各种标签元素)载入完毕,就会触发,而不必等待图片下载完毕。
jQuery使用者,你可能会经常使用$(document).ready();或者$(function(){}) 这都是使用了DOMContentLoaded事件
2、DOMContentLoaded
该事件并不是所有浏览器都支持,ff opera chrome支持,其他暂不支持。
/** IE中替代方案 **/
在文档最后附加一个脚本,通过这个脚本载入完成的标志来判断是否所有文档标记加载完毕。具体地:
document.write("<script src='javascript:void(0)' id='ie_load' defer> </script>");
var script=document.getElementById('ie_load');
script.onreadystatechange=function (){
if(this.readyState=='complete'){
//执行load事件
........
}
};
3、使用场景
一般在涉及对图片相关属性的操作以及操作时,为了提高用户体验,可以不必等所有图片加载完成才执行脚本,这时可以使用DOMContentLoaded事件。
否则的话,使用onload事件
onload、DOMContentLoaded与性能问题的更多相关文章
- window.onload、DOMContentLoaded和$(document).ready()
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="C ...
- 面试题HTML +CSS
HTML+CSS部分1.行内元素和块级元素?img算什么?行内元素怎么转化为块级元素?行内元素:和有他元素都在一行上,高度.行高及外边距和内边距都不可改变,文字图片的宽度不可改变,只能容纳文本或者其他 ...
- js知识体系的梳理一
今天简单的总结了js的一些东西,梳理下整个体系,每一次的总结都会有不同的收获:js总结一一.[获取元素]: 1.通过ID: var oBtn=document.getElementById('btn1 ...
- 前端基础面试题(JS部分)
1.几种基本数据类型?复杂数据类型?值类型和引用数据类型?堆栈数据结构? 基本数据类型:Undefined.Null.Boolean.Number.String 值类型:数值.布尔值.null.und ...
- 前端基础面试题(js部分)
前端基础面试题(JS部分) 1.几种基本数据类型?复杂数据类型?值类型和引用数据类型?堆栈数据结构? 基本数据类型:Undefined.Null.Boolean.Number.String值类 ...
- ducument.ready不生效的问题 ruby on rails
rails web app页面之间的跳转的时候使用ducument.ready只有在再次加载的时候才生效, 因为rails用了turbolinks, https://github.com/turbol ...
- HTML与JS
网页显示过程中的处理流程: 分析HTML 构造DOM树 载入外部JS文件及CSS文件 载入图像文件等外部资源 JS在分析后开始运行 全部完成 JS的表述方式及其执行流程: <script> ...
- ready与onload的性能
<!DOCTYPE html> <html> <head> <title>ready与onload的性能</title> <meta ...
- DOMContentLoaded和jquery的ready和window.onload的顺序
document.addEventListener('DOMContentLoaded', function(){ alert(1) }); window.onload=function(){ ale ...
随机推荐
- uva1267 Network
https://vjudge.net/problem/UVA-1267 题意: 有一棵树,上面有一个放着水源的点s,给出一个数k,这个水源可以覆盖路径长度到s不超过k的叶子节点.现在需要把所有的叶子节 ...
- css3动画:弹出式菜单
css3动画:弹出式菜单 今天主要来讲讲transition和transform结合做的动画,会举一些现在(2017年)常见的动画例子. 注:本人也接触css3不久,如果写的有纰漏请指出,不喜勿喷. ...
- Python数据分析(二): Numpy技巧 (2/4)
numpy.pandas.matplotlib(+seaborn)是python数据分析/机器学习的基本工具. numpy的内容特别丰富,我这里只能介绍一下比较常见的方法和属性. 昨天晚上发了第一 ...
- Linux系统centOS7在虚拟机下的安装及XShell软件的配置
前面的话 本文将详细介绍Linux系统centOS7在虚拟机下的安装 准备工作 [系统下载] 在安装centOS7之前,首先在官网下载合适的版本 然后,选择一个链接下载即可 [虚拟机配置] 接下来,需 ...
- C#中回车出发事件(+收藏)
本文给大家介绍如何在c# winform中实现回车事件和回车键触发按钮的完美写法 我们常常要在c# winform中实现回车(enter)提交功能,这样比手动按按钮触发更快. 要完成回车按按钮功能,只 ...
- 规划自己的生活,从使用GTD时间管理法开始
前言 为了不再浪费时间,不在茫然度过每一天,我为自己应用了GTD时间管理法,之前并不知道这种方法,实际和我自己定制的也差不太多,下面说说这个方法. 一.GTD时间管理 时间管理法有很多,而GTD( ...
- 有关 Hybrid 开发模式实践总结
前言 随着公司业务不断发展,移动开发项目越来越多,项目任务时间紧,我们内部开发流程是以项目为导向,有别于一般公司对产品不断迭代的做法,但移动端开发人员资源有限,需要在不同项目之间做业务场景切换开发,就 ...
- ZOJ2006 一道很尴尬的string操作题
ZOJ2006(最小表示法) 题目大意:输出第一个字符串的最小字典序字串的下标! 然后我居然想试一试string的erase的能力,暴力一下,然后20msAC了,尴尬的数据.......... #in ...
- java类加载小记
java类只有当创建实体或被调用时才会加载,加载时按 编码顺序 先加载static后加载普通的.static模块和static变量都是同一等级的,谁写前面就先加载谁. 在调用某个静态类的方法时,会按编 ...
- 从头编写 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部分 ...