前端性能优化之资源加载与css,js执行
2019-05-15 本文已影响0人
zxhnext
一、浏览器请求过程中潜在优化点
- dns是否可以通过缓存减少dns查询时间？
- 网络请求的过程走最近的网络环境？
- 相同的静态资源是否可以缓存？
- 能否减少请求http请求大小？
- 减少http请求
- 服务端渲染
2. 资源的压缩与合并
目的：
- 减少http请求数量
- 减少请求资源的大小
HTML压缩：
HTML代码压缩就是压缩这些在文本文件中有意义，但是在HTML中不显示的字符，包括空格，制表符，换行符等，还有一些其他意义的字符，如HTML注释也可以被压缩。
CSS压缩：
- 无效代码删除
- css语义合并
Js压缩与混乱
- 无效字符的删除
- 剔除注释
- 代码语义的缩减和优化
- 代码保护
当然文件合并也是存在一些问题的，如首屏渲染文件过大，缓存失效问题，这就需要我们进行合理的合并，合并文件不能大于28k，一个域名下请求平均不超过5个
三、图片相关的优化
- 我们先来看下png8/png24/png32之间的区别
png8 —— 256色 + 支持透明
png24 —— 2^24色 + 不支持透明
png32 —— 2^24色 + 支持透明 - 不同格式图片常用的业务场景
jpg有损压缩，压缩率高，不支持透明
png支持透明，浏览器兼容好
webp压缩程度更好，在ios webview有兼容性问题
svg矢量图，代码内嵌，相对较小，图片样式相对简单的场景
jpg —— 大部分不需要透明图片的业务场景
png —— 大部分需要透明图片的业务场景
webp —— 安卓全部
svg矢量图 —— 图片样式相对简单的业务场景
- 如何进行图片压缩
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
值得注意的是渲染过程是顺序执行、并发加载的
来看下<head></head>中的css与js阻塞
css head中阻塞页面的渲染
css阻塞js的执行
css不阻塞外部脚本的加载
直接引入的js阻塞页面的渲染
js不阻塞资源的加载
js顺序执行，阻塞后续js逻辑的执行
对于暂时不用的js,我们可以通过设置defer async使它空余时间下载，我们对不需要立即使用的js，就可以使用异步加载的写法。
优化点：
css 样式表置顶
用 link 代替 import
js 脚本置底
合理使用 js 的异步加载能力
