

首页  思维导图  详情



google-web

2017-08-25 09:45:26   23  举报





AI智能生成

google web fundamentals

模版推荐

作者其他创作

大纲/内容

https://developers.google.com/web

基础知识

性能

RAIL模型评估性能

优化内容

资源评估

压缩

删除注释

混淆

gzip

图片

svg

子主题

光栅图片格式

有损和无损压缩

人眼

删除元数据

图片尺寸=显示尺寸

自动化

web font

cache

优化关键渲染路径

优先显示与当前用户操作有关的内容

优化html,css,js之间的依赖

字节 → 字符 → 令牌 → 节点 → 对象模型

转换-令牌化-词法分析-DOM构建

子主题

DOM

CSSOM

Render Tree

布局 layout

绘制/栅格化 paint

css是阻塞渲染的资源

是否暂停网页的首次渲染，直至资源就绪

css资源加载放到开始

使用media查询，css下载时，不阻塞渲染

js执行阻塞渲染

async

defer

Lighthouse

性能指标

优化

关键资源数量

关键路径长度

关键字节

css

head

避免css @import

增加关键路径长度

内联css

异步加载

延迟解析非必需脚本

避免长时间执行js

渲染性能

设备刷新率60fps

js-style-layout-paint-composite

使用requestAnimationFrame替代setInterval

长时间运行的js放到Web Worker

任务分割

降低选择器复杂性，使用类

BEM

块，元素，修饰符

block,element,modifier

减少要计算样式的元素数量

避免布局，布局作用整个文档

flexbox布局优于position

避免强制同步布局

先读后写，而不是直接写

避免布局抖动

除transform 或 opacity外其他属性都会导致重绘

尽量使用这两个属性动画

单独一个层

绘制是像素管道中开销最大的

减少绘制区域，提升层

降低绘制复杂性

模糊，阴影开销很大

管理层，过多的层，增加内存和管理开销

will-change，transform

提升元素

提前告诉浏览器该元素即将更改，创建合成层

debounce 滚动，鼠标移动等

HTTP2

引入了一个新的二进制分帧层，无法兼容1.1

PRPL

PWA

推送

为初始网址路由推送关键资源

渲染

渲染初始路由

预缓存

预缓存剩余路由

延迟加载

延迟加载并按需创建剩余路由

服务器

服务工作线程

Sheel

顶层应用逻辑，路由器

PWA

Progressive Web Applications

AMP

Accelerated Mobile Pages

适合静态web

严格控制网页装载内容大小和顺序，达到明显提升用户体验的技术

Tools

Chrome DevTools

application

manifest

service workers

storage

local storage

session storage

WebSQL

SQLite

IndexDB

NoSQL

cache

Cache Storge

Application Cache

Frames

audits

优化建议

PWA

performance

best pratice

accessibility

console

elements

memory

take heap snapshoot

distance

windows对象到该对象的最短路径长度

object counts

Shallow Size

直接占用内存

Retained Size

占用总内存

record allocation profile

从js方法查看内存分配

record allocation timeline

实时堆内存分配

查找内存泄漏，查找未正确执行垃圾回收的对象

子主题

network

同一域名下的http1资源文件同时最多6个tcp链接

TTFB

Time To First Byte

Resource Scheduling

Connection Start

Request/Response

Request sent TIME

Waiting (TTFB) TIME

Content Download TIME

Stalled TIME

Queueing TIME

performance

sources

Security

https安全

混合内容会显示不安全

https页面尝试加载js、图片等，但j这些地址是http的

https配置

认证

安装ssl模块

ngnix配置

动画检查器

Lighthouse

分析web

PageSpeed

开源服务器模块，可以自动优化web

 Collect

Get Started

Google

 Collect

Get Started

Google

 Collect

Get Started

Google

 Collect

Get Started

Google





0 条评论

下一页