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
异步加载
延迟解析非必需脚本
避免长时间执行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
cookie
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
0 条评论
下一页
