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