Skip to main content

19 前端性能优化和框架

前端性能优化​

书籍推荐​

  • Web Performance in Action ，CSS、图片、字体、JavaScript 性能调优等。
  • Designing for Performance ，网页优化的技术和相关的工具，对整体网页性能优化有所了解。
  • High Performance JavaScript ，了解如何提升各方面的性能，包括代码的加载、运行、DOM 交互、页面生存周期等。介绍了页面代码加载的最佳方法和编程技巧，帮助编写更为高效和快速的代码。还可以解到构建和部署文件到生产环境的最佳实践，以及有助于定位线上问题的工具。
  • High Performance Web Sites: Essential Knowledge for Front-End Engineers ，给出了 14 条具体的优化原则，每一条原则都配以范例佐证，并提供了在线支持。主要包括减少 HTTP 请求、Edge Computing 技术、Expires Header 技术、gzip 组件、CSS 和 JavaScript 最佳实践、主页内联、Domain 最小化、JavaScript 优化、避免重定向的技巧、删除重复 JavaScript 的技巧、关闭 ETags 的技巧、Ajax 缓存技术和最小化技术等。
  • Web Fundamentals 里的 Performance 一章，有很多非常不错的知识和经验。

最佳实践​

  • Browser Diet ，前端权威性能指南。
  • PageSpeed Insights Rules ，性能指南和最佳实践。
  • Best Practices for Speeding Up Your Web Site ，最佳实践文档。

WPO Stats，性能优化的案例学习网站

文章和案例​

  • A Simple Performance Comparison of HTTPS, SPDY and HTTP/2 ，比较浏览器的 HTTPS、SPDY 和 HTTP/2 等性能。
  • 7 Tips for Faster HTTP/2 Performance ，对于 HTTP/2 给出的 7 个增加其性能的小提示。
  • Reducing Slack’s memory footprint ，减少内存使用量的实践。
  • Pinterest: Driving user growth with performance improvements ，关于性能调优的一些分享。
  • 10 JavaScript Performance Boosting Tips ，10 个提高 JavaScript 运行效率的小提示。
  • 17 Statistics to Sell Web Performance Optimization ，Web 性能优化的工程分享。
  • Getting started with the Picture Element ，讲述了 Responsive 布局所带来的一些负面的问题，主要是图像适配的问题。
  • Improve Page Load Times With DNS Prefetching ，如何降低 DNS 解析时间的小技术——DNS prefetching。
  • Jank Busting for Better Rendering Performance ，前端动画渲染性能提升。
  • JavaScript Memory Profiling ，如何使用 Chrome 的开发工具来分析 JavaScript 内存问题。

性能工具​

  • PageSpeed ，谷歌有一组 PageSpeed 工具帮助分析和优化网站的性能。
  • YSlow ，雅虎的一个网页分析工具。
  • GTmetrix ，将 PageSpeed 和 YSlow 合并起来的一个网页分析工具，并且加上一些 Page load 或是其它的一些分析。
  • Awesome WPO ，性能优化工具和资源。
  • Forget Google and Use These Hosted JavaScript Libraries in China，国内的共享库资源。

前端框架​

框架对比​

  • Angular vs. React vs. Vue: A 2017 comparison
  • React or Vue: Which JavaScript UI Library Should You Be Using?
  • ReactJS vs Angular5 vs Vue.js - What to choose in 2018?

React.js 框架​

入门​

  • React 官方教程
  • React.js 的基本原理
    • All the fundamental React.js concepts ，React.js 的基本原理。
    • Learn React Fundamentals and Advanced Patterns ，学习 React 的一个很不错的地方。
    • Thinking in React，引导完成使用 React 构建可搜索产品数据表的思考过程。

提高​

学习其中的思想和方法。

  • 状态
    • Common React.js mistakes: Unneeded state ，React.js 编程的常见错误——不必要的状态。
    • State is an Anti-Pattern ，关于如何做一个不错的组件的思考。
    • Why Local Component State is a Trap ，一些关于 “Single state tree” 的想法。
    • Thinking Statefully ，几个很不错的例子，对声明式有状态的技术有更好的理解。
    • "State Architecture Patterns in React " 系列文章
      • Part 1: A Review
      • Part 2: The Top-Heavy Architecture, Flux and Performance
      • Part 3: Articulation Points, zine and An Overall Strategy
      • Part 4: Purity, Flux-duality and Dataflow
  • 函数式编程
    • 《Professor Frisby’s Mostly Adequate Guide to Functional Programming》，JavaScript 函数式编程的东西
    • Master the JavaScript Interview: What is Functional Programming?
    • The Rise and Fall and Rise of Functional Programming (Composing Software)
    • Functional UI and Components as Higher Order Functions
    • Functional JavaScript: Reverse-Engineering the Hype
    • Some Thoughts on Function Components in React
  • 设计相关
    • React Pattern，学习 React 模式
    • React Higher Order Components in depth
    • Presentational and Container Components
    • Controlled and uncontrolled form inputs in React don’t have to be complicated
    • Function as Child Components
    • Writing Scalable React Apps with the Component Folder Pattern
    • Reusable Web Application Strategies
    • Characteristics of an Ideal React Architecture
  • 实践和经验
    • 9 things every React.js beginner should know
    • Best practices for building large React applications
    • Clean Code vs. Dirty Code: React Best Practices
    • How to become a more productive React Developer
    • 8 Key React Component Decisions

资源列表​

  • Awesome React ，React 相关资源的列表。
  • React/Redux Links ，React 相关的资源列表，该列表主要收集了大量的文章，其中讲述了很多 React 知识和技术，比上面的列表好很多。
  • React Rocks ，React 的组件示例。

Vue.js 框架​

  • Why 43% of Front-End Developers want to learn Vue.js” ，编程方式和 React 的区别。
  • Replacing jQuery With Vue.js: No Build Step Necessary ，从 jQuery 可以平滑过渡到 Vue 。
  • “10 things I love about Vue” ，了解 Vue 的一些比较优秀的特性。
  • Vue 官方文档。
  • Vue.js screencasts，的英文视频教程。
  • 新手向：Vue 2.0 的建议学习顺序。
  • How not to Vue ，了解 Vue 的短板。
  • Vue.js Component Communication Patterns
  • 4 AJAX Patterns For Vue.js Apps
  • How To (Safely) Use A jQuery Plugin With Vue.js
  • 7 Ways To Define A Component Template in Vue.js
  • Use Any Javascript Library With Vue.js
  • Dynamic and async components made easy with Vue.js
  • Awesome Vue ，Vue.js 的资源列表。