SegmentFault 前端的逆袭最新的文章
2018-01-26T13:08:17+08:00
https://segmentfault.com/feeds/blogs
https://creativecommons.org/licenses/by-nc-nd/4.0/
【抢先领】《React 学习之道》我们翻译了一本最简单,且最实用的 React 实战教程……
https://segmentfault.com/a/1190000013003069
2018-01-26T13:08:17+08:00
2018-01-26T13:08:17+08:00
吕立青_JimmyLv
https://segmentfault.com/u/jimmylv
5
<h2>《React 学习之道》The Road to learn React (简体中文版)</h2>
<blockquote>通往 React 实战大师之旅:掌握 React 最简单,且最实用的教程。</blockquote>
<p><img src="/img/remote/1460000013003074?w=600&h=957" alt="" title=""></p>
<h3>前言</h3>
<p><a href="https://link.segmentfault.com/?enc=Mq6AVLQVbYRSJ5M9auiHkQ%3D%3D.WXsVSzlfMTbGDUWJDmvA%2BUrkmb03Mns%2FLrK3%2BNjSexatbghVA3bZh5FsJFaT%2B%2FyMRah6efGtaHl8rhUrf2mJIQ%3D%3D" rel="nofollow">《React 学习之道》</a>这本书使用路线图中的精华部分用于传授 React,并将其融入一个独具吸引力的真实世界 App的具体代码实现。</p>
<p>如何掌握 React 存在特别多的路线图。本书提取这些路线图中的精华部分,并将其融入于一个具体的应用程序当中。您将会构建一个属于自己的 React 应用程序。在本次学习之旅当中,您将学习 ES6,了解所有 React 的基础知识、先进理念,以及组件的内部状态管理。</p>
<h3>作者与译者</h3>
<p>首先,感谢 <a href="https://link.segmentfault.com/?enc=EiuOkOp80WDl%2FEyLQ%2B2sCg%3D%3D.ApZzG6zxJX5x%2FgUDUqdZ38srmiGCdwgiISFVlJ%2F14Zb2sc0dxo0MEsir67Kv5Q3R" rel="nofollow">The Road to learn React</a> 原书作者,<a href="https://link.segmentfault.com/?enc=GYAciMHD91Xt4Vx0bod8Mw%3D%3D.XasaQSE8wbyYFMpOXnNKHag%2F%2BO6jVPu8PMjnOOQwtWE%3D" rel="nofollow">Robin Wieruch</a>。本书的翻译始于 React China 社区的一个帖子:<a href="https://link.segmentfault.com/?enc=LpbC9kS9JBqUrEi1TgvBMA%3D%3D.WRO111xvqAU0gL4eSkjSB6Gk04DPDyHRGZ5U3qu%2B52bxH4QBgqt7wTh%2Brj4D1a%2BfRFK8zgTIY8j0eEX2eqeRfmqp7%2BVj8dBvnIqe4WHs%2FEJf6iH6krZJ8Z%2BG%2FoE3xEWx" rel="nofollow">The Road to learn React - Simplified Chinese Translation</a>。</p>
<p>本书翻译来自 ThoughtWorks 的 JS Community 超豪华译者团队(排名不分先后):</p>
<p><a href="https://link.segmentfault.com/?enc=ySBax7k8VEeqo0lIfsMl0w%3D%3D.7%2FcU3aru%2B%2FY4qpmcmAiHsbcSOibz0elHpiSJ6hZ6BAA%3D" rel="nofollow">@LeiZeng</a> (曾磊)、<a href="https://link.segmentfault.com/?enc=dQpajl962eYFgOwVmQFAvw%3D%3D.siTPlsKFUok52zc1ZlDBg3PNqRUvHcmqvfRE12KvdWQ%3D" rel="nofollow">@JimmyLv</a> (吕靖)</p>
<p><a href="https://link.segmentfault.com/?enc=0MUbP8Yul3Tul5WFmSsekA%3D%3D.JX%2FLJXTFPEdI4iZwyfbKnR7%2Bnyv%2BEHn%2F%2FbezXwF83Cg%3D" rel="nofollow">@SBeator</a> (曾星鑫)、<a href="https://link.segmentfault.com/?enc=mY9%2BpYYGjJiy0bNSFShgeA%3D%3D.nTAjgSjYMD7Up86Oo7x2Ihng3tkH1VXZyPIXsRjacgg%3D" rel="nofollow">@kenpusney</a> (刘清)</p>
<p><a href="https://link.segmentfault.com/?enc=qaLkStv32KSvc4acwkp%2Fvg%3D%3D.Odithp%2FO5DZ6Kkx1kTdLIu9UD5Me8QRWykHTocls47w%3D" rel="nofollow">@azzgo</a> (文一山)、<a href="https://link.segmentfault.com/?enc=1NowbMeOwFaRgdeu5ZEycw%3D%3D.pjyQmIie95MMjwDLJmYDB38vZB4I0e4y4ofHrFGvJkk%3D" rel="nofollow">@trotyl</a> (余泽江)</p>
<p><a href="https://link.segmentfault.com/?enc=BZhQtjAlM%2Fcq2ymbfxC9gg%3D%3D.hsbWlZuGU2rr5NOGrGz3tKtfDBKZ6hX6zw3tEZCerXo%3D" rel="nofollow">@ariesjia</a> (陈嘉)、<a href="https://link.segmentfault.com/?enc=cSef7JWOxK%2FZZl27E7CtdA%3D%3D.WFiJBzB6dTkjxphBXnQZMLDTrLEy1QV7CiW08qozvJE%3D" rel="nofollow">@Yixi</a> (刘应皓)</p>
<p><a href="https://link.segmentfault.com/?enc=dNHaUu%2BdkhTR7IAUfdAOLA%3D%3D.NJBJGToxkcOz6bd7g6HOnv%2Bz0xXpOXG81bHWjblETpk%3D" rel="nofollow">@HelloRuiLi</a> (李睿)、<a href="https://link.segmentfault.com/?enc=6Ns%2FPl6icjKd3jzI1orqGQ%3D%3D.YA0snNxP1rW9koAAg2Wyic33RML521rpm8%2BMB5nOXSs%3D" rel="nofollow">@lazurey</a> (梁越)</p>
<p><a href="https://link.segmentfault.com/?enc=hWlPxSsftKfQ8Ax4nIU3lg%3D%3D.6MsZIWD%2FDZ2uL9GS5xeeEATD9xtG5Dc4G5WzQbrXELk%3D" rel="nofollow">@zengyang2014</a> (曾扬)、<a href="https://link.segmentfault.com/?enc=6XfwOCGYE7%2FWSHraTK5eZg%3D%3D.Kv5ZjGeIrsJjRkiRmwoTXF3E0jwKgB3QYYuDtXbyfjmcoP1ygmxQRp7z0inuUYMe" rel="nofollow">@liujiefengfeng</a> (刘杰凤)</p>
<p><a href="https://link.segmentfault.com/?enc=j2B2XGdlJtV3wQIpryTypg%3D%3D.gaMxNcF%2FCipmJaIjnV5ZgPmtCQ7cAYx5F4ZLwkEqS2A%3D" rel="nofollow">@futantan</a> (傅坦坦)、<a href="https://link.segmentfault.com/?enc=772RrjZ1VuWSgWnufmUyJg%3D%3D.TeDvaQAXrkYtcS%2BRnDJ2a1GY9ZK7Qve7FpdZu9mbAWE%3D" rel="nofollow">@linksgo2011</a> (林宁)</p>
<h3>本书介绍</h3>
<p>《React 学习之道》会教您一些 React 的基础知识。通过这套教程,您可以使用纯 React 构建一个真正可用的应用程序,而不需要去理会其他复杂的工具。我将为您逐一介绍从开发环境的准备到部署上线的全部过程。本书每一章都包含一些额外的索引资料以及课后练习。在读完本书之后,您将会有能力依靠自己构建一个 React 应用。我,<a href="https://link.segmentfault.com/?enc=6mLFXcCGJHUE%2BSX1RykzVQ%3D%3D.YMM%2FS44oIXb0beKuoVQY02tWELhsFzy9qsKg0kf3EnQ%3D" rel="nofollow">Robin Wieruch</a>,以及整个社区会持续维护和更新这些资料。</p>
<p>通过《React 学习之道》,在开始陷入到更庞大的 React 生态圈之前,我想为您奠定一个良好的基础。它会通过一个真实可用的 React 应用来解释基本概念、设计模式以及最佳实践。</p>
<p>您将会学习构建您自己的 React 应用。这个应用会涉及一些真正可用的功能,比如分页,客户端缓存,以及像搜索和排序这样的交互功能。另外在这个过程中,您会慢慢从 JavaScript ES5 过渡到 JavaScript ES6。我希望这本书能充分体现我对 React 和 JavaScript 的热忱所在,并帮助您能够开始您的开发旅程。</p>
<h3>您可以期望学到什么(目前为止...)</h3>
<ul>
<li><a href="https://link.segmentfault.com/?enc=B3RtLGZ0uN2wxk4NPCkjuQ%3D%3D.qRz5i9ASOxeSI5QaptwNFoZZoYxQj7WG1jWQEEkX4h%2BZzR6MO9DmFCMgSifRkYp1" rel="nofollow">Hacker News的React版本</a></li>
<li>没有复杂的配置</li>
<li>用create-react-app来初始化你的应用</li>
<li>高效而轻量级的代码</li>
<li>只用React setState来做状态管理(目前为止...)</li>
<li>从JavaScript ES5一路平滑过渡到ES6</li>
<li>React setState和生命周期函数的用法</li>
<li>和真实API的交互(Hacker News)</li>
<li>高级用户交互</li>
<li>客户端排序</li>
<li>客户端过滤</li>
<li>服务器端搜索</li>
<li>客户端缓存的实现</li>
<li>高阶函数和高阶组件</li>
<li>用Jest进行组件的切片(snapshot)测试</li>
<li>用Enzyme进行组件的单元测试</li>
<li>过程中学到一些有用的工具库</li>
<li>过程中的练习题和扩展阅读</li>
<li>认同和巩固你的所学</li>
<li>将您的应用部署到产品环境</li>
</ul>
<h3>您需要具备哪些知识?</h3>
<p>在开始阅读本书之前,您应该熟悉 HTML、CSS 和 JavaScript(ES5)。本书将会传授 ES6 及其更高版本,如果您熟悉于其它不同的 SPA 框架或库,您应该对这些基本知识已经了然于心。如果您刚刚开始您的 Web 开发之旅,您应该优先学习并掌握 HTML、CSS 和 JavaScript,然后再来学习 React。</p>
<h3>读者赠言</h3>
<p><strong><a href="https://link.segmentfault.com/?enc=rmVSTpHldD7w9jrGfchmTw%3D%3D.4GRMqy8KFSU8fnDVk5v90JylB1d83T%2Fqyw4dnUJ5KTG7j7QiAXoWgW7DQH2W2rJfrzZts9dJLgaUTfKLsjQJSw%3D%3D" rel="nofollow">Muhammad Kashif</a>:</strong> “《React 学习之道》是一本独一无二的书,我推荐给任何想要学习React基础和进阶技巧的学生或者专业人士。她包含了诸多启发性的小提示和绝无仅有的技术点。书中虽然引用了大量例子和参考资料,但最后都被用到我们要解决的问题上,这体现了编写本书令人惊叹地缜密。我有17年的互联网和桌面开发经验,阅读本书之前,我在学习React的过程中缺并不顺利。而这本书就像魔术一样有用。”</p>
<p><strong><a href="https://link.segmentfault.com/?enc=Qz1Wu65Pjz7maNTIfjcPzw%3D%3D.va5rGbNrDxVf69WJhpJeFv0HKEWLPymaJbdUIOV3O9J%2Bo4%2B6ya3qmkppI5r9%2FRQ9wfD4LgBuy8NawBakZ68pkw%3D%3D" rel="nofollow">Andre Vargas</a>:</strong> “Robin Wieruch的《React 学习之道》是一本非常牛的书!我所学到的绝大部分有关React甚至是ES6的知识都是通过她得来的!”</p>
<p><strong><a href="https://link.segmentfault.com/?enc=xEDzizxrtCy1aQe2Ff%2FDRQ%3D%3D.M%2FRnktKyUuDJM1dtKsaOYi%2F7NzA%2F2sDhQt4VIHN8NOCG6DkdpPrMGpR1JtWLEFQJ49el0Jiuh6JF3IAxHcYT1A%3D%3D" rel="nofollow">Nicholas Hunt-Walker, Instructor of Python at a Seattle Coding School</a>:</strong> “这是一本我读过的最严谨和最实用的编程书籍之一。一本完整的React和ES6使用说明。”</p>
<p><strong><a href="https://link.segmentfault.com/?enc=rPnFGVlVmKWlwQRRy7qfFg%3D%3D.3BvigoYMI4btWOM9hwy5yq8pUzOmTONuqZAi%2F2ozFU76h%2FGMSr0azyxuVCQHZcupjY8mEA%2Fho1X6EQDg0%2BbZBQ%3D%3D" rel="nofollow">Austin Green</a>:</strong> “非常感谢,真的很喜欢这本书。完美的学习曲线,不管是React,ES6,还是抽象编程概念。”</p>
<p><strong><a href="https://link.segmentfault.com/?enc=INkeCiE9FtpEER0JBSf%2BeA%3D%3D.%2BonsRmx%2Fhw4f2NfrHVULVSXiezhdJ9UJWS7y4PYQdy7EovbtyNf1rO8TuzFAGsG7rOTcy2IaY7LiF7zYGy3uWQ%3D%3D" rel="nofollow">Nicole Ferguson</a>:</strong> “这个周末跟着Robin的课程学习React,我发现这一切太有意思了。这几乎让我感到羞愧。”</p>
<p><strong><a href="https://link.segmentfault.com/?enc=T48%2BKXkjxbowDVOPCo1xcw%3D%3D.C%2FkWbDEW9ApAwtXKi5ncuJ2pRHo17BTtljmVOiI7tQ1amssZBiMKJfpCE8UKJYKXjVmxBwwsEUEMzb9ad470Zw%3D%3D" rel="nofollow">Karan</a>:</strong> “刚刚完成这个课程。这是全世界最好的学习React和JS的一本书。完美展现了ES的优雅。膜拜! :)”</p>
<p><strong><a href="https://link.segmentfault.com/?enc=OXb5eitMuHTI33zpvrBPOQ%3D%3D.vBaA7N86XnICPFe3yoOUk8DebQeeQDNukPRx9YYqsGgO1BmdH%2BRLQ7jonYb%2BDTlIOGPbX2panyFryYXzOZPBAw%3D%3D" rel="nofollow">Eric Priou</a>:</strong> “Robin的《React 学习之道》是必读的一本书。简明扼要地介绍了React和Javascript。”</p>
<p><strong>一个新手开发:</strong> “作为一个开发新手,我刚刚完成了这本书的学习,非常感谢写了这本书。她非常容易上手,我相信自己在接下来的几天可以开始从头开发一个新应用。这本书比我之前试过的官方React入门文档好很多(由于缺乏细节,我并未能够完成)。每个章节后面的练习题对我有很好的激励效果。”</p>
<p><strong>一个学生:</strong> “这是最好的学习React的一本书。我们可以一边做练习项目,一边学习知识点,然后还能紧扣我们的学习主题。我发现「边码边学」是最好的掌握编程的方法,而这本书完完全全是这样教我的。”</p>
<p><strong><a href="https://link.segmentfault.com/?enc=65J25PFVJ0027XV6T%2BcWBw%3D%3D.4blzPNce0xC4qQX2NXTb52fmnOJ%2Fvix0w%2Fe0BYRsNP3LSmlFvZzF7L2oEBiBHSFxw0YWqCWeFQkO4vjotHfgdQ%3D%3D" rel="nofollow">Thomas Lockney</a>:</strong> “这是一本非常扎实的介绍React的书,而不是试着把事情搞复杂。我本来只想尝试理解看看这本书到底讲了什么,然后我得出了上面的结论。我并没有跟着所有的脚注来学习我还没有注意到的新的ES6语法(我当然不会说我一直没有注意到,Bob)(译者注:这个是在博客中与另外一个朋友互动的话)。对于那些没有及时了解到这些新功能,并且很勤奋的跟着练习的朋友们,我想很肯定地对你们说,你们能学到的会不仅仅是这本书所教的东西。”</p>
<h3>恭喜你,快去看看我们的 Leanpub 主页吧!</h3>
<p><a href="https://link.segmentfault.com/?enc=GUvHZsLj4NajEBbhHoLM3g%3D%3D.KKGlQ7eVJSOySvxXIlfG2%2BkYfSaK1NIzS35dTpudy0kPTv4c8cQsXn8q1jUe6jx8u94%2FBCG9W1MBEYj1srrB4w%3D%3D" rel="nofollow">《React 学习之道》The Road to learn React (简体中文版) PDF/iPad/Kindle</a></p>
<p>支持 PDF、EPUB、MOBI、Kindle 多种格式下载,并支持 Leanpub 在线阅读。</p>
<h3>最后!求 Star!求小星星!</h3>
<ul>
<li>GitHub 翻译地址:<a href="https://link.segmentfault.com/?enc=VINMhV4Ij81CCzXsfYC18Q%3D%3D.zT8%2Bu096ESgUKgZd2dwzK8NQtoGH39dyvjtPBfBexNJSu5sYd3e%2BWmovJ2Indo4UssrxbPH065VbldgLs0wYxR0Wbvc8gkMwxaVDZq1m3RI%3D" rel="nofollow">the-road-to-learn-react/the-road-to-learn-react-chinese: 《React 学习之道》The Road to learn React (简体中文版) | 最简单,且最实用的 React 实战教程。</a>
</li>
<li>GitHub 原书地址:<a href="https://link.segmentfault.com/?enc=sO%2Fvx%2FqeuCs9DTCsmTb4Gg%3D%3D.qMwkulVq3Tvdwu370bIPms5F53BTYux1xZEuyVEdN9mikuY9jKyH47iocY2K4pKZVVMKYCWH8H6jQ09WGA7FKWgFhyIzvMDbzPxq2Jf3p9A%3D" rel="nofollow">the-road-to-learn-react/the-road-to-learn-react: The Road to learn React</a>
</li>
</ul>
[译] 唯快不破:Web 应用的 13 个优化步骤
https://segmentfault.com/a/1190000005798306
2016-06-25T13:33:17+08:00
2016-06-25T13:33:17+08:00
吕立青_JimmyLv
https://segmentfault.com/u/jimmylv
8
<p>欢迎关注<a href="https://link.segmentfault.com/?enc=Of7ImstCQ5HhYESklYJJFA%3D%3D.agQIX9QbLwhMCk8QQwB%2FIYy5swhZeyNYgwU8w%2BYZ1kBvaunWCYxoJm%2BFZ6ryzS%2Bp" rel="nofollow">知乎专栏 —— 前端的逆袭</a><br>欢迎关注我的<a href="https://link.segmentfault.com/?enc=0c9LPUEyXbR6Mwa5YYYFFg%3D%3D.w2yTYZr2FLzucZmTVasGw%2BvFHB0uLlXEBISBxOE6J5A%3D" rel="nofollow">博客</a>,<a href="https://link.segmentfault.com/?enc=KNF9%2BOaAu9sHbodFAE47nA%3D%3D.nRI3WrPPDRaPLUsWCyowiJeXFpbHa6R3nSr%2FGTJGJAJynhw75wqj0ODVtazkAXoJ" rel="nofollow">知乎</a>,<a href="https://link.segmentfault.com/?enc=eG9fMew9JBSeL2dtqv3cNA%3D%3D.E8YvYGvbAovBytvfL%2BpNXM5RuIXTmUMrConGx46%2BDNE%3D" rel="nofollow">GitHub</a>。</p>
<hr>
<blockquote><p>译文地址:<a href="https://link.segmentfault.com/?enc=JHD00vSGGMVBX68ar3uSog%3D%3D.WBNpMFcx7pIbOmQzYU4j0PQtyVErQP13ehfD9Rnt6CAXnUd01622ixD%2BKHS0S47jblIVulKgEC1W1bRLSH0Bew%3D%3D" rel="nofollow">【译】唯快不破:Web 应用的 13 个优化步骤 - 前端的逆袭 - 知乎专栏</a><br>原文地址:<a href="https://link.segmentfault.com/?enc=HnHZCwUTDHxW8yzBoSTCRA%3D%3D.%2FpTURJdwHuPURnZ2l1j%2F9vEeK0Uithftmwds%2FAnYnNvttxSdYzf8qcW4yHXH%2Fw4sHVx0qqt8UVLbOir%2F5GianQ%3D%3D" rel="nofollow">12 Steps to a Faster Web App -- Auth0</a></p></blockquote>
<p>时过境迁,Web 应用比以往任何时候都更具交互性。搞定性能可以帮助你极大地改善终端用户的体验。阅读以下的技巧并学以致用,看看哪些可以用来改善延迟,渲染时间以及整体性能吧!</p>
<h2>更快的 Web 应用</h2>
<p>优化 Web 应用是一项费劲的工作。Web 应用不仅处于客户端和服务器端的两部分组件当中,通常来说也是由多种多样的技术栈构建而成:数据库,后端组件(一般也是搭建在不同技术架构之上的),以及前端(HTML + JavaScript + CSS + 转化器)。运行时也是变化多端的:iOS,Android,Chrome,Firefox,Edge。如果你曾经工作在一个不同的单一庞大的平台之上,通常情况下性能优化只针对于单一目标(甚至只是目标的单一版本而已),但是现在的话你就可能会意识到任务复杂度要远超于此。这就对了。但这儿也有一些通用的优化指南可以大大优化一个应用。我们将会在接下来的章节中探讨这些指南的内容。</p>
<blockquote><p>一份 Bing 的研究表明,页面加载时间每增加 10ms,网站的年收入就会减少 25 万美元。 —— <strong>Rob Trace 和 David Walp,微软高级程序经理</strong></p></blockquote>
<h3>过早优化?</h3>
<p>优化最难的地方就是如何在开发生命周期中最适当的时候去做优化。Donald Knuth 有一句名言:_「过早优化乃万恶之源」_。这句话背后的原因非常简单:因为一不小心就会浪费时间去优化某个 1% 的地方,但是结果却并不会对性能造成什么重大影响。与此同时,一些优化还妨碍了可读性或者是可维护性,甚至还会引入新的 Bug。换句话说,优化不应当被认为是「意味着得到应用程序的最佳性能」,而是「探索优化应用的_正确的方式_,并得到_最大的效益_」。再换句话说,盲目的优化可能会导致效率的丢失,而收益却很小。在你应用以下技巧的时候请将此铭记在心。你最好的朋友就是分析工具:找到你可以进行通过优化获得最大程度改善的性能点,而不用损害应用开发的进程或者可维护性。</p>
<blockquote><p>程序员们浪费了大量时间来思考,或者说是担忧,他们的程序中非关键部分的运行速度。并且他们对于性能的这些尝试,实际上却对代码的调试和维护有着非常消极的影响。我们应当忘记那些不重要的性能影响,在 97% 的时间里都可以这么说:过早优化乃万恶之源。当然我们也不应当在那关键的 3% 上放弃我们的机会。—— Donald Knuth</p></blockquote>
<h2>1. JavaScript 压缩和模块打包</h2>
<p>JavaScript 应用是以源码形式进行分发的,而源码解析的效率是要比字节码低的。对于一小段脚本来说,区别可以忽略不计。但是对于更大型的应用,脚本的大小会对应用启动时间有着负面的影响。事实上,寄期望于使用 <a href="https://link.segmentfault.com/?enc=Kws1KYO6EUADhR5d9Dv4Fg%3D%3D.J9NGudAr65%2BHNSjTq1j56KWUokvsIObA2I5GGVmg6tKIHu34IphI%2FAzcGEDQVxDACKY%2B5BTYsQkeN11ZaM%2FB2KvwYGSGK6dusudroti0rfE%3D" rel="nofollow">WebAssembly</a> 而获得最大程度的改善,其中之一就是可以得到更快的启动时间。</p>
<p>另一方面,模块打包则用于将不同脚本打包在一起并放进同一文件。更少的 HTTP 请求和单个文件解析都可以减少加载时间。通常情况下,单独一种工具就可以处理打包和压缩。<a href="https://link.segmentfault.com/?enc=hupjLzhGC7s19fIHcE0Puw%3D%3D.T63xzRRpORBJjdq6OubHN7MUT%2FEx8uAsI8lnHPDMv3g%3D" rel="nofollow">Webpack</a> 就是其中之一。</p>
<p>示例代码:</p>
<pre><code class="js">function insert(i) {
document.write("Sample " + i);
}
for(var i = 0; i < 30; ++i) {
insert(i);
}</code></pre>
<p>结果如下:</p>
<pre><code class="js">!function(r){function t(o){if(e[o])return e[o].exports;var n=e[o]={exports:{},id:o,loaded:!1};return r[o].call(n.exports,n,n.exports,t),n.loaded=!0,n.exports}var e={};return t.m=r,t.c=e,t.p="",t(0)}([function(r,t){function e(r){document.write("Sample "+r)}for(var o=0;30>o;++o)e(o)}]);
//# sourceMappingURL=bundle.min.js.map</code></pre>
<h3>进一步打包</h3>
<p>你也可以使用 Webpack 打包 CSS 文件以及合并图片。这些特性都可以有助于改善启动时间。研究一下 <a href="https://link.segmentfault.com/?enc=SVbFIsLzR4We7WJkAlnPVA%3D%3D.ddIH2og8FD7C3wVLYatp2k62fZj7WfEwAPus5pqPsZs%3D" rel="nofollow">Webpack 文档</a>来做些测试吧!</p>
<h2>2. 按需加载资源</h2>
<p>资源(特别是图片)的按需加载或者说_惰性加载_,可以有助于你的 Web 应用在整体上获得更好的性能。对于使用大量图片的页面来说惰性加载有着显著的三个好处:</p>
<ul>
<li><p>减少向服务器发出的并发请求数量(这就使得页面的其他部分获得更快的加载时间)</p></li>
<li><p>减少浏览器的内存使用率(更少的图片,更少的内存)</p></li>
<li><p>减少服务器端的负载</p></li>
</ul>
<p>大体上的理念就是只在必要的时候才去加载图片或资源(如视频),比如在第一次被显示的时候,或者是在将要显示的时候对其进行加载。由于这种方式跟你建站的方式密切相关,惰性加载的解决方案通常需要借助其他库的插件或者扩展来实现。举个例子,<a href="https://link.segmentfault.com/?enc=LDsABBGzWGVHHo3jRxapSw%3D%3D.PQ1QaQcvaz0ZesuhmidFrBnrct4i1RZRL4EKORQm2N1EbPqK8pNmdt2UdZVQdIhW" rel="nofollow">react-lazy-load</a> 就是一个用于处理 React 惰性加载图片的插件:</p>
<pre><code class="js">const MyComponent = () => (
<div>
Scroll to load images.
<div className="filler" />
<LazyLoad height={762} offsetVertical={300}>
<img src='http://apod.nasa.gov/apod/image/1502/HDR_MVMQ20Feb2015ouellet1024.jpg' />
</LazyLoad>
(...)</code></pre>
<p>一个非常好的实践范例就像 Goggle Images 的<a href="https://link.segmentfault.com/?enc=e0S9J29bvAveGVYqAvGKow%3D%3D.uKTPFS38C71K0%2FOqnD47g0HbiTBigsxTaBaJyEEUoL%2BDrkXG1hd5sSpfcGLYq%2BYTO3SJ%2F2yA4ddFGXSlGTq2VqqoVfhM1hSHy%2FdCNeXrvJ%2FLZWCN6AUAXnggTBNLdGx5SqzcTkauL9Uzm6hLjvvKkT%2BPEdaisPzkVBNT6yKJpvArzTW%2BMgdsDNgeCA2fXCgP7%2FwiXA8sUGidXSM0Rj7fR5UPKZRhB4NacFsZ2UZUlOcsKDtQ4q9lHSrkbTeKQvwx9xtnKA38xmSVNBrfquzfkg%3D%3D" rel="nofollow">搜索工具</a>一样。点击前面的链接并且滑动页面滚动条就可以看到效果了。</p>
<h2>3. 在使用 DOM 操作库时用上 array-ids</h2>
<p>如果你正在使用 <a href="https://link.segmentfault.com/?enc=ehcO%2B4CNnoRfa0q631Dmng%3D%3D.03yuG3uU4aaRZyy%2BaWhKLw3Sjy89odVEjEsZd1iyRHTRa57KdeQDDkBNtW37HOK5" rel="nofollow">React</a>,<a href="https://link.segmentfault.com/?enc=yTkwxAJAg6VbMUaukkLOhg%3D%3D.dq3r4ahjDrT9DzGzw9nRqgjuIwo%2B8h5U8HgW2ex9RLs%3D" rel="nofollow">Ember</a>,<a href="https://link.segmentfault.com/?enc=ImS72Z1CtApaWYzd3nqL6g%3D%3D.LyqAVo0PaYeXeaXwUrs%2Fa10gks1%2F6WI%2BlxmgFFzk4AQ%3D" rel="nofollow">Angular</a> 或者其他 DOM 操作库,使用 array-ids(或者 Angular 1.x 中的 track-by 特性)非常有助于实现高性能,对于动态网页尤其如此。我们已经在上一篇程序衡量标准的文章中看到这个特性的效果了: <a href="https://link.segmentfault.com/?enc=fCG3qBvzqoHepde4hCdBQQ%3D%3D.zHgovd0CGtrF%2Fyr78pF6vyJLM5hIkrn5jao3p9RIcENFbT8jBUKhVX5b1uBuLpCzxuMDBKKR%2BO8JSMGiZZlB%2BjgjC4L5dOlkoJJRfoojDxSzlsJas%2FWzwXTmOtpm%2BevkVxM%2FsgBYVkYSdJxfXDGEmrzv61NXaouSkFj8rFRcP%2Fo%3D" rel="nofollow">More Benchmarks: Virtual DOM vs Angular 1 & 2 vs Mithril.js vs cito.js vs The Rest (Updated and Improved!)</a>。<img src="/img/remote/1460000006816764" alt="" title=""></p>
<p>此特性背后的主要概念就是尽可能多地重用已有的节点。<strong>Array ids</strong> 使得 DOM 操作引擎可以「知道」在什么时候某个节点可以被映射到数组当中的某个元素。没有 <strong>array-ids</strong> 或者 <strong>track-by</strong> 的话,大部分库都会进行重新排序而摧毁已有的节点并重新创建新的。这就非常损耗性能了。</p>
<h2>4. 缓存</h2>
<p><a href="https://link.segmentfault.com/?enc=9TmIYaxW7Wj0IO%2FqJy8NjQ%3D%3D.Bcu%2BbR6eECruH97bsjvIxOBFxdmTcQsbYMTEgwNEWi6ne05veEefa0t3M7goFfEROC7L66Yi%2FOyzDyIk7qcz6A%3D%3D" rel="nofollow">Caches</a> 是用于存储那些被频繁存取的静态数据的组件,便于随后对于这个数据的请求可以更快地被响应,或者说请求方式更加高效。由于 Web 应用是由很多可拆卸的部件组合而成,缓存就可以存在于架构中的很多部分。举例来说,缓存可以被放在动态内容服务器和客户端之间,就可以避免公共请求以减少服务器的负载,与此同时改善响应时间。其他缓存可能被放置在代码里,以优化某些用于脚本存取的通用模式,还有些缓存可能被放置在数据库或者是长运行进程之前。</p>
<p>简而言之,在 Web 应用中使用缓存是一种改善响应时间和减少 CPU 使用的绝佳方式。难点就在于搞清楚哪里才是在架构中存放缓存的地方。再一次,答案就是性能分析:常见的瓶颈在哪里?数据或者结果可缓存吗?他们都太容易失效吗?这都是一些棘手的问题,需要从原理上来一点一点回答。</p>
<p>缓存的使用在 Web 环境中富有创造性。比如,<a href="https://link.segmentfault.com/?enc=%2BKZfwIsXf8a2FIimCIxB0A%3D%3D.2aOqWMLrV0F0BDT3rhTypeVijRf8760F9tHYz%2F81cq7FmOxUfYRLjq5OeHxXwDmQ" rel="nofollow">basket.js</a> 就是一个使用_Local Storage_ 来缓存应用脚本的库。所以你的 Web 应用在第二次运行脚本的时候就可以几乎瞬间加载了。</p>
<p>如今一个广受欢迎的缓存服务就是亚马逊的 <a href="https://link.segmentfault.com/?enc=IdaYkWNL80XZwstRZpOb9A%3D%3D.6y784wqrq5mJ5cJA8TFbGuwhGcYjEu8fB8m8Jy6q4x%2FkAt9T6IpPju8deVQnu7Toy33nbjvwABP7tF4UhbuqzA%3D%3D" rel="nofollow">CloudFront</a>。CloudFront 就跟通常的内容分发网络(CDN)用途一样,可以被设置作为动态内容的缓存。</p>
<h2>5. 启用 HTTP/2</h2>
<p>越来越多的浏览器都开始支持 HTTP/2。这可能听起来没有必要,但是 HTTP/2 为同一服务器的并发连接问题带来了很多好处。换句话说,如果有很多小型资源需要加载(如果你打包过的话就没有必要了),在延迟和性能方面 HTTP/2 秒杀 HTTP/1。试试 <a href="https://link.segmentfault.com/?enc=QKqL%2FzMrGh%2BZZTdfMOLA7A%3D%3D.7SmpB%2FDauI6CGs4PU3pfe6alJJ%2FB%2Fh%2FBF5K6a9S55z4%3D" rel="nofollow">Akamai 的 HTTP/2 demo</a>,可以在最新的浏览器中看到区别。<img src="/img/remote/1460000005798309" alt="" title=""></p>
<h2>6. 应用性能分析</h2>
<p>性能分析是优化任何应用程序时的重要一步。就像介绍中所提到的那样,盲目尝试优化应用经常会导致效率的浪费,微不足道的收益和更差的可维护性。执行性能分析是识别你的应用问题所在的一个重要步骤。</p>
<p>对于 Web 应用来说,延迟时间是最大的抱怨之一,所以你需要确保数据的加载和显示都尽可能得快。Chrome 提供了非常棒的性能分析工具。特别是 Chrome Dev Tools 中的时间线和网络视图都对于定位延迟问题有着很大的帮助:<img src="/img/remote/1460000005798311" alt="" title=""></p>
<p>时间线视图可以帮忙找到运行时间较长的操作。<img src="/img/remote/1460000005798313" alt="" title=""></p>
<p>网络视图可以帮助识别出额外的由缓慢请求导致的延迟或对于某一端点的串行访问。</p>
<p>正确分析的话,内存则是另一块可能获得收益的部分。如果你正在运行着一个拥有很多虚拟元素的页面(庞大的动态表格)或者可交互式的元素(比如游戏),内存优化可以获得更少的卡顿和更高的帧率。从我们最近的文章 <a href="https://link.segmentfault.com/?enc=abV8BEG1JOlU%2FAKmrbrQZg%3D%3D.GZfxbrWqyCBm18flNbxaO29jihF7Oo%2BTxOjIdCfQF3XFrSK9cHJ9Aqpzc%2Fn8UMibUg5h6g%2BX0sVh6506BbRJAeJeCBuY3aw%2Bwe5hFcurBpAXmbYDTexYtMYwnclOvLakCb0KYwWZe17NoBzreNRGSA%3D%3D" rel="nofollow">4 Types of Memory Leaks in JavaScript and How to Get Rid Of Them</a> 中,对于如何使用 Chrome 的开发工具有着进一步的深度理解。</p>
<p>CPU 性能分析也可以在 Chrome Dev Tools 中找到。看看这篇来自 Google 官方文档中的文章 <a href="https://link.segmentfault.com/?enc=FhYFzg7S95NZj0%2FrZNAEbw%3D%3D.dAUPs4O7nWRvfpsh3pg4%2FP%2BDqtVqXqZ6XihEf0HS4y2%2F4C7lj7juZw%2B3XoclpPqqzmkX3yx65wohNibvj7tsIQ%3D%3D" rel="nofollow">Profiling JavaScript Performance</a>。<img src="/img/remote/1460000005798315" alt="" title=""></p>
<p>找到性能损耗的中心可以让你有效率地达到优化的目标。</p>
<p>对后端的性能分析会更加困难。通常情况下,确认一个耗费较多时间的请求可以让你明确应该优先分析哪一个服务。对于后端的分析工具来说,则取决于所构建的技术栈。</p>
<h3>一个关于算法的注意事项</h3>
<p>在大多数情况下,选择一个更优的算法,比围绕着小成本中心所实现的具体优化策略能够获得更大的收益。在某种程度上,CPU 和内存分析应该可以帮你找到大的性能瓶颈。当这些瓶颈跟编码问题并不相关时,则是时候考虑考虑不同的算法了。</p>
<h2>7. 使用负载均衡方案</h2>
<p>我们在之前讨论缓存的时候简要提到了内容分发网络(CDNs)。把负载分配到不同的服务器(甚至于不同的地理区域)可以给你的用户提供更好的延迟时间,但是这条路还很漫长,特别是在处理很多的并发连接的时候。</p>
<p>负载均衡就跟使用某个 round-robin(循环)解决方案一样简单,可以基于一个 <a href="https://link.segmentfault.com/?enc=63NZxrFlrKW3pJadoZk4Rw%3D%3D.xIqKgf2IP9KL6%2FBfaSlUtof9UF43BCAPzaptz6c7SR42WP2CGwzTvpuKldKjM6V6gSeT77Ki%2BOt4g7rdn1ZgFQ%3D%3D" rel="nofollow">nginx 反向代理</a> ,或者基于一个成熟的分布式网络,比如 <a href="https://link.segmentfault.com/?enc=7B2IOZc96SD4n4mp819Ltg%3D%3D.76aKT3K0XwLCkiOTjTkONYtlsWgF%2BrqzIwoaXC8FIgU%3D" rel="nofollow">Cloudflare</a> 或者 <a href="https://link.segmentfault.com/?enc=XJ50gDcvG4M52lZOFUXrNw%3D%3D.8JCumLtE83hn6zIWk6%2FGvUscWw8%2BDfkkAUFfWIQ6uULz7b4mxDwyBcWkCWqSjuuV" rel="nofollow">Amazon CloudFront</a>。<img src="/img/remote/1460000005798317" alt="" title=""></p>
<blockquote><p>以上的图来自于 <a href="https://link.segmentfault.com/?enc=%2FIzMFNq%2BIjgbXLFsjLUuQw%3D%3D.34uxikwpYOwsEvdBSA0xrdRQXVLnFOmAqT1XU6QSIAq%2Fs33yamOFXqeJ%2FtO6IW42DKXsTDkTY2vus48gUwlQRNcbRofkoutFgjjFVw%2FPzy2wexQojKIAryeMUl3Set8sSXgJe77PaVJsN4D2OlCsLSvnH6vetSJR%2B02Z4%2F6lZ34%3D" rel="nofollow">Citrix</a>。 为了使负载均衡真正有效,动态内容和静态内容都应该被拆分成易于并发访问的。换句话说,元素的串形访问会削弱负载均衡器以最佳形式进行分流的能力。与此同时,对于资源的并发访问可以改善启动时间。</p></blockquote>
<p>虽然负载均衡可能会很复杂。对最终一致性算法不友好的数据模型,或者缓存都会让事情更加困难。幸运的是,大多数应用对于已简化的数据集都只需要保证高层次的一致性即可。如果你的应用程序没有这样设计的话,就有必要重构一下了。</p>
<h2>8. 为了更快的启动时间考虑一下同构 JavaScript</h2>
<p>改善 Web 应用程序观感的方式之一,就是减少启动时间或者减少首页渲染时间。这对于新兴的单页面应用尤为重要,其需要在客户端执行大量任务。在客户端做更多事情通常就意味着,在第一次渲染被执行之前就需要下载更多的信息。同构 JavaScript 可以解决这个问题:自从 JavaScript 可以同时运行在客户端和服务器端,这就让在服务器端来执行页面的首次渲染成为可能,先把已渲染的页面发送出去然后再由客户端的脚本接管。这限制了所使用的后端(必须使用支持该特性的 JavaScript 框架),但却能获得更好的用户体验。举例来说,React 就很<a href="https://link.segmentfault.com/?enc=dx9JR4YLe3Vp%2BbFEVCxMZA%3D%3D.VQ6kc999j5NGkQ6B8Mf%2FZME3QULBOtHs22E79fiH6zJRTYq2vWLXZX0qwCSnyuqrjWKSgNQA3OMq8Slw25FG8w%3D%3D" rel="nofollow">适合于</a>做这个,就像以下代码所示:</p>
<pre><code class="js">var React = require('react/addons');
var ReactApp = React.createFactory(require('../components/ReactApp').ReactApp);
module.exports = function(app) {
app.get('/', function(req, res){
// React.renderToString takes your component
// and generates the markup
var reactHtml = React.renderToString(ReactApp({}));
// Output html rendered by react
// console.log(myAppHtml);
res.render('index.ejs', {reactOutput: reactHtml});
});
};</code></pre>
<p><a href="https://link.segmentfault.com/?enc=XEvp6LJ%2FCDAYZyNnAUKn5g%3D%3D.NAJZUrNAd9lPlWDvJcu9Bs66Qr6nF88vovp4y6JtL0c%3D" rel="nofollow">Meteor.js</a> 对于客户端和服务器端的 JavaScript 混用有着非常棒的支持。</p>
<pre><code class="js">if (Meteor.isClient) {
Template.hello.greeting = function () {
return "Welcome to myapp.";
};
Template.hello.events({
'click input': function () {
// template data, if any, is available in 'this'
if (typeof console !== 'undefined')
console.log("You pressed the button");
}
});
}
if (Meteor.isServer) {
Meteor.startup(function () {
// code to run on server at startup
});
}</code></pre>
<p>但是,为了支持服务器端渲染,需要像 <a href="https://link.segmentfault.com/?enc=K7%2BA8MnUSpY3aBRU21Ndsw%3D%3D.DapJbW6BAg3SINEHWnPQiA%2BqT05BbRUarJJgPEQ4CZIvdRcCcNnB2on8fVlMMuDr" rel="nofollow">meteor-ssr</a> 这样的插件。</p>
<blockquote><p>谢谢 gabrielpoca 在评论中指出这一点。如果你有复杂的或者中等大小的应用需要支持同构部署,试试这个,你可能会感到惊讶的。</p></blockquote>
<h2>9. 使用索引加速数据库查询</h2>
<p>如果你需要解决数据库查询耗费大量时间的问题(分析你的应用看看是否是这种情况!),是时候找出加速数据库的方法了。每个数据库和数据模型都有自己的权衡。数据库优化在每一方面都是一个主题:数据模型,数据库类型,具体实现方案,等等。提速可能不是那么的简单。但是这儿有个建议,可能可以对某些数据库有所帮助:<a href="https://link.segmentfault.com/?enc=cO%2BTx9w9SpoOTo3MiLf%2Fig%3D%3D.8e5pnVi5uAtgaxpO6PlXKdPYkN7fHyD64%2BHRLsvOTS20vHr8%2FsOCCIuIf0iHGt6e" rel="nofollow">索引</a>。索引是一个过程,即数据库所创建的快速访问数据结构,从内部映射到键(在关系数据库中的列),可以提高检索相关数据的速度。大多数现代数据库都支持索引。索引并不是文档型数据库(比如 <a href="https://link.segmentfault.com/?enc=tDwXBnZ9ckcLmng7%2FnLFwA%3D%3D.ANg%2Bf4E8W7PAxoyz6y4gkuG9grVuudluNriwu7mBKiPbtHZDWqm4fG9ryEADaINw" rel="nofollow">MongoDB</a>)所独有的,也包括关系型数据库(比如<a href="https://link.segmentfault.com/?enc=20W1YDNQLRUF8omska%2Fwug%3D%3D.5xMcJsK%2Bk48f1TJ6GfPeJfNxwpD7n4S1Uizn9MsWj3NZf3FBBA5CHVC1MsgYt%2FRjX1f2izz9fHgHmK%2Fda3%2BExw%3D%3D" rel="nofollow">PostgreSQL</a>)。</p>
<p>为了使用索引来优化你的查询,你将需要研究一下应用程序的访问模式:什么是最常见的查询,在哪个键或列中执行搜索,等等。</p>
<h2>10. 使用更快的转译方案</h2>
<p>JavaScript 软件技术栈一如既往的复杂。而改善语言本身的需求则又增加了复杂度。不幸地是,JavaScript 作为目标平台又会被用户的运行时所限制。尽管很多改进已经以 ECMAScript 2015(2016正在进行)的形式实现了,但是通常情况下,对客户端代码来说又不可能依赖于这个版本。这种趋势促使了一系列的_转译器_:用于处理 ECMAScript 2015 代码的工具和只使用 ECMAScript 5 结构实现其中所缺失的特性。与此同时,模块绑定和压缩处理也已经被集成到这个生产过程中,被称为_为发布而构建_的代码版本。这些工具可以转化代码,并且能够以有限的方式影响到最终代码的性能。Google 开发者 Paul Irish <a href="https://link.segmentfault.com/?enc=oHTP5QTkfOuvBusXOS3Kuw%3D%3D.2%2BMfizMW7wU%2F%2BiRXKKoIP%2BPvv7k6Ye9r3PYMiDWt96hThjkWToAzO89lQe%2BIFQDaxceO9KZJBh1Aj156%2BCHxzhJMCefuH2DcqB5IpEE8WY4%3D" rel="nofollow">花了一些时间</a>来寻找这些转译方案会如何影响性能和最终代码的大小。尽管大多数情况下收益会很小,但也值得在正式采用某个工具栈之前看看这些数据。对于大型应用程序来说,这种区别可能会影响重大。</p>
<h2>11. 避免或最小化 JavaScript 和 CSS 的使用而阻塞渲染</h2>
<p>JavaScript 和 CSS 资源都会阻塞页面的渲染。通过采取某些的规则,你可以保证你的脚本和 CSS 被尽可能快速地处理,以便于浏览器能够显示你的网站内容。</p>
<p>在 CSS 的情况下这是非常重要的,所有的 CSS 规则都不能与特定媒体直接相关,规则只用于处理你准备在页面上所显示内容的优先级。这可以通过使用 <a href="https://link.segmentfault.com/?enc=sYBd99t%2B40zOzNJo7bPxRg%3D%3D.WtKCAmIlaADILSc9SuSDn5yPRKW32BhJODuKT2yqvQMMvBMAOgI9Hgb4skXk%2BZb1UQaNgtrnkVYNXwrrWF0bpghzFGudarZBup31TQI8kaY8yz8KMmBfkBDWY60PQf2c" rel="nofollow">CSS 媒体查询</a>来实现。媒体查询告诉浏览器,哪些 CSS 样式表应用在某个特定的显示媒体上。举个例子,用于打印的某些规则可以被赋予比用于屏幕显示更低的优先级。</p>
<p>媒体查询可以被设置成 <link> 标签属性:</p>
<pre><code class="html"><link rel="stylesheet" type="text/css" media="only screen and (max-device-width: 480px)" href="mobile-device.css" /></code></pre>
<p>轮到 JavaScript 了,关键就在于遵循某些用于内联 JavaScript 的规则(比如内联在 HTML 文件当中的代码)。内联 JavaScript 应该尽可能短,并将其放在不会阻塞页面剩余部分解析的地方。换句话说,被放在 HTML 树中间的内联 JavaScript 将会在这个地方阻塞解析器,并强制其等待直到脚本被执行完毕。如果在 HTML 文件中随意放了一些大的代码块或者很多小的代码块,对于性能来说这会成为性能杀手。内联可以有效减少额外对于某些特定脚本的网络请求。但是对于重复使用的脚本或者大的代码块来说,这个好处就可以忽略不计了。</p>
<p>防止 JavaScript 阻塞解析器和渲染器的一种方法就是将 <script> 标签标记为_异步的_。这限制了我们对于 DOM 的访问但是可以让浏览器不管脚本的执行状态而继续解析和渲染页面。换句话说,为了获得最佳的启动时间,确保那些对于渲染不重要的脚本已经通过异步属性的方式标记成异步的了。</p>
<pre><code class="html"><script src="async.js" async></script></code></pre>
<h2>12. 用于未来的一个建议:使用 service workers + 流</h2>
<p><a href="https://link.segmentfault.com/?enc=RRIXFtGdf9BcRNRKcxq0nw%3D%3D.PsHZVOEjHiog2pik0fZlFF%2BFZt3O8qP7NhKRB3LNvk0UHilueUrg9IHNNxT0%2BmyfXQzN4iVrSzkLm7csdPmosQ%3D%3D" rel="nofollow">Jake Archibald</a> 最近的一篇博文详细描述了一种有趣的技术,可以用于加速渲染时间:将 service workers 和流结合起来。结果非常令人叹服:</p>
<p>不幸的是这个技术所需要的 APIs 都还不稳定,这也是为什么这是一种有趣的概念但现在还没有真正被应用的原因。这个想法的主旨就是在网站和客户端之间放置一个 service worker。这个 service worker 可以在获取缺失信息的同时缓存某些数据(比如 header 和一些不会经常改变的东西)。缺失的内容就可以尽可能快速地流向被渲染的页面。</p>
<p><a href="https://link.segmentfault.com/?enc=q1RpepYebs2a1GB9V5pI%2BA%3D%3D.a%2F04%2BjO4OHTnzPm49%2BG1HTEEzvlJPY6xxysD1hTGskq%2FQ4bytIckhEWsuEkAC0WB" rel="nofollow">https://www.youtube.com/watch?v=Cjo9iq8k-bc</a></p>
<h2>13. 更新:图片编码优化</h2>
<p>我们的<a href="https://link.segmentfault.com/?enc=j6QfwS2UW%2B631UeEBRjF4A%3D%3D.R4jZ15TWSCjYg4VpNxMVV9vuCp5ocaQIuh1jG9AhUYu1Y05Z%2BqA4tLFjroQdCSd2DEW%2BAUzQLjaj9wNNuCntuQ%3D%3D" rel="nofollow">一个读者</a>指出了一个非常重要的遗漏:图片编码优化。PNGs 和 JPGs 在 Web 发布时都会使用次优的设置进行编码。通过改变编码器和它的设置,对于需要大量图片的网站来说可以获得有效的改善。流行的解决方案包括 <a href="https://link.segmentfault.com/?enc=fpUR1Dvjizk9wz4RSN9h%2FQ%3D%3D.vMoHSu8yL5wyB2IPGWT9%2BCyu9v166mZY5tQ0vhmQwn8%3D" rel="nofollow">OptiPNG</a> 和<a href="https://link.segmentfault.com/?enc=nrDQHcP3ECdlJ23Y67cJEg%3D%3D.uB10TvF6UdIsCcworyzlEBFZ7AJLOjKqNbROZnUulM0%3D" rel="nofollow">jpegtran</a>。</p>
<p><a href="https://link.segmentfault.com/?enc=Ja3yQlhrHrYz%2FShKZIt7Mw%3D%3D.xQ%2B8tKSk51u27S1RF6ielASgV%2BcA8sFoePYwBRvCqnejCGdl2VRn%2FRJp2p1mQp6o979k2%2FO%2FajW%2FmLOBoxVkng%3D%3D" rel="nofollow">A guide to PNG optimization</a> 详细描述了 OptiPNG 可以如何用于优化 PNGs。</p>
<p><a href="https://link.segmentfault.com/?enc=LWkIb58q%2B7xl9USPZh4Z7w%3D%3D.Cvnx%2BubLrV7pQpRT67r%2FNrruYmRxD6tc%2FpxO24jfU%2BA8poaYv60YGLMdjBigpQ0x" rel="nofollow">The man page for jpegtran</a> 对它的一些特性提供了很好的介绍。</p>
<p>如果你发现这些指南相对于你的要求来说都太复杂了的话,这儿有一些在线网站可以提供优化服务。也有一些像 <a href="https://link.segmentfault.com/?enc=e%2Fum8dC8HFpjbdV7N%2F6xjQ%3D%3D.gFUHxJ9Bhqp8oJfIKwcqwmauGIPzBgAelvabdFBO9Fs%3D" rel="nofollow">RIOT</a> 一样的图形化界面,非常有助于批量操作和结果检查。</p>
<h2>扩展阅读</h2>
<p>你可以在下面的链接中阅读更多信息,以及找到有助于优化网站的工具:</p>
<ul>
<li><p><a href="https://link.segmentfault.com/?enc=KgPguTi%2BeMtjPoMxNu0mDQ%3D%3D.IZFUQD%2F3rRHYKWjlT5k%2BbDZdkZkVY%2Bh2uuzMbGoHbHyiufilhBr3llBdSY5j9LvZ83uPsdaXkNS9ieLBUlvEeyqsW4Kp8KRl8Sb%2BkXe0aTQ%3D" rel="nofollow">Best Practices for Speeding up Your Website - Yahoo Developer Network</a></p></li>
<li><p><a href="https://link.segmentfault.com/?enc=kldbjFYkmIIxRB4EOzzu%2FA%3D%3D.QDIFgxIEyTUJkfKXSfiNiEVzbdwFZ4eeIIrPvOk%2B%2FQo%3D" rel="nofollow">YSlow - a tool that checks for Yahoo's recommended optimizations</a></p></li>
<li><p><a href="https://link.segmentfault.com/?enc=HN0yOGZeoYRCy4kL8xMMKQ%3D%3D.lyBJ5dJHZuPDxwHucx%2Bf1pJH9Ps0RomnAqBktyMyI1Q5se4X3amxYuT0G9uA1qMqFp4CeVpfIF3XIQMMJrgkWA%3D%3D" rel="nofollow">PageSpeed Insights - Google Developers</a></p></li>
<li><p><a href="https://link.segmentfault.com/?enc=1IXTirW5LazsYz1vdNyTWQ%3D%3D.soJRuckf8jrmq1Qjf7zg2OGsGzDBvo0JM1LkJO1X2AVLpdD6EVjW%2BgALCj1hGX1g" rel="nofollow">PageSpeed Tools - Google Developers</a></p></li>
<li><p><a href="https://link.segmentfault.com/?enc=DYYZCcWYJjJTIKXnzIbpaA%3D%3D.YNpeSiGypCYCWmx1s8H1o2XezflZjDc3mnT6wW30iHOXfRqKePjxzplX4Q4%2BBNCa6jSvY8vqVWjoTaC89h%2B3GjZ%2B8I1nUzuvjE9YqUgrSp25y46SqRQfZUC%2FlT0NkFJ3" rel="nofollow">HTTP/2: The Long-Awaited Sequel</a></p></li>
</ul>
<h2>悄悄话:Auth0 中常见的优化</h2>
<p>我们是一个 Web 公司。就以这种身份来说,我们为我们的基础设施的某些部分部署了一些特定的优化。举例来说,在登录页面你可以发现,在我们域名的 /learn 路径下(比如,<a href="https://link.segmentfault.com/?enc=TP89ySUU3wv0xjfI9lB0ew%3D%3D.YzDTerqRcyufO%2BffK54GXz014%2F6cM7V0w0ThEH3aWzWLi%2BW435RAW566FwDerFHjT2FYmHZOZopx3IzRopOhzA%3D%3D" rel="nofollow">登录页面的单点登录</a>),我们采用了一种特别的优化:为了方便我们使用 CMS 来创建每篇文章。因为文章都没有中心索引,但是为了能够被搜索引擎发现,使用了 <a href="https://link.segmentfault.com/?enc=Hs37eQ1KD3rk2wJNFa3Iog%3D%3D.epcrMIxGjsHQ3vJV8rYQEgda7YS6Q5sLOx0R1Rbpatk%3D" rel="nofollow">webtask</a> 的爬虫来预渲染每个页面并生成了一个静态版本然后上传到我们 CDN。这减少了我们在服务器端上的压力,因为无须为每个访客都生成动态的服务器端内容。与此同时还改善了延迟(并且隔离了我们发现与 CMS 相关的安全问题)。</p>
<p>对于<a href="https://link.segmentfault.com/?enc=UhzN0%2FBQrgbcK5E5MrgLfQ%3D%3D.v2bzVj1P9f9nCp3RXKt1lsvMd4d60SSd2pJxDOv5XW8%3D" rel="nofollow">文档部分</a>,我们正在使用_同构 JavaScript_,这让我们获得了非常棒的启动时间,并且使我们的后端和前端团队能够轻松集成。</p>
<h2>结论</h2>
<p>由于应用程序变得越来越大和越来越复杂,性能优化对于 Web 开发来说正在变得越来越重要。在做出任何值得的时间和潜在的未来成本的优化尝试时,有针对性的改进都是必不可少的。Web 应用程序早已突破了大多数静态内容的边界,学习常见模式进行优化则是令人愉悦的应用和完全不可用的应用之间最大的区别(这是让你的访客留下来的长远之计!)。没有什么规则是绝对的,但是:性能分析和研究特定软件技术栈的错综复杂之处,是找出如何优化它的唯一方式。你曾经发现过对你的应用产生巨大影响的其他建议吗?请留言让我们知道。Hack on!</p>
<hr>
<p>欢迎关注<a href="https://link.segmentfault.com/?enc=LOsQ42qM6UKm4bR%2F9xUCIw%3D%3D.7kWh16YWk84BehELjrsAlcPQCII%2F2yDAG%2FSWloBKCo68ar0VyIqzG1GpheusamVC" rel="nofollow">知乎专栏 —— 前端的逆袭</a><br>欢迎关注我的<a href="https://link.segmentfault.com/?enc=BiSGWImHbqIPTpHar0Z4zQ%3D%3D.bAAY4yG1IVoBJedTpDv98xr8CC%2BSyVCHqig6fRUztU8%3D" rel="nofollow">博客</a>,<a href="https://link.segmentfault.com/?enc=ow7SFkBYwa5h3urwSHhGpQ%3D%3D.%2F%2FG7U6c%2Fg0%2F6gKI902%2F5eKH6kJ8%2BcN9Ucf0UCMeYxN81ZOXmlFrm3kdF4MMTuT%2FP" rel="nofollow">知乎</a>,<a href="https://link.segmentfault.com/?enc=ud%2BzwgzJR5XZ8d1%2FfxlQ5w%3D%3D.vmBDNAvSw2hKfvYNVebUysci5QOi6sVdMxh0%2BWeLPjo%3D" rel="nofollow">GitHub</a>。</p>