記事一覧

ぺージロード時のスクリプト処理順序について | asp.net


今回は asp.net におけるスクリプトのロード処理順番について検証してみました。
ロード時の処理は、window.load と jQuery と Ajax.Net の3種類ありますが、jQueryでは ready / load / function とさらに3種類に分かれます。これら5種類のロード時の実行順序について記載いたします。

aspnet_loadorder_01.png


前提条件
Windows 7 Professional 以降 / Windows Server 2008 R2 以降
Visual Studio 2008 Professional 以降
VB.NET
.Net Framework 3.5 以降



1.実行順序

検証コード
<script src="Scripts/jquery-1.10.2.min.js"></script>
<script type="text/javascript">
    window.onload = function () {
        AlertOnPage("window.onload ");
    }
    //jQuery
    $(function () {
        AlertOnPage("jQuery function ");
    });
    $(window).load(function () {
        AlertOnPage("jQuery load ");
    });
    $(document).ready(function () {
        AlertOnPage("jQuery ready ");
    });
    //Ajax.Net独自Load処理
    function pageLoad(sender, args) {
        AlertOnPage("Ajax.Net pageLoad ");
    }
    //画面表示
    function AlertOnPage(text) {
        target = document.getElementById("main");
        target.innerHTML += text + "<br>";
    }
</script>

実行順序
(1)jQuery function
(2)jQuery ready
(3)Ajax.Net pageLoad
(4)windows.load
(5)jQuery load



2.複数の実装について

一つのHTML(ASPX)ページに複数の同じ処理を実装した場合、 window.load や pageLoad では最後の記述が読み込まれ、jQuery では記述順に読み込まれるようです。

検証コード
<script type="text/javascript">
    window.onload = function () {
        AlertOnPage("window.onload 1 ");
    }
    //jQuery
    $(function () {
        AlertOnPage("jQuery function 1 ");
    });
    $(window).load(function () {
        AlertOnPage("jQuery load 1 ");
    });
    $(document).ready(function () {
        AlertOnPage("jQuery ready 1 ");
    });
    //Ajax.Net独自Load処理
    function pageLoad(sender, args) {
        AlertOnPage("Ajax.Net pageLoad 1 ");
    }

    window.onload = function () {
        AlertOnPage("window.onload 2 ");
    }
    //jQuery
    $(function () {
        AlertOnPage("jQuery function 2 ");
    });
    $(window).load(function () {
        AlertOnPage("jQuery load 2 ");
    });
    $(document).ready(function () {
        AlertOnPage("jQuery ready 2 ");
    });
    //Ajax.Net独自Load処理
    function pageLoad(sender, args) {
        AlertOnPage("Ajax.Net pageLoad 2 ");
    }
    //画面表示
    function AlertOnPage(text) {
        target = document.getElementById("main");
        target.innerHTML += text + "<br>";
    }
</script>

実行順序
(1)jQuery function 1
(2)jQuery ready 1
(3)jQuery function 2
(4)jQuery ready 2
(5)Ajax.Net pageLoad 2
(6)window.onload 2
(7)jQuery load 1
(8)jQuery load 2

実行順序から考えると、window.onload や pageLoad は複数の記述は避けるべきですね。コード自体が実行されず不具合の温床となります。
また、pageLoadは ScriptManager や UpdatePanel などの非同期処理コンポーネントを配置しないと実行されませんので、注意が必要です。



3.サンプルコード

<%@ Page Language="vb" AutoEventWireup="false" CodeBehind="LoadTest.aspx.vb" Inherits="TreeViewTest.LoadTest" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Load Test</title>
<script src="Scripts/jquery-1.10.2.min.js"></script>
<script type="text/javascript">
window.onload = function () {
AlertOnPage("window.onload 1 ");
}
//jQuery
$(function () {
AlertOnPage("jQuery function 1 ");
});
$(window).load(function () {
AlertOnPage("jQuery load 1 ");
});
$(document).ready(function () {
AlertOnPage("jQuery ready 1 ");
});
//Ajax.Net独自Load処理
function pageLoad(sender, args) {
AlertOnPage("Ajax.Net pageLoad 1 ");
}

window.onload = function () {
AlertOnPage("window.onload 2 ");
}
//jQuery
$(function () {
AlertOnPage("jQuery function 2 ");
});
$(window).load(function () {
AlertOnPage("jQuery load 2 ");
});
$(document).ready(function () {
AlertOnPage("jQuery ready 2 ");
});
//Ajax.Net独自Load処理
function pageLoad(sender, args) {
AlertOnPage("Ajax.Net pageLoad 2 ");
}
//画面表示
function AlertOnPage(text) {
target = document.getElementById("main");
target.innerHTML += text + "<br>";
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div id="main">
<asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
<asp:UpdatePanel ID="UpdatePanel1" runat="server"></asp:UpdatePanel>
</div>
</form>
</body>
</html>


関連記事

コメント

コメントの投稿

アルバム

広告

プロフィール

石河 純


著者名 :石河 純
自己紹介:素人上がりのIT技術者。趣味は卓球・車・ボウリング

IT関連の知識はざっくりとこんな感じです。
【OS関連】
WindowsServer: 2012/2008R2/2003/2000/NT4
Windows: 10/8/7/XP/2000/me/NT4/98
Linux: CentOS RedHatLinux9
Mac: macOS Sierra 10.12 / OSX Lion 10.7.5 / OSX Snow Leopard 10.6.8
【言語・データベース】
VB.net ASP.NET C#.net Java VBA
Xamarin.Forms
Oracle10g SQLServer2008R2 SQLAnywhere8/11/16
ActiveReport CrystalReport ReportNet(IBM)
【ネットワーク関連】
CCNP シスコ技術者認定
Cisco Catalyst シリーズ
Yamaha RTXシリーズ
FireWall関連
【WEB関連】
SEO SEM CSS IIS6/7 apache2

休みの日は卓球をやっています。
現在、卓球用品通販ショップは休業中です。