フロントエンドのパフォーマンスの最適化 - 私たちはインタビューについてお話します
なぜ最適化を行います
ユーザーに最高の体験を提供
#有哪些差的体验
- 白屏好久才显示内容
- h5浪费用户流量
おそらく、次のカテゴリに分け最適化プログラム:
1、降低请求数量
a、减少获取数据的接口数(初始数据尽量通过一个接口返回)
b、减少js、css的数量(提取公共js、css利用缓存、减少后续加载访问。有些代码直接注入页面无需外链形式访问加载。)
c、图片懒加载
2、降低文件大小
a、图片压缩以及使用webp
b、压缩js、css
c、gzip(设置content-encoding:gzip)
d、icon或者svg绘制图标
3、加快请求速度
a、[DNS预解析][1]
b、减少域名数量(页面、js、css、image、接口域名、同种类型文本请求尽量同域名。)
c、静态资源cdn分发
d、提前加载(提前加载一部分可能被用户访问的图片或者数据信息)
4、缓存
a、http协议缓存
b、离线数据缓存localStorage
5、渲染
a、js、css优化(按照规范来写--google规范)
b、服务器渲染
DNSは、事前解決
Googleの仕様を