览器加载页面是按从上到下顺序加载的。加载 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：3.0

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。

耶，又学习到了一个新知识点。

又是一个向阳而生的一天。

じゃね