1.优化压缩CSS/JS/HTML CSS,JS,HTML写法优化
2.优化压缩图片(JPG,PNG,SVG,GIF),字体(字体压缩,font-face次联,font-display,unicode-range) jpeg优化插件
3.页面懒加载
4.页面渲染性能及渲染机制(重构、回流、重排 )
渲染流程->
解析HTML以创建DOM,
解析CSS以创建CSSOM
布局元素(DOM+CSSOM 树组合创建渲染树,然后执行布局,应用CSS规则,创建UI)
绘制页面
5.网络请求
a.排队请求
b.DNS查找
c.连接设置
d.SSL握手
Accept-Encoding: gzip, deflate
http 请求压缩 gzip, compress, 以及deflate编码都是无损压缩算法,用于减少传输报文的大小,不会导致信息损失。 其中gzip通常效率最高, 使用最为广泛。
6.缓存
磁盘缓存,内存缓存
当用户量体量较大时,不方便使用清空当前浏览器历史缓存的方式
如何更新当前css样式 css.min.css?v=1/2 相当于请求路径更改,重新访问,CDN资源托管
google Chrome - Performance面板
蓝色:加载中,网路相关事件,http请求,http解析,css解析,图像解码等
黄色:执行脚本,JavaScript事件,包括特定DOM的活动,垃圾收集等
紫色:渲染,与页面渲染相关的所有事件,包括CS应用于网页HTML的活动,重新渲染等,以及JavaScript触发的页面HTML更高
绿色:绘制,将布局绘制到屏幕上相关的时间,例如层合成和光栅化
jank帧是指交互和动画效果卡顿,或未能顺利渲染。
单一jank帧不会造成太大麻烦,但是一旦堆积帧效率下降。
原因:脚本触发频繁,加载事件花费事件太长,以及任何其他导致渲染和绘制操作效率低下的活动造成。
解决:
图片使用 TinyPNG 进行图像压缩 可能压缩 20~60%