本文主要介绍preload的使用，以及与prefetch的区别。然后会聊聊浏览器的加载优先级。 preload 提供了一种声明式的命令，让浏览器提前加载指定资源(加载后并不执行)，在需要执行的时候再执行。提供的好处主要是 目前我们支持的浏览器主要为高版本 Chrome，所以可放…

对于前端页面来说，静态资源的加载对页面性能起着至关重要的作用。本文将介绍浏览器提供的两个资源指令-preload/prefetch，它们能够辅助浏览器优化资源加载的顺序和时机，提升页面性能。一、从一个

作者在我司，做了C端活动架构升级，产出的一种骨架屏。姐妹兄弟篇 -《你可能不知道的动态组件玩法🍉》。

preload 提升了资源加载的优先级，使得它提前开始加载（预加载），在需要用的时候能够更快的使用上。另外 onload 事件必须等页面所有资源都加载完成才触发，而当给某个资源加上 preload 后，该资源将不会阻塞 onload。 此时的 main.js 加载顺序出现在了 …

js文件一般是同步加载的，放在页面内会阻塞主要js文件加载。 使用场景：有的项目必须引入jquery等文件时，在组件内部引入这些文件一定程度会阻塞页面渲染，因而通过特定事件（点击或者弹窗）动态加载jquery等JS文件，可以使主页面快速显示出来。 当页面展示的版块是固定的时候且…

简化项目webP方案接入，节省项目图片加载流量，提高web访问性能。 该插件包含浏览器webP支持检测脚本插入、浏览器webP支持的css样式转换及图片转换为webP格式图片。

尽可能的使用CSS的方式去加载图片，当然如果你依赖图片本身的宽高等比缩放的特性，还是使HTML的方式。 本文将以vue-cli 3.0脚手架搭建的项目为例。 我们选择的是 Imagemin，版本选择6.1.0，因为7.0.0之后的版本在windows上有兼容性问题，目前还未修复…

我列举了我在项目实际有用到的22个Vue优化技巧。代码绝不止能跑就行、相信你看了能写出更加 妙啊 的代码，但是废话只说一句：码字不易求个👍，🙇‍🙇‍🙇‍。

爱康体检宝 PC（https://www.tijianbao.com/) 算是一个“老”项目，为什么说“老”呢，因为在前端技术日新月异，每天都有新知识、新概念，甚至新框架的今天，它还是基于vue-cli 2.x、webpack 3.x构建，显然有些老了。其次，在早期开始这个项目…