短视频源代码，常用的首屏加载优化方式

短视频源代码，常用的首屏加载优化方式
这部分其实就是把从获取资源到页面呈现中可以优化的点提取出来

1. DNS预解析

不需要用户点击链接就在后台解析，在head中添加

<link rel="dns-prefetch" href="//example.com">

但是要注意会增加一定的网络请求和带宽消耗，非必要域名谨慎使用

2. 开启HTTP2

首先说下相对于HTTP1的优势

1、多路复用，能够在短视频源代码的单个TCP连接上同时传输多个请求和响应；HTTP1.1有一个可选的Pipelining技术，但它是按照顺序处理响应的，后发的请求可能被先发的请求阻塞，所以很多浏览器默认不开启。
2、首部压缩，使用HPACK算法对请求和响应头部进行压缩，减少了首部大小，节省了带宽。而在HTTP/1.x中，每次请求都需要发送完整的头部信息，很容易造成不必要的带宽浪费。
3、服务器推送，服务端可以在发送页面HTML，也就是客户端请求对应HTML页面时主动推送其它资源，而不用等到浏览器解析到相应位置，发起请求再响应。
4、二进制分帧，使用二进制协议对数据进行分帧传输。二进制协议更高效，减少了短视频源代码解析数据的开销，并提高了传输速度。

在nginx中开启HTTP2

# 修改nginx.conf中的配置
server {
    listen 443 ssl http2;
    server_name example.com;

    # SSL证书和密钥路径
    ssl_certificate /path/to/ssl/cert;
    ssl_certificate_key /path/to/ssl/key;

    # 其他配置项
}

3. 资源的预加载

这个其实是安排资源以更高的优先级进行下载和缓存，更详细的可以看看MDN文档

<link rel="preload" href="styles.css" as="style">
<link rel="preload" href="main.js" as="script" />

4. 动态创建加载脚本

不管是js还是css，在下载过程中其实都是会阻塞页面的，动态加载会在下载资源的同时，也不影响后续代码的执行

const script = document.createElement("script");
script.src = "myscript.js";
document.body.appendChild(script);

5. 同构渲染

其实就是服务端渲染（SSR）+ 客户端渲染（CSR），服务端渲染的升级版，像现在的Nuxt.js或者Next.js就可以实现；

6. 可见性优化

这部分主要是针对短视频源代码的非可视区域进行延迟加载来减少首屏执行的逻辑

非可视区域
1、延迟接口请求，使用setTimeout或者then函数来置后加载时机；
2、图片懒加载，使用IntersectionObserver实现可视区域判断；
虚拟滚动
只加载上下及当前页的数据；可以通过滚动时分页或者vue-virtual-scroll-list及react-virtualized一类的插件实现；

7. 针对白屏/抖动

加载过程中无法避免的会有短暂白屏，

1、骨架屏，可以选择固定灰色块，或者计算页面元素宽高生成灰色快；
2、loading，加入比较有意思的loading动画；
3、定义宽高，图片或者接口数据在渲染到页面之后，会撑开所在的元素，就造成页面抖动，设置好盒子或者图片的宽高或者设置个占位；
4、字体闪烁，加载字体且生效之前的闪烁，通过压缩字体减小资源体积，设置font-display:block来解决加载过程中的字体样式异常；