-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathoptimize_docs.html
1 lines (1 loc) · 10.1 KB
/
optimize_docs.html
1
<!doctype html><html lang="zh-CN" class="night"><head><meta charset="utf-8"><meta content="width=device-width,initial-scale=1,maximum-scale=4,user-scalable=0" name="viewport"><title>Ede's Blog</title><meta name="description" content="Try to be a qualified programmer"><meta property="og:type" content="website"><meta property="og:description" content="Try to be a qualified programmer"><meta property="og:title" content="Ede's Blog"><meta property="og:site_name" content="Ede's Blog"><meta property="og:url" content="https://ede.ink"><meta property="og:image" content="https://edeity.oss-cn-shenzhen.aliyuncs.com/public/edeity_o.png"><link rel="shortcut icon" href="/favicon.ico" type="image/x-icon"><link rel="mainfest" href="/mainfest.json"><link rel="stylesheet" href="/public/css/common.css"><link rel="stylesheet" href="//at.alicdn.com/t/font_707055_4b9og9sc5lx.css"><script>!function(){var e=-1!==window.location.search.indexOf("theme=night")||"night"===window.localStorage.getItem("edeity-theme_theme"),t=-1!==window.location.search.indexOf("theme=light")||"light"===window.localStorage.getItem("edeity-theme_theme");(new Date).getHours();var n=document.querySelector("html");e?n.classList.add("night"):t?n.classList.remove("night"):n.classList.add("night")}(),document.addEventListener("DOMContentLoaded",function(){null!==document.querySelector("ol.toc")&&(document.querySelector("#nav-bar").style.cssText="display: block")})</script><script async src="https://www.googletagmanager.com/gtag/js?id=G-M3J9QSEE2Z"></script><script>function gtag(){dataLayer.push(arguments)}window.dataLayer=window.dataLayer||[],gtag("js",new Date),gtag("config","G-M3J9QSEE2Z")</script><meta name="generator" content="Hexo 5.0.0"></head><body><div class="loading"></div><div id="switch" data-switch="{"toc":true,"use_pwa":false}"></div><header class="fullscreen"><div class="toolbar"><i class="iconfont icon-menu"></i></div><h1><a href="/">Ede's Blog</a></h1><div class="head-link"><a class="btn waves" href="/"><span><i class="iconfont icon-home">Home </i></span></a><a class="btn waves" href="/about/index.html"><span><i class="iconfont icon-me">About </i></span></a><a class="btn waves" target="_blank" rel="noopener" href="https://github.com/edeink"><span><i class="iconfont icon-github">Github</i></span></a></div></header><div class="some-link"><a class="btn" id="light-or-not"><i class="iconfont icon-light"></i> </a><a style="display:none" class="btn" id="up-to-top"><i class="iconfont icon-up"></i></a></div><div id="nav-bar" style="display:none"><div class="toc"><ol class="toc"><li class="toc-item toc-level-2"><a class="toc-link" href="#%E6%96%B9%E5%90%91"><span class="toc-number">1.</span> <span class="toc-text">方向</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E6%96%87%E5%AD%97%E7%9A%84%E4%B8%89%E5%A4%A7%E6%AD%A5%E9%AA%A4"><span class="toc-number">2.</span> <span class="toc-text">文字的三大步骤</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E6%B5%8B%E9%87%8F%E5%B7%A5%E5%85%B7"><span class="toc-number">3.</span> <span class="toc-text">测量工具</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E9%A6%96%E5%B1%8F%E4%BC%98%E5%8C%96"><span class="toc-number">4.</span> <span class="toc-text">首屏优化</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E9%AB%98%E9%A2%91%E6%93%8D%E4%BD%9C%E4%BC%98%E5%8C%96"><span class="toc-number">5.</span> <span class="toc-text">高频操作优化</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#%E4%BE%8B%E5%AD%90"><span class="toc-number">5.1.</span> <span class="toc-text">例子</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E5%8F%82%E8%80%83"><span class="toc-number">6.</span> <span class="toc-text">参考</span></a></li></ol></div></div><main id="content-main" class="section"><div class="list-item"><h1 class="post-title"><a id="WEB文字性能优化简述" class="article-link" href="">WEB文字性能优化简述</a></h1><div class="post-meta"><time class="meta published">Aug 13, 2019</time></div><div class="article"><div class="post-excerpt markdown-body"><div class="alert">以下为概述，具体不展开</div><p>结论：两板斧下来，无论是首屏加载还是渲染，都有25%以上的提高。<br><small>小声BB：可能还是原来的代码太菜</small></p><h2 id="方向"><a href="#方向" class="headerlink" title="方向"></a>方向</h2><ul><li><p>首屏打开速度</p></li><li><p>高频操作优化（eg：输入）</p></li></ul><h2 id="文字的三大步骤"><a href="#文字的三大步骤" class="headerlink" title="文字的三大步骤"></a>文字的三大步骤</h2><ul><li><code>文字排版</code>：输入后，计算布局排版结果<small>（类似于浏览器的重排）</small></li><li><code>排版渲染</code>：得到排版结果，文档前端绘制<small>（类似于浏览器的重绘）</small></li><li><code>视图更新</code>：GCP变化触发一系列React组件更新</li></ul><p>一般地，执行的流程是：<code>文字排版</code> -> <code>排版渲染</code> -> <code>视图更新</code></p><h2 id="测量工具"><a href="#测量工具" class="headerlink" title="测量工具"></a>测量工具</h2><ul><li><code>Dev Performance</code> & <del><code>React Tools</code></del></li></ul><h2 id="首屏优化"><a href="#首屏优化" class="headerlink" title="首屏优化"></a>首屏优化</h2><p>分析首页加载的步骤</p><ul><li><p>按业务分阶段加载组件：</p><ul><li>首屏渲染阶段（KPI生命线）</li><li>首屏渲染后（加载一些必要的组件，避免断网影响）</li><li>其他辅助功能（用到时才加载）。</li></ul></li><li><p>网络层面优化：</p><ul><li>preload服务端渲染</li><li>提取公共库以及业务核心库（eg：React，polyfill），并移除某些polyfill<ul><li>减少约10%代码量</li></ul></li><li>语法层面采用更规范的<code>ES6 modules</code><ul><li>Babel默认的Commonjs会引入副作用导致webpack无法Tree Shake</li><li>减少约7%代码量</li></ul></li><li>缓存：<ul><li>cdn缓存（更新频繁时，命中率周期变化）</li><li>pwa缓存（这个作用不好评估，会加大init的时间）<ul><li>【后续，已移除PWA，中国缺少PWA生存土壤】</li></ul></li><li>入口文件prefetch文件</li><li>组件相互唤起（未参与，不知优化效果）</li></ul></li><li>请求方式：提前加载，串行转并行<ul><li>webpack code split后不注意会导致串行</li><li>首次加载，网速较慢时，约提高100ms<small>（未来可考察<a target="_blank" rel="noopener" href="https://zhuanlan.zhihu.com/p/26757514">server push</a>）</small></li></ul></li></ul></li></ul><h2 id="高频操作优化"><a href="#高频操作优化" class="headerlink" title="高频操作优化"></a>高频操作优化</h2><p>更新周期耗，<strong>期望小于16ms</strong>（60FPS-流畅），<strong>不高于32ms</strong>（30FPS-平稳）。</p><p><strong>基本方法：</strong></p><ol><li>对<strong>实时</strong>函数调用，进行性能优化。</li><li>对<strong>非实时</strong>函数调用，进行限流防抖。</li></ol><h3 id="例子"><a href="#例子" class="headerlink" title="例子"></a>例子</h3><ul><li>限制操作频率（最简单粗暴且有效）</li><li>限制更新频率：<ul><li>组件更新异步：<code>requestAnimate</code>或<code>requestIdleCallback</code>中<small>（eg：SelectionChanged）</small></li><li>减少<code>setState</code>调用次数（触发React diff，会占用1~2ms的时间）</li><li>缓存高频属性（如<code>clientWidth</code>、<code>scrollTop</code>等）（<a href="/detail_of_throttle.html#Round-1%EF%BC%9Athrottle%E6%98%AF%E7%AB%8B%E5%8D%B3%E8%BF%94%E5%9B%9E">throttle自带缓存机制</a>）</li></ul></li><li>用ES5的接口替代部分JS实现，如：<ul><li><code>Object.assign</code>取代<code>copy</code></li><li>避免过频使用<code>RegExep</code>等<small>（第一次向Chromium提<a target="_blank" rel="noopener" href="https://bugs.chromium.org/p/chromium/issues/detail?id=992277">bug</a>）</small></li><li>高频方法避免使用析构<code>...args</code>（polyfill后会转变成数组的slice、concat，耗时严重）</li></ul></li><li>渲染方面，svg较canvas，在放大缩小操作上有明显的性能优势。<ul><li>svg结构松散时，可合并图层（离屏渲染、DocumentFragment）。</li></ul></li><li>更优的数据结构，如<a target="_blank" rel="noopener" href="https://lotabout.me/2018/segment-tree/">区间树</a>等<small>（考验硬实力，向C艹大佬低头）</small><ul><li>数据巨大，遍历树时，仍是耗时操作，同样需要缓存高频属性</li></ul></li></ul><h2 id="参考"><a href="#参考" class="headerlink" title="参考"></a>参考</h2><ul><li><p><a target="_blank" rel="noopener" href="https://developers.google.com/web/fundamentals/performance/rail#goals-and-guidelines">使用 RAIL 模型评估性能</a></p></li><li><p><a target="_blank" rel="noopener" href="https://developers.google.com/web/tools/chrome-devtools/evaluate-performance/">Get Started With Analyzing Runtime Performance</a></p></li><li><p><a target="_blank" rel="noopener" href="https://juejin.im/entry/59dc9aedf265da43200232f9">详谈层合成（composite）</a></p></li><li><p><a target="_blank" rel="noopener" href="https://developers.google.com/web/fundamentals/performance/rendering/reduce-the-scope-and-complexity-of-style-calculations">缩小样式计算的范围并降低其复杂性</a></p></li></ul></div></div></div><div class="more section"><div class="pre"><a class="article-link" href="/read_v8_blog.html"><i class="iconfont icon-right"></i> <span>V8 Blog的阅读笔记</span></a></div><div class="next"><a class="article-link" href="/get_more_by_node.html">那些没什么卵用的前端技巧 <i class="iconfont icon-right"></i></a></div></div></main></body><footer class="section fullscreen"><div class="footer-desc">Edeink © 2015-2022 · Powered by Hexo</div></footer><script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script><script src="/public/js/init.js"></script></html>