關于css,js放置位置的問題

wayneli 發布于2019-08-29 12:30 / 3224人閱讀

摘要：一天，小明正在網上查找資料，項目中遇到的問題需要通過查閱資料來解決，他看到一個標題很有意思，覺得這應該是他要找的答案，于是他就點了進去，結果進入網站后幾秒鐘的時間，網頁還是一片空白，過了好久才加載完成。

一天，小明正在網上查找資料，項目中遇到的問題需要通過查閱資料來解決，他看到一個標題很有意思，覺得這應該是他要找的答案，于是他就點了進去，結果進入網站后幾秒鐘的時間，網頁還是一片空白，過了好久才加載完成。

為什么會出現這種情況？

說到這那我們就有必要先了解一下網站加載的整個完整過程了。

首先瀏覽器從服務器接收到html代碼，然后開始解析html

構建DOM樹（根據html代碼自頂向下進行構建），并且在同時構建渲染樹

遇到js文件加載執行，將阻塞DOM樹的構建；遇到css文件，將阻塞渲染樹的構建

script標簽中的defer屬性：構建DOM樹的過程和js文件的加載異步（并行）進行，但是js文件執行需要在DOM樹構建完成之后

script標簽中的async屬性：構建DOM樹、渲染樹的過程和js文件的加載和執行異步（并行）進行

什么要對css，js的放置位置進行調整？

從以上過程可以知道，當js文件放在head中時，瀏覽器構建DOM樹的時候遇到js文件加載會阻塞，也就是說，瀏覽器不會加載body中的標簽，一旦這個js文件的數量和內容都比較大，那么就會造成剛剛小明遇到的那種情況，就不會給用戶一個十分良好的可視化回饋，而在前端開發中，給予用戶的可視化回饋十分重要。

我們現在十分青睞于用進度條來描述一個過程，而對用戶的可視化回饋，就是網頁加載的進度條。

對于現如今有著快節奏的人們，如果一個網頁打開后在兩秒鐘內沒有反應，或者加載很慢，那么用戶就會很不耐煩的關掉它，想當于被直接宣判死刑了。

應該放在哪里？

綜上所述，script標簽最好放在標簽的前面，因為放在所有body中的標簽后面就不會出現網頁加載時出現空白的情況，可以持續的給用戶提供視覺反饋，同時在有些情況下，會降低錯誤的發生。

而css標簽應該放在標簽之間，因為如果放在標簽的前面，那么當DOM樹構建完成了，渲染樹才構建，那么當渲染樹構建完成，瀏覽器不得不再重新渲染整個頁面，這樣造成了資源的浪費。效率也不高。如果放在之間，瀏覽器邊構建邊渲染，效率要高的多。

（個人愚見，如有不足，或者錯誤的地方，還請大家不吝賜教）

歡迎光臨個人博客

云服務器 GPU云服務器關于javascript的問題關于php的問題關于系統錯誤的問題有關于回調的問題

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/111948.html

關于css,js放置位置的問題

摘要：一天，小明正在網上查找資料，項目中遇到的問題需要通過查閱資料來解決，他看到一個標題很有意思，覺得這應該是他要找的答案，于是他就點了進去，結果進入網站后幾秒鐘的時間，網頁還是一片空白，過了好久才加載完成。一天，小明正在網上查找資料，項目中遇到的問題需要通過查閱資料來解決，他看到一個標題很有意思，覺得這應該是他要找的答案，于是他就點了進去，結果進入網站后幾秒鐘的時間，網頁還是一片空白，過...

zacklee 2019-08-20 16:14 評論0 收藏0
[譯]關于vertical-align:你需要知道的一切

摘要：絕對定位讓元素脫離文檔流，所以他們不再影響他們的周邊元素。元素在文檔流中，也能感知其他元素尺寸的改變。中間，一個在文檔流中的元素并且帶有屬性的元素。最右，不在文檔流中的元素但是內容區域有高度。元素的基線依賴于元素是否是文檔流中的元素。原文：Vertical-Align: All You Need To Know 通常我都有需要垂直對齊在一排上一個接著一個的元素。CSS提供了很多種可能...

wuyangchun 2019-08-30 13:11 評論0 收藏0
JavaWEB開發02——CSS&JS

摘要：今日目標使用完成網站首頁的優化使用完成網站注冊頁面的優化使用完成簡單的數據校驗使用完成圖片輪播效果教學目標了解的概念了解的引入方式了解的基本用法和常用的選擇器了解的盒子模型，懸浮和定位了解的概念掌握的基本語法，數據類型，能夠使用完成簡單的頁今日目標使用CSS完成網站首頁的優化使用CSS完成網站注冊頁面的優化使用JS完成簡單的數據校驗使用JS完成圖片輪播效果教學目標：了解...

MorePainMoreGain 2019-08-29 17:03 評論0 收藏0
JavaWEB開發02——CSS&JS

摘要：今日目標使用完成網站首頁的優化使用完成網站注冊頁面的優化使用完成簡單的數據校驗使用完成圖片輪播效果教學目標了解的概念了解的引入方式了解的基本用法和常用的選擇器了解的盒子模型，懸浮和定位了解的概念掌握的基本語法，數據類型，能夠使用完成簡單的頁今日目標使用CSS完成網站首頁的優化使用CSS完成網站注冊頁面的優化使用JS完成簡單的數據校驗使用JS完成圖片輪播效果教學目標：了解...

高勝山 2019-08-02 11:49 評論0 收藏0