在页面加载之后执行JavaScript

课程推荐:前端开发工程师--学习猿地精品课程

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

当你输入url并按下回车时

首先从本地查找域名,有的话直接用hosts文件里的ip地址,否则查询DNS,得到ip地址
建立TCP连接——进行“三次握手”
客户端发送http请求
服务端处理,并返回结果给客户端
关闭TCP连接——需要“四次挥手”
浏览器收到结果,开始解析资源(JS、CSS、HTML),解析HTML生成的dom树,和同时解析css生成的cssom树结合生成渲染树
根据渲染树渲染页面
当然,再详细的比如:如何解析生成DOM树、浏览器在三次握手四次挥手的同时做了什么、CSSOM树是怎么和DOM树 一一对应的… 这些如果你不是在做系统,似乎是无关紧要的 —— 至少对本文来说是这样的。

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

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

页面「一片空白」
报错 —— JS无法访问未知(还没开始的)加载内容
所以,我们需要一种方法来“暂停”JS执行。

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

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

$(document).ready(function(){
//...
})
1
2
3
不过据说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 ("" );
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;

原文来自:https://yunxiaomeng.blog.csdn.net/article/details/107603751

Image placeholder
wcglws
未设置
  0人点赞

没有讨论,发表一下自己的看法吧

推荐文章
Python模拟登陆万能法selenium来执行javascript命令

课程推荐:Python开发工程师--送9个商业项目--学习猿地 今天分享一下解决方案。就是通过让selenium来执行java命令,来避开封锁。(此处应该有掌声) 文章分为三个部分。 介绍如果使用在s

用于构建API和微服务的流行JavaScript框架

课程推荐:Java开发工程师--学习猿地精品课程 近年来,随着jQuery、JSON(JavaScript的对象表示法)、MongoDB、ES6Generators的广泛使用,JavaScript发展

可视化的JavaScript:JavaScript引擎运行原理

JavaScript很酷,但是JavaScript引擎是如何才能理解我们编写的代码呢?作为JavaScript开发人员,我们通常不需要自己处理编译器。然而,了解JavaScript引擎的基础知识并了解

喊话 JavaScript 开发者:玩 DOM 也要专业范儿

别再害怕DOM了,让我们充分挖掘DOM的潜力,你会真的爱上它。 2008年,当我刚成为一名专业Web开发人员参加工作时,我了解一些HTML、CSS和PHP的知识。那时我也在学习JavaScript

JavaScript 的数据结构和算法

现在有个还不是好的项目,未来会成为好的项目的项目想介绍给大家。传送门https://github.com/MasterShu/JavaScript-Da...这个是本人在维护的一个项目。主要是使用Ja

JavaScript 安全知识: CORS 简明教程

概述浏览器会强制同源策略以禁止不同源的网站获得响应; 『同源策略』不会阻止对其他来源的请求,但是会禁用JavaScript对响应内容的读取。 -CORS标头允许访问跨域响应。 -CORS与凭证一起需要

一起来学 TypeScript

鉴于JavaScript社区正式更名为F2E前端,我就大胆的把我另外一个项目也放上来。😄这个项目是关于TypeScript,是个人记录TypeScript的学习历程以及各个常用库的TypeScript

5种用于前端开发的JavaScript替代方案

JavaScript虽然是很受欢迎的语言,但是并不适合所有人,那么有哪些替代方案呢?本文将分析5种JavaScript替代方案。1995年,Netscape(网景通信公司)聘请BrendanEich为

javascript如何判断是不是整数?

方式一、使用取余运算符判断任何整数都会被1整除,即余数是0。利用这个规则来判断是否是整数。functionisInteger(obj){ returnobj%1===0 } isInteger(3);

9 个顶级的JavaScript图表库

数据可视化技术在过去十年中一直在不断改进,现在许多高级图表库可供消费者使用。在2000年代初期,图表生成主要由服务器端图像位图构成。诸如Flash和Silverlight之类的插件提供了更具交互性的图

JavaScript闭包基础指南

闭包是函数创建时范围内所有变量的集合。要使用闭包,请在另一个称为嵌套函数的函数内创建一个函数。内部函数将有权访问外部函数范围中的变量(Closure有助于访问外部函数范围),即使在返回外部函数之后也是

先学php还是javascript?

javascript是前台的东西,PHP是后台的东西,两者先学谁都是一样的。两者之间没有啥实质性的必然联系。Javascript就是浏览器执行的脚本语言,控制页面内容。php就是服务器端执行的语言,读

深入了解JavaScript async/await !

Asyncfunctions让我们以async这个关键字开始。它可以被放置在任何函数前面,像下面这样:asyncfunctionf(){ return1; }在函数前面的「async」这个单词表达了一

JavaScript中对“this”的简单理解

1.this的奥秘很多时候,JS中的this对于咱们的初学者很容易产生困惑不解。this的功能很强大,但需要一定付出才能慢慢理解它。对Java、PHP或其他标准语言来看,this表示类方法中当前对象的

JavaScript中的强制类型转换

JavaScriptprimitives(原语)JavaScript建立在一系列基本单元之上。你应该对其中的一些已经很熟悉了,比如字符串和数字:vargreet="Hello";varyear=89;

JavaScript基础之 DOM简介

JavascriptDOM(文档对象模型)是一个允许开发人员操纵页面内容、结构和风格的接口。在本文中,我们将理解什么是DOM以及如何用Javascript去操作它。本文还可以作为基本DOM操作的参考。

如何使你的JavaScript代码简单易读

解决同一问题的方法有很多,但有些解决方法很复杂,甚至有些是荒谬的。在这篇文章中,我想谈谈解决同样问题的好方法和坏方法。让我们先从怎样删除数组中的重复项这个简单问题开始。复杂-使用forEach删除重复

JavaScript中的Infinity(无穷)

Infinity(无穷)在JS中是一个特殊的数字,它的特性是:它比任何有限的数字都大,如果不知道Infinity,我们在一些运算操作遇到时,就会觉得很有意思。现在我们来看看JS中的Infinity属性

浏览器中的JavaScript:什么是文档对象模型?什么是DOM操作?

JavaScript并没有那么糟糕。作为运行在浏览器中的脚本语言,它对于网页操作非常有用。在本文中,我们将看到可以用哪些手段来修改HTML文档和交互。什么是文档对象模型?文档对象模型是在浏览器中一切的

JavaScript 变量提升(Hoisting)

'提升'是每个JS开发人员都听说过的一个术语,如果你刚接触JS,可能会遇到一些“怪异”的行为,其中某些变量是随机undefined,会抛出ReferenceErrors异常等等。Hoisting通常被

不使用JavaScript创建常见UI元素功能

我们已经习惯于用JavaScript编写常见的UI元素功能(如手风琴、工具提示、文本截断等),但是随着HTML和CSS有了新的功能以及旧版浏览器不再受支持,我们越来越少使用JavaScript来创建U

javascript怎么清除CSS样式?

javascript怎么清除CSS样式?一、使用setAttribute方法清除样式dom结构helloworldjavascriptp.setAttribute('style','');二、使用re

一些JavaScript 类(class)中需要了解的知识

JavaScript使用原型继承:每个对象都从原型对象继承属性和方法。在Java或Swift等语言中使用的传统类作为创建对象的蓝图,在JavaScript中不存在,原型继承仅处理对象。原型继承可以模拟

14个你可能不知道的JavaScript调试技巧

以更快的速度和更高的效率来调试JavaScript熟悉工具可以让工具在工作中发挥出更大的作用。尽管江湖传言JavaScript很难调试,但如果你掌握了几个技巧,就能用很少的时间来解决错误和bug.文中

如何通过 Tampermonkey 快速查找 JavaScript 加密入口

在很多情况下,我们可能想要在网页中自动执行某些代码,帮助我们完成一些操作。如自动抢票、自动刷单、自动爬虫等等,这些操作绝大部分都是借助JavaScript来实现的。那么问题来了?在浏览器里面怎样才能方