前端性能优化之资源加载与css,js执行

一、浏览器请求过程中潜在优化点

1. dns是否可以通过缓存减少dns查询时间？
2. 网络请求的过程走最近的网络环境？
3. 相同的静态资源是否可以缓存？
4. 能否减少请求http请求大小？
5. 减少http请求
6. 服务端渲染

2. 资源的压缩与合并

目的：

1. 减少http请求数量
2. 减少请求资源的大小

HTML压缩：
HTML代码压缩就是压缩这些在文本文件中有意义，但是在HTML中不显示的字符，包括空格，制表符，换行符等，还有一些其他意义的字符，如HTML注释也可以被压缩。

CSS压缩：

1. 无效代码删除
2. css语义合并

Js压缩与混乱

1. 无效字符的删除
2. 剔除注释
3. 代码语义的缩减和优化
4. 代码保护

当然文件合并也是存在一些问题的，如首屏渲染文件过大，缓存失效问题，这就需要我们进行合理的合并，合并文件不能大于28k，一个域名下请求平均不超过5个

三、图片相关的优化

1. 我们先来看下png8/png24/png32之间的区别
   png8 —— 256色 + 支持透明
   png24 —— 2^24色 + 不支持透明
   png32 —— 2^24色 + 支持透明
2. 不同格式图片常用的业务场景
   jpg有损压缩，压缩率高，不支持透明
   png支持透明，浏览器兼容好
   webp压缩程度更好，在ios webview有兼容性问题
   svg矢量图，代码内嵌，相对较小，图片样式相对简单的场景

jpg —— 大部分不需要透明图片的业务场景
png —— 大部分需要透明图片的业务场景
webp —— 安卓全部
svg矢量图 —— 图片样式相对简单的业务场景

3. 如何进行图片压缩
   3.1 CSS雪碧图，目的：减少你的网站的HTTP请求数量
   3.2 Image inline(类似这种：background-image: url(data:image/gif;base64...)
   小于8kb时，将图片的内容内嵌到html当中，减少你的网站的HTTP请求数量
   在线生成雪碧图网站：www.spritecow.com
   3.3 使用SVG进行矢量图的绘制，使用iconfont解决icon问题
   3.4 在安卓下使用webp格式

四、css、js 的加载与执行

先来看一下html 页面加载渲染的过程

image.png

值得注意的是渲染过程是顺序执行、并发加载的
来看下中的css与js阻塞
css head中阻塞页面的渲染
css阻塞js的执行
css不阻塞外部脚本的加载

直接引入的js阻塞页面的渲染
js不阻塞资源的加载
js顺序执行，阻塞后续js逻辑的执行

对于暂时不用的js,我们可以通过设置defer async使它空余时间下载，我们对不需要立即使用的js，就可以使用异步加载的写法。

优化点：
css 样式表置顶
用 link 代替 import
js 脚本置底
合理使用 js 的异步加载能力