網站為什么 JS 調用盡量放到網頁底部？

覽器加載頁面是按從上到下順序加載的。加載 JS 并執行的時候，會阻塞其他資源的加載。這是因為 JS 可能會有 DOM 、樣式等等操作，所以瀏覽器要先加載這段 JS 并執行，再加載放在它后面的 HTML、CSS。

因此，加入一段巨大的 JS 放在最上面，瀏覽器首先要下載并執行，這段時間里面，頁面是空白的。相比于加載了部分 HTML 和樣式但是沒有 JS 交互功能，顯然是后者對于瀏覽者體驗要好。

然而，是否所有 JS 都要放在最下面呢？并不是。

舉實際的例子：

html5shiv是一段 JS 腳本，用來是早期 IE 兼容 HTML5 新增標簽的支持。

這個 JS 腳本，必須要放在上面 head 部分，為什么呢？因為在老 IE 瀏覽器下面，不支持 <section> 這樣的標簽，所以用 JS 來兼容。如果放在底部，等 IE 瀏覽器先報錯了，才會執行這塊 JS 沒多大用。

jQuery 這類的庫，也是建議放在最上面的。首先最大的疑問可能是 jQuery 這么大，放在上面豈不是阻塞的很厲害？

不過 jQuery 通常引用的是 CDN 地址，而且經過 gzip 壓縮之后并不是很大，而且引用公共 CDN 上面的 jQuery 話，很大幾率早已被用戶緩存下來了。所以可以不需要考慮阻塞產生的性能問題。

而我們都知道，JS 是按順序執行下來的。也就是你沒運行 jQuery 之前，先運行了調用 jQuery 函數的代碼，就會報錯。你可以控制你自己寫的 JS 放在頁面最下面，放在 jQuery 下面，但是你無法保證頁面上其他地方會不會有人圖省事直接在 HTML 代碼里面輸出 JS。如果有，那么就會報錯。

所以我建議，類庫放在上面加載，其余代碼盡可能放在最底下加載。
然而，前端性能優化只是薄薄一層
可能前端優化半天，還不如上個 CDN 或者加個寬帶或者優化一個后端算法來的效果好。

者：芋頭yt

轉發鏈接：https://mp.weixin.qq.com/s/A03YiPsvlREkB20ATW9Wcw

文部分

配置

vue-cli：4.5.11

目的

使用element-ui繪制ui界面

原本操作

（1）安裝element-ui

npm i element-ui -S

（2）導入element-ui

import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);

界面空白，報錯如下

Uncaught TypeError: Cannot read property 'prototype' of undefined

報錯原因：

目前element-ui只支持2.6以下的版本，Vue3.0要使用element-ui就要使用element-plus

官網說法就是為vue-cli@4.5以上提供element-plus

解決方法：

參考element-ui官網

https://element-plus.gitee.io/#/zh-CN/component/quickstart

（1）安裝element-plus

npm i element-plus

（2）導入element-plus

import ElementPlus from 'element-plus';
import 'element-plus/lib/theme-chalk/index.css';
const Vue = createApp(App)
Vue.use(ElementPlus)

這樣就解決了！

每日一個面試題

vue的生命周期

vue每個組件都是獨立的，每個組件都有一個屬于它的生命周期，從一個組件創建、數據初始化、掛載、更新、銷毀，這就是一個組件所謂的生命周期。

組件中的具體方法：beforeCreate created beforeMount mounted beforeUpdate updated

beforeDestroy destroyed

總共分為8個階段創建前/后，載入前/后，更新前/后，銷毀前/后。
創建前/后：

在beforeCreated階段，vue實例的掛載元素$el和數據對象data都為undefined，還未初始化。

在created階段，vue實例的數據對象data有了，$el還沒有。
載入前/后：

在beforeMount階段，vue實例的$el和data都初始化了，但還是掛載之前為虛擬的dom節點，data還未替換。

在mounted階段，vue實例掛載完成，data成功渲染。
更新前/后：

當data變化時，會觸發beforeUpdate和updated方法。
銷毀前/后：

beforeDestory是在vue實例銷毀前觸發，一般在這里要通過removeEventListener解除手動綁定的事件。實例銷毀后，觸發的destroyed。

耶，又學習到了一個新知識點。

又是一個向陽而生的一天。

じゃね

在線咨詢

上一篇：前端開發中常見的瀏覽器兼容性問題及解決方案大匯總
下一篇：CSS自動換行、強制不換行、強制斷行、超出顯示省略號

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

網站為什么 JS 調用盡量放到網頁底部？

文部分

每日一個面試題

您的項目需求