分析页面加载与js函数的执行 onload or ready

发布时间：2023-08-21 14:28:59 所属栏目：教程来源：

导读：首先，页面加载顺序：

解析HTML结构。

加载外部脚本和样式表文件。

解析并执行脚本代码。

构造HTML DOM模型。

加载图片等外部文件。

页面加载完毕。

也就是：

html → head &ra

首先，页面加载顺序：

解析HTML结构。

加载外部脚本和样式表文件。

解析并执行脚本代码。

构造HTML DOM模型。

加载图片等外部文件。

页面加载完毕。

也就是：

html → head → title → #text(网页标题) → style → 加载样式 → 解析样式 → link → 加载外部样式表文件 → 解析外部样式表 → script → 加载外部脚本文件 → 解析外部脚本文件 → 执行外部脚本 → body → div → script → 加载脚本 → 解析脚本 → 执行脚本 → img → script → 加载脚本 → 解析脚本 → 执行脚本 → 加载外部图像文件 → 页面初始化完毕。

JS 的初始化装载。

onload

不是在 document 加载完成的时候调用的, 而是在页面所有元素 (包括图片等) 全部加载完成才会调用. 如果页面上有尺寸很大的图片, 下载需要很长时间, 那么脚本就一直不能被初始化, 直到图片装载完成, 严重时用户体验会受到很大影响.但是，window.onload 也并非是一无用处，很多情况下一些B/S软件需要页面全部加载后才提供用户相关功能，这样 window.onload 就可以提供一种“加载中”的功能，又或者是页面内容很少，完全无需 document.ready(); 根据各种情况，应该合理的使用 onload 和 ready。

使用onload加载：

代码如下:

window.onload=function(){

            var currentRenderer = 'javascript';

            FusionCharts.setCurrentRenderer(currentRenderer);

            var chartObj = new FusionCharts({

                swfUrl: "Pie3D.swf",

                width: "290", height: "210",

                id: 'sampleChart',

                dataSource: "/ucenter/seo/new_seo_tool.php?check=xml&val={{pre_num}}",

                dataFormat: FusionChartsDataFormats.XMLURL,

                renderAt: 'chart1div'

            }).render();

            }

ready

在 W3C 中有个叫 DOMContentLoaded 的事件,它会在 DOM (文档对象模型) 被加载完成的时候触发.

方法一：

代码如下:

类似于Jquery的$(function(){...}) $(document).ready(function(){...})

（编辑：聊城站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!