性能
加载、渲染与运行时的性能优化。
收录 10 篇 · 涉及 3 个分类 · 跨度 2 个月全部标签
相关标签
%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22hsl(351%2C74%25%2C62%25)%22%2F%3E%3C%2FlinearGradient%3E%3C%2Fdefs%3E%3Crect%20width%3D%221200%22%20height%3D%22900%22%20fill%3D%22url(%23g)%22%2F%3E%3Cg%20fill%3D%22%2523ffffff%22%20opacity%3D%220.12%22%3E%3Ccircle%20cx%3D%22840%22%20cy%3D%22240%22%20r%3D%22240%22%2F%3E%3Ccircle%20cx%3D%22220%22%20cy%3D%22700%22%20r%3D%22300%22%2F%3E%3C%2Fg%3E%3Cg%20fill%3D%22none%22%20stroke%3D%22%2523ffffff%22%20stroke-opacity%3D%220.18%22%20stroke-width%3D%223%22%3E%3Cpath%20d%3D%22M-40%20660C260%20520%20610%20810%201240%20590%22%2F%3E%3Cpath%20d%3D%22M-40%20760C300%20620%20660%20880%201240%20680%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E)
文章 · 性能优化前端监控里最容易被忽略的指标，以及我们最终采用的方案
从问题出现到方案落地，记录每一步判断与最终结果。
%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22hsl(193%2C74%25%2C62%25)%22%2F%3E%3C%2FlinearGradient%3E%3C%2Fdefs%3E%3Crect%20width%3D%221200%22%20height%3D%22900%22%20fill%3D%22url(%23g)%22%2F%3E%3Cg%20fill%3D%22%2523ffffff%22%20opacity%3D%220.12%22%3E%3Ccircle%20cx%3D%22880%22%20cy%3D%22360%22%20r%3D%22240%22%2F%3E%3Ccircle%20cx%3D%22270%22%20cy%3D%22660%22%20r%3D%22300%22%2F%3E%3C%2Fg%3E%3Cg%20fill%3D%22none%22%20stroke%3D%22%2523ffffff%22%20stroke-opacity%3D%220.18%22%20stroke-width%3D%223%22%3E%3Cpath%20d%3D%22M-40%20660C260%20520%20610%20810%201240%20590%22%2F%3E%3Cpath%20d%3D%22M-40%20760C300%20620%20660%20880%201240%20680%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E)
文章 · 性能优化深色模式的对比度修正：一次完整复盘
先给结论，再拆过程：哪些做法有效，哪些只是看起来有效。
%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22hsl(35%2C74%25%2C62%25)%22%2F%3E%3C%2FlinearGradient%3E%3C%2Fdefs%3E%3Crect%20width%3D%221200%22%20height%3D%22900%22%20fill%3D%22url(%23g)%22%2F%3E%3Cg%20fill%3D%22%2523ffffff%22%20opacity%3D%220.12%22%3E%3Ccircle%20cx%3D%22920%22%20cy%3D%22240%22%20r%3D%22240%22%2F%3E%3Ccircle%20cx%3D%22320%22%20cy%3D%22620%22%20r%3D%22300%22%2F%3E%3C%2Fg%3E%3Cg%20fill%3D%22none%22%20stroke%3D%22%2523ffffff%22%20stroke-opacity%3D%220.18%22%20stroke-width%3D%223%22%3E%3Cpath%20d%3D%22M-40%20660C260%20520%20610%20810%201240%20590%22%2F%3E%3Cpath%20d%3D%22M-40%20760C300%20620%20660%20880%201240%20680%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E)
文章 · 性能优化前端监控里最容易被忽略的指标：一次完整复盘
把踩过的坑按顺序写清楚，附上最终采用的方案与代价。
%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22hsl(237%2C74%25%2C62%25)%22%2F%3E%3C%2FlinearGradient%3E%3C%2Fdefs%3E%3Crect%20width%3D%221200%22%20height%3D%22900%22%20fill%3D%22url(%23g)%22%2F%3E%3Cg%20fill%3D%22%2523ffffff%22%20opacity%3D%220.12%22%3E%3Ccircle%20cx%3D%22760%22%20cy%3D%22360%22%20r%3D%22240%22%2F%3E%3Ccircle%20cx%3D%22220%22%20cy%3D%22700%22%20r%3D%22300%22%2F%3E%3C%2Fg%3E%3Cg%20fill%3D%22none%22%20stroke%3D%22%2523ffffff%22%20stroke-opacity%3D%220.18%22%20stroke-width%3D%223%22%3E%3Cpath%20d%3D%22M-40%20660C260%20520%20610%20810%201240%20590%22%2F%3E%3Cpath%20d%3D%22M-40%20760C300%20620%20660%20880%201240%20680%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E)
文章 · 性能优化深色模式的对比度修正
记录一次从 0 到 1 的尝试，失败的版本也一并保留。
%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22hsl(79%2C74%25%2C62%25)%22%2F%3E%3C%2FlinearGradient%3E%3C%2Fdefs%3E%3Crect%20width%3D%221200%22%20height%3D%22900%22%20fill%3D%22url(%23g)%22%2F%3E%3Cg%20fill%3D%22%2523ffffff%22%20opacity%3D%220.12%22%3E%3Ccircle%20cx%3D%22800%22%20cy%3D%22240%22%20r%3D%22240%22%2F%3E%3Ccircle%20cx%3D%22270%22%20cy%3D%22660%22%20r%3D%22300%22%2F%3E%3C%2Fg%3E%3Cg%20fill%3D%22none%22%20stroke%3D%22%2523ffffff%22%20stroke-opacity%3D%220.18%22%20stroke-width%3D%223%22%3E%3Cpath%20d%3D%22M-40%20660C260%20520%20610%20810%201240%20590%22%2F%3E%3Cpath%20d%3D%22M-40%20760C300%20620%20660%20880%201240%20680%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E)
文章 · 性能优化前端监控里最容易被忽略的指标
从问题出现到方案落地，记录每一步判断与最终结果。
- 文章 · 性能优化
图片懒加载之外，还该做解码优化
图片下载完不等于能立刻画出来，解码、尺寸占位与优先级三件事决定体感快慢。