在前端頁面開發中，我們經常需要使用JavaScript來操作CSS樣式，但是由于JavaScript會阻塞頁面渲染，所以我們通常會把JavaScript的引入放在頁面底部，也就是放在</body>標簽前面。這樣可以保證頁面的內容能夠盡快的呈現給用戶，不至于出現一片空白的情況。
然而，在某些情況下，我們需要先執行JavaScript代碼，然后再執行CSS樣式，比如說我們需要在頁面加載完成后，先進行一些計算后再設置CSS樣式，這時候我們就需要讓JavaScript在CSS之前執行。
<!DOCTYPE html>
<html>
<head>
<title>JavaScript在CSS之前執行</title>
<style>
p {
font-size: 20px;
color: red;
}
</style>
</head>
<body>
<p>Hello World!</p>
<script>
// 等待文檔加載完成后執行
document.addEventListener('DOMContentLoaded', function() {
// 計算
var p = document.getElementsByTagName('p')[0];
var width = p.offsetWidth;
// 設置CSS樣式
p.style.width = width + 'px';
});
</script>
</body>
</html>以上代碼演示了一個例子，我們在JavaScript中獲取了<p>標簽的寬度，并設置成了該標簽的寬度，使它始終保持寬度不變。
為了讓JavaScript在CSS之前執行，我們可以把JavaScript代碼放在<head>標簽里，并使用window.onload事件，這個事件會在頁面資源全部加載完成后觸發，包括CSS、圖片和其他資源。
<!DOCTYPE html>
<html>
<head>
<title>JavaScript在CSS之前執行</title>
<style>
p {
font-size: 20px;
color: red;
}
</style>
<script>
window.onload = function() {
// 計算
var p = document.getElementsByTagName('p')[0];
var width = p.offsetWidth;
// 設置CSS樣式
p.style.width = width + 'px';
};
</script>
</head>
<body>
<p>Hello World!</p>
</body>
</html>以上代碼中，我們把JavaScript代碼放在了<head>標簽中，并使用window.onload事件來執行JavaScript代碼。這樣，JavaScript代碼就會在CSS樣式之前執行了。