web页面优化概述

web页面的优化

压缩代码

• 常规做法，减少js文件的大小
• 包括js，css，html的代码

script标签的优化

由于scrpit标签中的东西会影响浏览器渲染dom，一般是页面load的时候，浏览器会开始加载并生成dom树，但发现script标签后，会停止渲染并开始下载脚本，然后再渲染

<script './f.js' async></script>  //下载完就开始执行
<script './f.js' defer></script>  //更安全的方式，所有的脚本下载完才开始执行

分离一个大的js文件

1. 减少冗余的代码块和js文件
2. 使用包管理工具，webpack等工具，对代码进行分离，更多的使用import的方式来避免重复的代码块

分离css为重要和不重要的

在开始加载页面的时候，接口数据已经返回并显示在屏幕上，但是页面渲染还没有完成，就会给用户造成体验不好的感觉

1. 将重要的css代码快嵌入到html中
2. 不重要的css代码使用link标签
3. 不重要的css，移除不正确的显示以及看起来很酷的东西

使用gzip的方式发送数据包

• 图片，字体，视频以及二进制文件不需要压缩了，已经压缩过了，否则会消耗更多的时间，svg除外

部署cdn服务

可以减少资源包下载的时间

提前加载

<link ref="dns-prefetch" href="//example.com"> //写好哪一个cdn更快
<link ref="preconnect" href="//example.com">  //
<link ref="prefetch" href="/style.css" as="style">
<link ref="preload" href="/style.css" as="style">
<link ref="prerender" href="//example.com">

图片的选择

1. svg 一般用在图标
2. Jgp 对照片而言，压缩后失真少
3. Png 不需要对质量要求很高的时候
4. webp 同时执行高压缩，失真少的情况， jpg+png
5. Gif 最大的，少使用