背景
我们经常提到要创建高性能的前端,高性能的前端有哪些需要我们注意的能
请求图片样式多,
文件压缩和分割,
工具算法靠策略,
事件委托位操作。
解释
请求:减少请求数量,控制返回数据的大小,静态资源缓存、CDN、SSR
图片:延迟加载、响应式图片、降低图片质量、避免无效宽高、CSS动画替换动图、webp格式的图片
样式:先加载样式后加载JS、重绘重排、Flex、Grid布局、字体图标、选择器优先级、浏览器的60FPS及requestAnimationFrame
压缩:Html、JS、CSS、字体、Gzip
分割:路由、import()、splitChunks、babel-transform-runtime
工具:F12 performance页签、window.performance 对象
算法:考虑时间、空间复杂度,结合查找表、MAP、位运算
事件:使用事件委托
总结
每天背诵一次