登录免费注册



网站性能优化

首页  思维导图  详情



网站性能优化

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

 Collect

Get Started

性能优化系列课

 Collect

Get Started

性能优化

 Collect

Get Started

Linux性能优化

 Collect

Get Started

前端性能优化体系













评论

0 条评论

下一页



图形选择

思维导图

主题

补充说明

AI生成





修改AI描述

去编辑

重新生成

提示 

关闭后当前内容将不会保存，是否继续？

取消

确定

Document