网站性能优化
2017-11-10 22:41:04 0 举报AI智能生成
登录查看完整内容
前端 网站性能优化 知识框架
作者其他创作
大纲/内容
优化方向
代码
删除空白
删除注释
图片
矢量图
SVG
光栅图
处理
减少色位
增量编码 （对相邻像素也做优化）
优化
有损压缩
无损压缩
Gzip压缩
格式
WebP
JEPG
PNG
GIF
提供缩放的图像资产
让图片自然大小 接近 浏览器显示大小
音频
视频
解决方法分类
减少发送量
压缩
缩小
缓存
减少关键资源数量
media查询
js async属性，defer属性
缩短呈现关键路径的长度
缩短请求次数
网站性能优化
CSS
通过media将css代码放入不同的css文件里面
优化工具
Gzip
Zopfli
svgo
PageSpeed Insights
Google DevTolls
performance（time）
network
字体
Gzip / Zopfli 压缩
@font-face
使用 format()
字体变体的指定顺序
Unicode-range 子集内嵌
优化加载
Font Loading API
内联优化（html内联）
HTTP 缓存
条件 ETag 标头
最佳 Cache-Control 策略
HTTP
Etag验证缓存一致性
Cache-Control
“no-cache”和“no-store”
“public”与“private”
“max-age”
缓存决策方案
更新与废除老版本文件
修改文件名 eg.style.x234dff.css
网址一致性
造成缓慢的原因
请求文件的时间
CSS阻止渲染
CSS会阻碍JS执行 （CSS执行后执行JS）
构建顺序
CSS阻止JS， JS阻止DOM
交叉内容
DOM事件
DOMContentLoaded
load / onload
页面显示路线
FMP
paint
first paint / frame
浏览器内部
预加载处理器
JS
JS文件摆放位置
使用 defer / async
0 条评论
回复 删除
下一页
