前端优化

前端性能优化

首先是推荐几本前端性能优化方面的图书。

  • Web Performance in Action ,这本书目前国内没有卖的。可以看电子版本,是一本很不错的书,其中有 CSS、图片、字体、JavaScript 性能调优等。

  • Designing for Performance ,这本在线的电子书很不错,其中讲了很多网页优化的技术和相关的工具,可以让你对整体网页性能优化有所了解。

  • High Performance JavaScript ,这本书在国内可以买到,能让你了解如何提升各方面的性能,包括代码的加载、运行、DOM 交互、页面生存周期等。雅虎的前端工程师尼古拉斯·扎卡斯(Nicholas C. Zakas)和其他五位 JavaScript 专家介绍了页面代码加载的最佳方法和编程技巧,来帮助你编写更为高效和快速的代码。你还会了解到构建和部署文件到生产环境的最佳实践,以及有助于定位线上问题的工具。

  • High Performance Web Sites: Essential Knowledge for Front-End Engineers ,这本书国内也有卖,翻译版为《高性能网站建设指南:前端工程师技能精髓》。作者给出了 14 条具体的优化原则,每一条原则都配以范例佐证,并提供了在线支持。

    全书内容丰富,主要包括减少 HTTP 请求、Edge Computing 技术、Expires Header 技术、gzip 组件、CSS 和 JavaScript 最佳实践、主页内联、Domain 最小化、JavaScript 优化、避免重定向的技巧、删除重复 JavaScript 的技巧、关闭 ETags 的技巧、Ajax 缓存技术和最小化技术等。

  • 除了上面这几本书之外,Google 的 Web Fundamentals 里的 Performance 这一章节也有很多非常不错的知识和经验。

接下来是一些最佳实践性的文档。

接下来,重点推荐一个性能优化的案例学习网站 WPO Stats 。WPO 是 Web Performance Optimization 的缩写,这个网站上有很多很不错的性能优化的案例分享,一定可以帮助你很多。

然后是一些文章和案例。

接下来是一些性能工具。在线性能测试分析工具太多,这里只推荐比较权威的。

  • PageSpeed ,谷歌有一组 PageSpeed 工具来帮助你分析和优化网站的性能。Google 出品的,质量相当有保证。
  • YSlow ,雅虎的一个网页分析工具。
  • GTmetrix ,是一个将 PageSpeed 和 YSlow 合并起来的一个网页分析工具,并且加上一些 Page load 或是其它的一些分析。也是一个很不错的分析工具。
  • Awesome WPO ,在 GitHub 上的这个 Awesome 中,你可以找到更多的性能优化工具和资源。

另外,中国的网络有各种问题(你懂的),所以,你不能使用 Google 共享的 JavaScript 链接来提速,你得用中国自己的。你可以到这里看看中国的共享库资源,Forget Google and Use These Hosted JavaScript Libraries in China

前端框架

接下来,要学习的是 Web 前端的几大框架。目前而言,前端社区有三大框架 Angular.js、React.js 和 Vue.js。React 和 Vue 更为强劲一些,所以,这里只写和 React 和 Vue 相关的攻略。关于两者的比较,网上有好多文章。这里推荐几篇供你参考。

其实,比较这些框架的优缺点还有利弊并不是要比出个输赢,而是让你了解一下不同框架的优缺点。这些框架都是可以学习的。而在我们生活工作中具体要用哪个框架,最好还是要有一些出发点,比如,你是为了找份好的工作,为了快速地搭一个网站,为了改造一个大规模的前端系统,还是纯粹地为了学习……

不同的目的会导致不同的决定。并不希望上述的这些比较会让你进入 “ 二选一 “ 或是 “ 三选一 “ 的境地。只是想通过这些文章让你知道这些框架的设计思路和实现原理,这些才是让你受益一辈子的事。

React.js 框架

下面先来学习一下 React.js 框架。

入门

React 学起来并不复杂,就看 React 官方教程 和其文档就好了( React 的中文教程 )。

然后,下面的文章会带你了解一下 React.js 的基本原理。

提高

学习一个技术最重要的是要学到其中的思想和方法。下面是一些学习 React 中最重要的东西。

还有一些不错的实践和经验。

资源列表

最后就是 React 的资源列表。

  • Awesome React ,这是一些 React 相关资源的列表,很大很全。
  • React/Redux Links ,这也是 React 相关的资源列表,与上面不一样的是,这个列表主要收集了大量的文章,其中讲述了很多 React 知识和技术,比上面的列表好很多。
  • React Rocks ,这个网站主要收集各种 React 的组件示例,可以让你大开眼界。

Vue.js 框架

Vue 可能是一个更符合前端工程师习惯的框架。不像 React.js 那样使用函数式编程方式,是后端程序员的思路。

最令人高兴的是,Vue 的作者是尤雨溪(Evan You),最近一次对他的采访 “Vue on 2018 - Interview with Evan You” 当中有很多故事以及对 Vue 的展望。(注意:Vue 是完全由其支持者和用户资助的,这意味着它更接近社区而不受大公司的控制。

要学习 Vue 并不难,上官网看文档( Vue 官方文档中文版)),照着搞一搞就可以很快上手了。Vue.js screencasts 是一个很不错的英文视频教程。

另外,推荐 新手向:Vue 2.0 的建议学习顺序 ,这是 Vue 作者写的,所以有特殊意义。

Vue 的确比较简单,有 Web 开发经验的人上手也比较快,所以这里也不会像 React 那样给出很多的资料。下面是一些还不错的内容,推荐给你。

当然,最后一定还有 Awesome Vue ,Vue.js 里最为巨大最为优秀的资源列表。

  • Copyrights © 2020-2022 Henry
  • Visitors: | Views:

请我喝杯咖啡吧~

支付宝
微信