前端性能优化小结

CSS异步加载

• 设置preload。

<link rel="preload" href="./index.css" as="style" onload="this.rel='stylesheet'">

• 监听dom的构建，搭建完成后js动态添加link标签，引入css资源。 

let link = document.createElement("link");
link.rel = "stylesheet";
link.href = "./index1.css";

如何减少跨域的预检请求？

• 尽量发起简单请求，避免发起复杂请求。 点击跳转查看网络小结 “简单请求” 部分

首屏白屏原因

•  网络时延高
• 请求资源体积大
• 脚本阻塞渲染
• ......

首屏优化

针对网络时延高

• 采用CDN

针对请求资源体积过大

• 对文件打包压缩 / 设置webpack，打包时把不需要打包的库文件分离出去 / 对代码进行丑化（uglify）；
• gzip压缩：当用户请求资源时，其在服务端进行压缩，客户端下载到本地后在浏览器执行解压，用性能换取下载时间。比如，可以开启nginx的gzip功能 或 进行一些webpack配置等；
• 对文件实行懒加载：比如图片懒加载、vue的路由懒加载等；
• UI框架按需加载：比如，vue中按需引入UI组件；

针对脚本阻塞渲染

• 给<script>添加defer或async来改变脚本执行的时机

如果是白屏优化还可以：

• 给引入外链css文件设置异步加载 preload
• 使用缓存
• 使用SSR服务端渲染
• 设置loading动画，优化用户体验