fc2ブログ

記事一覧

ぺージロード時のスクリプト処理順序について | 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)window.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>





最後までお読みいただきありがとうございます。
いかがでしたでしょうか。他にも asp.net に関連する記事を投稿しておりますのでよろしければご参考くださいませ。


関連記事

コメント

コメントの投稿

※名前とタイトルが入力されていないコメントでは他のコメントとの区別ができません。

 入力されていないコメントには返信しませんのであらかじめご了承くださいませ。

※ニックネームでも良いので必ずご入力ください。

    

※必ずご入力ください。

    
    

※必ずご入力ください。

※技術的な質問には環境やエラーについて正確かつ詳細にお教えください。

・正確なエラーの内容

・Windowsのバージョン番号

・Visual Studioのバージョン

・機器の型番

・アプリやソフトのバージョン

    

カテゴリ別記事一覧

広告

プロフィール

石河 純


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

IT関連の知識はざっくりとこんな感じです。
【OS関連】
WindowsServer: 2012/2008R2/2003/2000/NT4
Windows: 10/8/7/XP/2000/me/NT4/98
Linux: CentOS RedHatLinux9
Mac: macOS Catalina 10.15 / Mojave 10.14 / High Sierra 10.13 / Sierra 10.12 / OSX Lion 10.7.5 / OSX Snow Leopard 10.6.8
【言語】
VB.net ASP.NET C#.net Java VBA
Xamarin.Forms
【データベース】
Oracle 10g/9i
SQLServer 2016/2008R2/2005/2000
SQLAnywhere 16/11/8
【BI/レポートツール】
Cognos ReportNet (IBM)
Microsoft PowerBI
ActiveReport (GrapeCity)
CrystalReport
【OCX関連】
GrapeCity InputMan SPREAD MultiRow GridView
【ネットワーク関連】
CCNP シスコ技術者認定
Cisco Catalyst シリーズ
Yamaha RTXシリーズ
FireWall関連
【WEB関連】
SEO SEM CSS jQuery IIS6/7 apache2

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