在页面加载之后执行JavaScript

 更新时间:2022年06月03日 17:24:49   作者:恪愚  
这篇文章主要介绍了在页面加载之后执行JavaScript的详细过程,本文通过实例代码文字解说给大家讲解的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下

我们都知道,页面加载是有顺序的。让我们先来理一下页面的展示过程:

当你输入url并按下回车时

  1. 首先从本地查找域名,有的话直接用hosts文件里的ip地址,否则查询DNS,得到ip地址
  2. 建立TCP连接——进行“三次握手”
  3. 客户端发送http请求
  4. 服务端处理,并返回结果给客户端
  5. 关闭TCP连接——需要“四次挥手”
  6. 浏览器收到结果,开始解析资源(JS、CSS、HTML),解析HTML生成的dom树,和同时解析css生成的cssom树结合生成渲染树
  7. 根据渲染树渲染页面

当然,再详细的比如:如何解析生成DOM树、浏览器在三次握手四次挥手的同时做了什么、CSSOM树是怎么和DOM树 一一对应的… 这些如果你不是在做系统,似乎是无关紧要的 —— 至少对本文来说是这样的。

经过上面的步骤,浏览器已经拿到了想要的结果,下一步:浏览器渲染进程启用多个线程协助完成页面渲染

  • GUI渲染线程 ,负责渲染浏览器界面,解析HTML、css,构建DOM树和RenderObject树,布局和绘制 ——一旦界面因为某种操作引发了回流,此线程就会执行
  • JS引擎线程 ——和GUI线程互斥,在js引擎执行时,GUI线程被挂起
  • 事件触发线程 ——依赖js的队列机制完成(当一个事件触发时该线程会把事件添加到待处理队列的队尾,等待js引擎处理)
  • 定时器触发线程 ——依赖js的队列机制完成
  • 异步http请求线程

这其中有一个重要的地方:JavaScript执行线程和渲染线程互斥 !而且JavaScript线程的优先级最高!
所以一旦在HTML中发现了<script> ,浏览器便会暂停其余HTML元素的显示转而去“马上加载JS代码”,这可能会导致两个问题的发生:

  • 页面「一片空白」
  • 报错 —— JS无法访问未知(还没开始的)加载内容

所以,我们需要一种方法来“暂停”JS执行。

很多人第一时间会选择 window.onload :恕我直言,这确实不是好的方法,它让用户等的太久了。你稍微一查就能知道:onload方法会等待页面上所有的文字、table、img加载完成后才触发。如果你真的要用,笔者倒是更推荐 DOMContentLoaded ,这个onload的“变异产品”会等到文字加载完成后立即触发 —— 你完全不必考虑图片的大小对页面初始加载时间的影响,如果你不会“调用”图片的话(前面说了,JS无法访问未知加载内容)。

但事实上,我们更需要一种方法,让JS在“浏览器获得内容后、真正展示在屏幕上前”就开始执行。
比较幸运(也可能是不幸)的是,jQuery实现了这个方法:

$(document).ready(function(){
	//...
})

不过据说jQuery的ready和原生JS的DOMContentLoaded效果是一样的:网页中所有 DOM 结构绘制完毕后就执行(可能 DOM 元素关联的内容并没有加载完)
除此之外,JS中的 window.onload 和jQuery中的 $(window).load() 是等价的

哦,这里并不是“盲目推崇”jQuery,你完全可以去自己封装一个。比如 jQuery的 ready() 和JS的 DOMContentLoaded 实际上都实现了(或“基于”)这样一段代码:

function init(){
	if(arguments.callee.done) return;
	arguments.callee.done=true;
	if(timer) clearInterval(timer);
	//...
}

//判断浏览器
//针对Mozilla/Opera9
if(document.addEventListener){
	document.addEventListener('DOMContentLoaded',init,false)
}
//针对IE
document.write ("<script id='__ie_onload defer' src='javascript:void(O);'><\/script>" );
var script = document.getElementById("__ie_onload");
script.onreadystatechange = function() {
	if( this.readyState == " complete" ) {
		init() //调用加截处理器
	};
}
//针对Safari 
if (/WebKit/i.test(navigator.userAgent)) {
	var timer = setinterval( function (){
		if( /loaded | complete/.test(document.readyState)) {
			init() //调用加载处理器
		}
}. 10);
//针对其他浏览器
window.onload = init;

到此这篇关于在页面加载之后执行JavaScript的文章就介绍到这了,更多相关页面加载后执行js内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • JavaScript实现简易计算器小功能

    JavaScript实现简易计算器小功能

    这篇文章主要为大家详细介绍了JavaScript实现简易计算器小功能,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-10-10
  • javascript 函数参数限制说明

    javascript 函数参数限制说明

    我依稀记得哪本书上有说过,实参数限制是32个? 现在想想估计是我记错了..他也许说的是32位.
    2010-11-11
  • 浅析JS中的 map, filter, some, every, forEach, for in, for of 用法总结

    浅析JS中的 map, filter, some, every, forEach, for in, for of 用法总

    本文是小编给大家总结的关于javascript中的map, filter, some, every, forEach, for in, for of 用法,非常不错,具有参考借鉴价值,需要的朋友参考下吧
    2017-03-03
  • bootstrap 表单验证使用方法

    bootstrap 表单验证使用方法

    在web开发过程中表单验证是比较常见的需求,友好的错误提示能够用户带来极好的用户体验效果,今天小编给大家带来如何使用bootstrap 表单验证功能,一起看看吧
    2017-01-01
  • 微信小程序h5页面跳转小程序的超详细讲解

    微信小程序h5页面跳转小程序的超详细讲解

    开发中涉及到一个需求,就是从一个预约票购买的页面需要跳转到 小程序,下面这篇文章主要给大家介绍了关于微信小程序h5页面跳转小程序的超详细讲解,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
    2023-02-02
  • 在父页面得到zTree已选中的节点的方法

    在父页面得到zTree已选中的节点的方法

    这篇文章主要介绍了在父页面得到zTree已选中的节点的方法,实例分析了zTree针对节点的操作技巧,非常具有实用价值,需要的朋友可以参考下
    2015-02-02
  • JS实现表格数据各种搜索功能的方法

    JS实现表格数据各种搜索功能的方法

    这篇文章主要介绍了JS实现表格数据各种搜索功能的方法,可实现忽略大小写,模糊搜索,多关键搜索等功能,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-03-03
  • 微信小程序http连接访问解决方案的示例

    微信小程序http连接访问解决方案的示例

    这篇文章主要介绍了微信小程序http连接访问解决方案的示例,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-11-11
  • IE与FireFox的JavaScript兼容问题解决办法

    IE与FireFox的JavaScript兼容问题解决办法

    本篇文章主要是对IE与FireFox的JavaScript兼容问题解决办法进行了详细的分析介绍,需要的朋友可以过来参考下,希望对大家有所帮助
    2013-12-12
  • IE 上下滚动展示模仿Marquee机制

    IE 上下滚动展示模仿Marquee机制

    最近要做一个大屏幕展示上下滚动的列表,而IE自带的Marquee,无法满足需要,随自己写了一个滚动机制,代码在附件中
    2009-12-12

最新评论