script 放置最佳位置以及 html 執行順序

前些天發現了一個巨牛的人工智能學習網站,通俗易懂,風趣幽默,忍不住分享一下給大家。點擊跳轉到教程。

看到知乎上有很多討論關于javascript位置的文章。所以特意留意了這方面的問題。

  首先要了解到的是:

    html文件是自上而下的執行方式,但引入的css和javascript的順序有所不同,css引入執行加載時,程序仍然往下執行,而執行到<script>腳本是則中斷線程,待該script腳本執行結束之后程序才繼續往下執行。

    所以,大部分網上討論是將script腳本放在<body>之后,那樣dom的生成就不會因為長時間執行script腳本而延遲阻塞,加快了頁面的加載速度。

    但又不能將所有的script放在body之后,因為有一些頁面的效果的實現,是需要預先動態的加載一些js腳本。所以這些腳本應該放在<body>之前。

    其次,不能將需要訪問dom元素的js放在body之前,因為此時還沒有開始生成dom,所以在body之前的訪問dom元素的js會出錯,或者無效

    直接上代碼

</head><script type="text/javascript">document.getElementById("text").innerHTML="hello world";</script><body><h1 id="text"></h1></body>
</html>

?

    此時結果空白一片。

    將script腳本放在body之后

<body><h1 id="text"></h1>
</body>
<script type="text/javascript">document.getElementById("text").innerHTML="hello world";
</script>
    有了結果

    所以,我認為script放置位置的原則“頁面效果實現類的js應該放在body之前,動作,交互,事件驅動,需要訪問dom屬性的js都可以放在body之后”。

?

轉自:http://www.cnblogs.com/iamwangxupeng/p/4950255.html

本文來自互聯網用戶投稿,該文觀點僅代表作者本人,不代表本站立場。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。
如若轉載,請注明出處:http://www.pswp.cn/news/448515.shtml
繁體地址,請注明出處:http://hk.pswp.cn/news/448515.shtml
英文地址,請注明出處:http://en.pswp.cn/news/448515.shtml

如若內容造成侵權/違法違規/事實不符,請聯系多彩編程網進行投訴反饋email:809451989@qq.com,一經查實,立即刪除!

相關文章

677A

#include <stdio.h> int main() {int n, h;scanf("%d%d", &n, &h);int temp, width0;int i;for(i0; i<n; i){scanf("%d", &temp);if(temp<h)width;elsewidth2;}printf("%d\n", width);return 0; }轉載于:https://www.cn…

數據結構之二叉樹的一些基本操作

二叉樹是樹的特殊一種&#xff0c;具有如下特點&#xff1a;1、每個結點最多有兩顆子樹&#xff0c;結點的度最大為2。2、左子樹和右子樹是有順序的&#xff0c;次序不能顛倒。3、即使某結點只有一個子樹&#xff0c;也要區分左右子樹。 頭文件 BTree.h #ifndef __BTREE_H__ …

【Arduino】使用C#實現Arduino與電腦進行串行通訊

在給Arduino編程的時候&#xff0c;因為沒有調試工具&#xff0c;經常要通過使用串口通訊的方式調用Serial.print和Serial.println輸出Arduino運行過程中的相關信息&#xff0c;然后在電腦上用Arduino IDE的Serial Monitor來查看print出來的信息。Serial Monitor不僅可以接受Ar…

虛擬機NAT模式聯網

阿里開源鏡像軟件&#xff1a;https://opsx.alibaba.com/mirror 如何使VMware ip與本機ip處于同一網段 https://blog.csdn.net/kakuma_chen/article/details/71425620 轉載于:https://www.cnblogs.com/cdy0626/p/11131440.html

VS2008下最新X264(svn 2009.9)編譯不過的解決辦法

總有人說最新的版本 編譯不過&#xff0c;搞的群、 論壇里到處都是這種求助貼。建議斑竹把這個解決辦法放到醒目的位置&#xff0c;以減少噪音。科普開始1、編譯問題由于MS的VS編譯器對C99標準支持不好&#xff0c;不支持函數當中混合定義、聲明變量。解決辦法&#xff1a;在函…

node、npm、vue安裝 -- VUE 項目 demo 實例

前些天發現了一個巨牛的人工智能學習網站&#xff0c;通俗易懂&#xff0c;風趣幽默&#xff0c;忍不住分享一下給大家。點擊跳轉到教程。 1. 安裝node&#xff1a; sudo yum install epel-release sudo yum install nodejs node --version // 安裝好后查看版本2. 安裝 npm …

用C語言實現簡單的停車場管理

這個程序是利用棧和循環隊列實現的&#xff0c;自己得先處理好邏輯關系就好了。由于題目沒有要求&#xff0c;這個程序就沒加重復判斷&#xff0c;比如一輛車已經停在車位上或者便道上&#xff0c;再來一輛就判斷不了了。關于棧&#xff0c;就是先進后出的思想&#xff0c;隊列…

推薦一個配置linux服務的網站

該網站的各種linux服務的配置都是基于CentOS系統的 基本上各種linux服務都有了 http://www.server-world.info/en/轉載于:https://www.cnblogs.com/Skyar/p/3582389.html

mariadb數據庫增刪改查

1.常用數據類型 1&#xff09;整數:int, bit 2&#xff09;小數:decimal    #decimal(5,2)表示共有五位數&#xff0c;保留兩位小數 3&#xff09;字符串:varchar, char   4&#xff09;日期時間:date, time, datetime 5&#xff09;枚舉類型(enu…

為什么你工作努力卻沒有起色?

成為職場達人&#xff0c;未必要經常挑燈夜戰。相反&#xff0c;注意到下面幾條&#xff0c;會讓你少走彎路。 1&#xff09;成長的機會永遠比眼前的待遇重要——做重要的事比多拿錢重要。 我知道在水木bbs上的worklife版本&#xff0c;每天都在上演的就是比較自己的第一個o…

《 Spring 實戰 》(第4版) 讀書筆記 (未完結,更新中...)

前些天發現了一個巨牛的人工智能學習網站&#xff0c;通俗易懂&#xff0c;風趣幽默&#xff0c;忍不住分享一下給大家。點擊跳轉到教程。 Pxx 表示在書的第 xx 頁。 Spring 框架的核心是 Spring 容器。 1. (P7.) 構造器注入是依賴注入的方式之一。 緊耦合&#xff1a;在 …

數據結構排序法之希爾排序法(Shell Sort)

希爾排序&#xff0c;也叫遞減增量排序&#xff0c;是插入排序的一種更高效的改進版本。希爾排序是不穩定的排序算法。 希爾排序是基于插入排序的以下兩點性質而提出改進方法的&#xff1a; 1、插入排序在對幾乎已經排好序的數據操作時&#xff0c;效率高&#xff0c;即可以達…

Windows To Ghost系統封裝之必備軟件集 - 好壓

好壓壓縮軟件&#xff08;HaoZip&#xff09;是強大的壓縮文件管理器&#xff0c;是完全免費的新一代壓縮軟件&#xff0c;相比其它壓縮軟件系統資源占用更少&#xff0c;有更好的兼容性&#xff0c;壓縮率比較高。 它提供了對ZIP、7Z和TAR文件的完整支持&#xff0c;能解壓RAR…

js 彈窗并定時關閉

1. $(input).click(function() {prompt(點擊成功, 2000) })function prompt(newName, time, fn) {var $div $(<div></div>);$div.css({position: fixed,top: 0,left: 0,width: 100%,height: 100%,z-index: 200,background-color: rgba(0,0,0,0.4),// background-c…

數據結構排序法之插入法

插入排序是一種簡單直觀的排序算法。它的工作原理非常類似于我們抓撲克牌。 對于未排序數據(右手抓到的牌)&#xff0c;在已排序序列(左手已經排好序的手牌)中從后向前掃描&#xff0c;找到相應位置并插入。 插入排序在實現上&#xff0c;通常采用in-place排序&#xff08;即…

XSLT學習筆記

1. 樣式聲明&#xff1a;<xsl:stylesheet>或<xsl:transform> 2. XSLT常用元素&#xff1a; 2.1 <xsl:template>&#xff1a;創建模板 Match屬性的作用是使模板和XML元素相關聯 e.g.:<xsl:template match"\">......</xsl:template&g…

職場:人生從沒有最佳時機!一個離職客服人員的領悟

每個人都有感到失落迷惘的時候。 人生用專制又霸道的方式運行著&#xff0c;每當我們心想一切塵埃落定、生活穩固的時候&#xff0c;生活總愛給我們驚喜&#xff0c;粉碎我們短暫的安逸&#xff0c;讓我們不得不重新思考。 「我走對路了嗎?」 「我能夠賺更多錢、爬到更高的地位…

VS Code 的常用快捷鍵

VS Code 的常用快捷鍵和插件 一、vs code 的常用快捷鍵 前些天發現了一個巨牛的人工智能學習網站&#xff0c;通俗易懂&#xff0c;風趣幽默&#xff0c;忍不住分享一下給大家。點擊跳轉到教程。 1、注釋&#xff1a; a) 單行注釋&#xff1a;[ctrlk,ctrlc] 或 ctrl/ b) 取消…

vue-axios interceptors

import axios from axios import cookie from js-cookie const options {baseURL: window.location.protocol process.env.BASE_API,headers: {},timeout: 20000 } const fetch axios.create(options)// request攔截器 fetch.interceptors.request.use(config > {if (coo…

數據結構排序法之雞尾酒排序法he快速排序法

雞尾酒排序&#xff0c;也叫定向冒泡排序&#xff0c;是冒泡排序的一種改進。此算法與冒泡排序的不同處在于從低到高然后從高到低&#xff0c;而冒泡排序則僅從低到高去比較序列里的每個元素。他可以得到比冒泡排序稍微好一點的效能。 // 兩兩互換 void swap (int* a, int i, …