TE
科技回声
首页24小时热榜最新最佳问答展示工作
GitHubTwitter
首页

科技回声

基于 Next.js 构建的科技新闻平台,提供全球科技新闻和讨论内容。

GitHubTwitter

首页

首页最新最佳问答展示工作

资源链接

HackerNews API原版 HackerNewsNext.js

© 2025 科技回声. 版权所有。

Web fundamentals – performance

88 点作者 dreampeppers99超过 9 年前

4 条评论

PhrosTT超过 9 年前
Please note they say &quot;debounce&quot; your scroll handlers but they demonstrate a requestAnimationFrame based solution.<p>Do not confuse this with _.debounce().<p>In the context lodash&#x2F;underscore I believe the correct approach is _.throttle the &#x27;scroll&#x27;, and _.debounce the &#x27;resize&#x27; handlers.
pcwalton超过 9 年前
<a href="https:&#x2F;&#x2F;developers.google.com&#x2F;web&#x2F;fundamentals&#x2F;performance&#x2F;rendering&#x2F;simplify-paint-complexity-and-reduce-paint-areas?hl=en" rel="nofollow">https:&#x2F;&#x2F;developers.google.com&#x2F;web&#x2F;fundamentals&#x2F;performance&#x2F;r...</a> and <a href="https:&#x2F;&#x2F;developers.google.com&#x2F;web&#x2F;fundamentals&#x2F;performance&#x2F;rendering&#x2F;stick-to-compositor-only-properties-and-manage-layer-count?hl=en" rel="nofollow">https:&#x2F;&#x2F;developers.google.com&#x2F;web&#x2F;fundamentals&#x2F;performance&#x2F;r...</a> are very Chrome-specific advice. A different rendering pipeline will not suffer from these performance gotchas. IMHO, the distinction between &quot;painting&quot; and &quot;compositing&quot;, where painting is hugely more expensive, is an artifact of browsers&#x27; dependence on suboptimally-performing GPU-assisted (as opposed to GPU-accelerated) vector graphics pipelines [1].<p>&gt; Want a definitive list of which CSS properties trigger layout, paint, or composite? Check out CSS Triggers.<p>More overly-Chrome-specific advice. This list of properties varies from browser to browser, and a browser that has off-main-thread layout and&#x2F;or a unified vector graphics pipeline will not have these gotchas.<p>&gt; In any case, whether you choose Flexbox or not, you should still try and avoid triggering layout altogether during high pressure points of your application!<p>Chrome-specific advice again (although, to be fair, this applies to all popular browsers right now). This doesn&#x27;t apply if your layout is off the main thread.<p>&gt; If you really want to see JIT in action you should check out IRHydra2 by Vyacheslav Egorov. It shows the intermediate state of JavaScript code when Chrome’s JavaScript engine, V8, is optimizing it.<p>It&#x27;s strange to advocate using this and later on to suggest avoiding microbenchmarking JavaScript. In any case, using IRHydra will tune your application to V8, which is a constantly shifting target and is well known for having lots of slow paths that don&#x27;t necessarily apply to other engines (try&#x2F;catch leading to a deoptimization being perhaps the most well-known example).<p>[1]: <a href="http:&#x2F;&#x2F;developer.download.nvidia.com&#x2F;devzone&#x2F;devcenter&#x2F;gamegraphics&#x2F;files&#x2F;opengl&#x2F;gpupathrender.pdf" rel="nofollow">http:&#x2F;&#x2F;developer.download.nvidia.com&#x2F;devzone&#x2F;devcenter&#x2F;gameg...</a>
评论 #11105372 未加载
theandrewbailey超过 9 年前
Can we drop EOT formats in font stacks already? IE was the reason for EOT, but all currently supported versions of IE support WOFF.
评论 #11104087 未加载
gonyea超过 9 年前
Oddly enough, this website&#x27;s scrolling behaves horribly on my iPad.<p>Web fundamentals – test in something other than Chrome on a MacBook Pro.