xinyin025/learn.lianglianglee.com
1
0
Fork 0
mirror of https://github.com/zhwei820/learn.lianglianglee.com.git synced 2025-09-30 23:26:43 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity
48163c6373
learn.lianglianglee.com/专栏/左耳听风/088 程序员练级攻略（2018）：前端性能优化和框架.md.html
周伟 48163c6373 y
2022-05-11 18:52:13 +08:00

1941 lines
51 KiB
HTML
Raw Blame History

This file contains invisible Unicode characters

This file contains invisible Unicode characters that are indistinguishable to humans but may be processed differently by a computer. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!DOCTYPE html>
<!-- saved from url=(0046)https://kaiiiz.github.io/hexo-theme-book-demo/ -->
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=no">
<link rel="icon" href="/static/favicon.png">
<title>088 程序员练级攻略（2018）：前端性能优化和框架.md.html</title>
<!-- Spectre.css framework -->
<link rel="stylesheet" href="/static/index.css">
<!-- theme css & js -->
<meta name="generator" content="Hexo 4.2.0">
</head>
<body>
<div class="book-container">
<div class="book-sidebar">
<div class="book-brand">
<a href="/">
<img src="/static/favicon.png">
<span>技术文章摘抄</span>
</a>
</div>
<div class="book-menu uncollapsible">
<ul class="uncollapsible">
<li><a href="/" class="current-tab">首页</a></li>
</ul>
<ul class="uncollapsible">
<li><a href="../">上一级</a></li>
</ul>
<ul class="uncollapsible">
<li>
<a href="/专栏/左耳听风/000 开篇词 洞悉技术的本质，享受科技的乐趣.md">000 开篇词 洞悉技术的本质，享受科技的乐趣.md.html</a>
</li>
<li>
<a href="/专栏/左耳听风/001 程序员如何用技术变现（上）.md">001 程序员如何用技术变现（上）.md.html</a>
</li>
<li>
<a href="/专栏/左耳听风/002 程序员如何用技术变现（下）.md">002 程序员如何用技术变现（下）.md.html</a>
</li>
<li>
<a href="/专栏/左耳听风/003 Equifax信息泄露始末.md">003 Equifax信息泄露始末.md.html</a>
</li>
<li>
<a href="/专栏/左耳听风/004 从Equifax信息泄露看数据安全.md">004 从Equifax信息泄露看数据安全.md.html</a>
</li>
<li>
<a href="/专栏/左耳听风/005 何为技术领导力.md">005 何为技术领导力.md.html</a>
</li>
<li>
<a href="/专栏/左耳听风/006 如何拥有技术领导力.md">006 如何拥有技术领导力.md.html</a>
</li>
<li>
<a href="/专栏/左耳听风/007 推荐阅读：每个程序员都该知道的事.md">007 推荐阅读：每个程序员都该知道的事.md.html</a>
</li>
<li>
<a href="/专栏/左耳听风/008 Go语言，Docker和新技术.md">008 Go语言，Docker和新技术.md.html</a>
</li>
<li>
<a href="/专栏/左耳听风/009 答疑解惑：渴望、热情和选择.md">009 答疑解惑：渴望、热情和选择.md.html</a>
</li>
<li>
<a href="/专栏/左耳听风/010 如何成为一个大家愿意追随的Leader？.md">010 如何成为一个大家愿意追随的Leader？.md.html</a>
</li>
<li>
<a href="/专栏/左耳听风/011 程序中的错误处理：错误返回码和异常捕捉.md">011 程序中的错误处理：错误返回码和异常捕捉.md.html</a>
</li>
<li>
<a href="/专栏/左耳听风/012 程序中的错误处理：异步编程和最佳实践.md">012 程序中的错误处理：异步编程和最佳实践.md.html</a>
</li>
<li>
<a href="/专栏/左耳听风/013 魔数 0x5f3759df.md">013 魔数 0x5f3759df.md.html</a>
</li>
<li>
<a href="/专栏/左耳听风/014 推荐阅读：机器学习101.md">014 推荐阅读：机器学习101.md.html</a>
</li>
<li>
<a href="/专栏/左耳听风/015 时间管理：同扭曲时间的事儿抗争.md">015 时间管理：同扭曲时间的事儿抗争.md.html</a>
</li>
<li>
<a href="/专栏/左耳听风/016 时间管理：投资赚取时间.md">016 时间管理：投资赚取时间.md.html</a>
</li>
<li>
<a href="/专栏/左耳听风/017 故障处理最佳实践：应对故障.md">017 故障处理最佳实践：应对故障.md.html</a>
</li>
<li>
<a href="/专栏/左耳听风/018 故障处理最佳实践：故障改进.md">018 故障处理最佳实践：故障改进.md.html</a>
</li>
<li>
<a href="/专栏/左耳听风/019 答疑解惑：我们应该能够识别的表象和本质.md">019 答疑解惑：我们应该能够识别的表象和本质.md.html</a>
</li>
<li>
<a href="/专栏/左耳听风/020 分布式系统架构的冰与火.md">020 分布式系统架构的冰与火.md.html</a>
</li>
<li>
<a href="/专栏/左耳听风/021 从亚马逊的实践，谈分布式系统的难点.md">021 从亚马逊的实践，谈分布式系统的难点.md.html</a>
</li>
<li>
<a href="/专栏/左耳听风/022 分布式系统的技术栈.md">022 分布式系统的技术栈.md.html</a>
</li>
<li>
<a href="/专栏/左耳听风/023 分布式系统关键技术：全栈监控.md">023 分布式系统关键技术：全栈监控.md.html</a>
</li>
<li>
<a href="/专栏/左耳听风/024 分布式系统关键技术：服务调度.md">024 分布式系统关键技术：服务调度.md.html</a>
</li>
<li>
<a href="/专栏/左耳听风/025 分布式系统关键技术：流量与数据调度.md">025 分布式系统关键技术：流量与数据调度.md.html</a>
</li>
<li>
<a href="/专栏/左耳听风/026 洞悉PaaS平台的本质.md">026 洞悉PaaS平台的本质.md.html</a>
</li>
<li>
<a href="/专栏/左耳听风/027 推荐阅读：分布式系统架构经典资料.md">027 推荐阅读：分布式系统架构经典资料.md.html</a>
</li>
<li>
<a href="/专栏/左耳听风/028 编程范式游记（1）- 起源.md">028 编程范式游记（1）- 起源.md.html</a>
</li>
<li>
<a href="/专栏/左耳听风/029 编程范式游记（2）- 泛型编程.md">029 编程范式游记（2）- 泛型编程.md.html</a>
</li>
<li>
<a href="/专栏/左耳听风/030 编程范式游记（3） - 类型系统和泛型的本质.md">030 编程范式游记（3） - 类型系统和泛型的本质.md.html</a>
</li>
<li>
<a href="/专栏/左耳听风/031 Git协同工作流，你该怎样选.md">031 Git协同工作流，你该怎样选.md.html</a>
</li>
<li>
<a href="/专栏/左耳听风/032 推荐阅读：分布式数据调度相关论文.md">032 推荐阅读：分布式数据调度相关论文.md.html</a>
</li>
<li>
<a href="/专栏/左耳听风/033 编程范式游记（4）- 函数式编程.md">033 编程范式游记（4）- 函数式编程.md.html</a>
</li>
<li>
<a href="/专栏/左耳听风/034 编程范式游记（5）- 修饰器模式.md">034 编程范式游记（5）- 修饰器模式.md.html</a>
</li>
<li>
<a href="/专栏/左耳听风/035 编程范式游记（6）- 面向对象编程.md">035 编程范式游记（6）- 面向对象编程.md.html</a>
</li>
<li>
<a href="/专栏/左耳听风/036 编程范式游记（7）- 基于原型的编程范式.md">036 编程范式游记（7）- 基于原型的编程范式.md.html</a>
</li>
<li>
<a href="/专栏/左耳听风/037 编程范式游记（8）- Go 语言的委托模式.md">037 编程范式游记（8）- Go 语言的委托模式.md.html</a>
</li>
<li>
<a href="/专栏/左耳听风/038 编程范式游记（9）- 编程的本质.md">038 编程范式游记（9）- 编程的本质.md.html</a>
</li>
<li>
<a href="/专栏/左耳听风/039 编程范式游记（10）- 逻辑编程范式.md">039 编程范式游记（10）- 逻辑编程范式.md.html</a>
</li>
<li>
<a href="/专栏/左耳听风/040 编程范式游记（11）- 程序世界里的编程范式.md">040 编程范式游记（11）- 程序世界里的编程范式.md.html</a>
</li>
<li>
<a href="/专栏/左耳听风/041 弹力设计篇之“认识故障和弹力设计”.md">041 弹力设计篇之“认识故障和弹力设计”.md.html</a>
</li>
<li>
<a href="/专栏/左耳听风/042 弹力设计篇之“隔离设计”.md">042 弹力设计篇之“隔离设计”.md.html</a>
</li>
<li>
<a href="/专栏/左耳听风/043 弹力设计篇之“异步通讯设计”.md">043 弹力设计篇之“异步通讯设计”.md.html</a>
</li>
<li>
<a href="/专栏/左耳听风/044 弹力设计篇之“幂等性设计”.md">044 弹力设计篇之“幂等性设计”.md.html</a>
</li>
<li>
<a href="/专栏/左耳听风/045 弹力设计篇之“服务的状态”.md">045 弹力设计篇之“服务的状态”.md.html</a>
</li>
<li>
<a href="/专栏/左耳听风/046 弹力设计篇之“补偿事务”.md">046 弹力设计篇之“补偿事务”.md.html</a>
</li>
<li>
<a href="/专栏/左耳听风/047 弹力设计篇之“重试设计”.md">047 弹力设计篇之“重试设计”.md.html</a>
</li>
<li>
<a href="/专栏/左耳听风/048 弹力设计篇之“熔断设计”.md">048 弹力设计篇之“熔断设计”.md.html</a>
</li>
<li>
<a href="/专栏/左耳听风/049 弹力设计篇之“限流设计”.md">049 弹力设计篇之“限流设计”.md.html</a>
</li>
<li>
<a href="/专栏/左耳听风/050 弹力设计篇之“降级设计”.md">050 弹力设计篇之“降级设计”.md.html</a>
</li>
<li>
<a href="/专栏/左耳听风/051 弹力设计篇之“弹力设计总结”.md">051 弹力设计篇之“弹力设计总结”.md.html</a>
</li>
<li>
<a href="/专栏/左耳听风/052 区块链技术 - 区块链的革命性及技术概要.md">052 区块链技术 - 区块链的革命性及技术概要.md.html</a>
</li>
<li>
<a href="/专栏/左耳听风/053 区块链技术 - 区块链技术细节 - 哈希算法.md">053 区块链技术 - 区块链技术细节 - 哈希算法.md.html</a>
</li>
<li>
<a href="/专栏/左耳听风/054 区块链技术 - 区块链技术细节 - 加密和挖矿.md">054 区块链技术 - 区块链技术细节 - 加密和挖矿.md.html</a>
</li>
<li>
<a href="/专栏/左耳听风/055 区块链技术 - 去中心化的共识机制.md">055 区块链技术 - 去中心化的共识机制.md.html</a>
</li>
<li>
<a href="/专栏/左耳听风/056 区块链技术 - 智能合约.md">056 区块链技术 - 智能合约.md.html</a>
</li>
<li>
<a href="/专栏/左耳听风/057 区块链技术 - 传统金融和虚拟货币.md">057 区块链技术 - 传统金融和虚拟货币.md.html</a>
</li>
<li>
<a href="/专栏/左耳听风/058 管理设计篇之分布式锁.md">058 管理设计篇之分布式锁.md.html</a>
</li>
<li>
<a href="/专栏/左耳听风/059 管理设计篇之配置中心.md">059 管理设计篇之配置中心.md.html</a>
</li>
<li>
<a href="/专栏/左耳听风/060 管理设计篇之边车模式.md">060 管理设计篇之边车模式.md.html</a>
</li>
<li>
<a href="/专栏/左耳听风/061 管理设计篇之服务网格.md">061 管理设计篇之服务网格.md.html</a>
</li>
<li>
<a href="/专栏/左耳听风/062 管理设计篇之网关模式.md">062 管理设计篇之网关模式.md.html</a>
</li>
<li>
<a href="/专栏/左耳听风/063 管理设计篇之部署升级策略.md">063 管理设计篇之部署升级策略.md.html</a>
</li>
<li>
<a href="/专栏/左耳听风/064 性能设计篇之缓存.md">064 性能设计篇之缓存.md.html</a>
</li>
<li>
<a href="/专栏/左耳听风/065 性能设计篇之异步处理.md">065 性能设计篇之异步处理.md.html</a>
</li>
<li>
<a href="/专栏/左耳听风/066 性能设计篇之数据库扩展.md">066 性能设计篇之数据库扩展.md.html</a>
</li>
<li>
<a href="/专栏/左耳听风/067 性能设计篇之秒杀.md">067 性能设计篇之秒杀.md.html</a>
</li>
<li>
<a href="/专栏/左耳听风/068 性能设计篇之边缘计算.md">068 性能设计篇之边缘计算.md.html</a>
</li>
<li>
<a href="/专栏/左耳听风/069 程序员练级攻略（2018）：开篇词.md">069 程序员练级攻略（2018）：开篇词.md.html</a>
</li>
<li>
<a href="/专栏/左耳听风/070 程序员练级攻略（2018）：零基础启蒙.md">070 程序员练级攻略（2018）：零基础启蒙.md.html</a>
</li>
<li>
<a href="/专栏/左耳听风/071 程序员练级攻略（2018）：正式入门.md">071 程序员练级攻略（2018）：正式入门.md.html</a>
</li>
<li>
<a href="/专栏/左耳听风/072 程序员练级攻略（2018）：程序员修养.md">072 程序员练级攻略（2018）：程序员修养.md.html</a>
</li>
<li>
<a href="/专栏/左耳听风/073 程序员练级攻略（2018）：编程语言.md">073 程序员练级攻略（2018）：编程语言.md.html</a>
</li>
<li>
<a href="/专栏/左耳听风/074 程序员练级攻略：理论学科.md">074 程序员练级攻略：理论学科.md.html</a>
</li>
<li>
<a href="/专栏/左耳听风/075 程序员练级攻略（2018）：系统知识.md">075 程序员练级攻略（2018）：系统知识.md.html</a>
</li>
<li>
<a href="/专栏/左耳听风/076 程序员练级攻略（2018）：软件设计.md">076 程序员练级攻略（2018）：软件设计.md.html</a>
</li>
<li>
<a href="/专栏/左耳听风/077 程序员练级攻略（2018）：Linux系统、内存和网络.md">077 程序员练级攻略（2018）：Linux系统、内存和网络.md.html</a>
</li>
<li>
<a href="/专栏/左耳听风/078 程序员练级攻略（2018）：异步IO模型和Lock-Free编程.md">078 程序员练级攻略（2018）：异步IO模型和Lock-Free编程.md.html</a>
</li>
<li>
<a href="/专栏/左耳听风/079 程序员练级攻略（2018）：Java底层知识.md">079 程序员练级攻略（2018）：Java底层知识.md.html</a>
</li>
<li>
<a href="/专栏/左耳听风/080 程序员练级攻略（2018）：数据库.md">080 程序员练级攻略（2018）：数据库.md.html</a>
</li>
<li>
<a href="/专栏/左耳听风/081 程序员练级攻略（2018）：分布式架构入门.md">081 程序员练级攻略（2018）：分布式架构入门.md.html</a>
</li>
<li>
<a href="/专栏/左耳听风/082 程序员练级攻略（2018）：分布式架构经典图书和论文.md">082 程序员练级攻略（2018）：分布式架构经典图书和论文.md.html</a>
</li>
<li>
<a href="/专栏/左耳听风/083 程序员练级攻略（2018）：分布式架构工程设计.md">083 程序员练级攻略（2018）：分布式架构工程设计.md.html</a>
</li>
<li>
<a href="/专栏/左耳听风/084 程序员练级攻略（2018）：微服务.md">084 程序员练级攻略（2018）：微服务.md.html</a>
</li>
<li>
<a href="/专栏/左耳听风/085 程序员练级攻略（2018）：容器化和自动化运维.md">085 程序员练级攻略（2018）：容器化和自动化运维.md.html</a>
</li>
<li>
<a href="/专栏/左耳听风/086 程序员练级攻略（2018）：机器学习和人工智能.md">086 程序员练级攻略（2018）：机器学习和人工智能.md.html</a>
</li>
<li>
<a href="/专栏/左耳听风/087 程序员练级攻略（2018）：前端基础和底层原理.md">087 程序员练级攻略（2018）：前端基础和底层原理.md.html</a>
</li>
<li>
<a class="current-tab" href="/专栏/左耳听风/088 程序员练级攻略（2018）：前端性能优化和框架.md">088 程序员练级攻略（2018）：前端性能优化和框架.md.html</a>
</li>
<li>
<a href="/专栏/左耳听风/089 程序员练级攻略（2018）：UIUX设计.md">089 程序员练级攻略（2018）：UIUX设计.md.html</a>
</li>
<li>
<a href="/专栏/左耳听风/090 程序员练级攻略（2018）：技术资源集散地.md">090 程序员练级攻略（2018）：技术资源集散地.md.html</a>
</li>
<li>
<a href="/专栏/左耳听风/091 程序员面试攻略：面试前的准备.md">091 程序员面试攻略：面试前的准备.md.html</a>
</li>
<li>
<a href="/专栏/左耳听风/092 程序员面试攻略：面试中的技巧.md">092 程序员面试攻略：面试中的技巧.md.html</a>
</li>
<li>
<a href="/专栏/左耳听风/093 程序员面试攻略：面试风格.md">093 程序员面试攻略：面试风格.md.html</a>
</li>
<li>
<a href="/专栏/左耳听风/094 程序员面试攻略：实力才是王中王.md">094 程序员面试攻略：实力才是王中王.md.html</a>
</li>
<li>
<a href="/专栏/左耳听风/095 高效学习：端正学习态度.md">095 高效学习：端正学习态度.md.html</a>
</li>
<li>
<a href="/专栏/左耳听风/096 高效学习：源头、原理和知识地图.md">096 高效学习：源头、原理和知识地图.md.html</a>
</li>
<li>
<a href="/专栏/左耳听风/097 高效学习：深度，归纳和坚持实践.md">097 高效学习：深度，归纳和坚持实践.md.html</a>
</li>
<li>
<a href="/专栏/左耳听风/098 高效学习：如何学习和阅读代码.md">098 高效学习：如何学习和阅读代码.md.html</a>
</li>
<li>
<a href="/专栏/左耳听风/099 高效学习：面对枯燥和量大的知识.md">099 高效学习：面对枯燥和量大的知识.md.html</a>
</li>
<li>
<a href="/专栏/左耳听风/100 高效沟通：Talk和Code同等重要.md">100 高效沟通：Talk和Code同等重要.md.html</a>
</li>
<li>
<a href="/专栏/左耳听风/101 高效沟通：沟通阻碍和应对方法.md">101 高效沟通：沟通阻碍和应对方法.md.html</a>
</li>
<li>
<a href="/专栏/左耳听风/102 高效沟通：沟通方式及技巧.md">102 高效沟通：沟通方式及技巧.md.html</a>
</li>
<li>
<a href="/专栏/左耳听风/103 高效沟通：沟通技术.md">103 高效沟通：沟通技术.md.html</a>
</li>
<li>
<a href="/专栏/左耳听风/104 高效沟通：好老板要善于提问.md">104 高效沟通：好老板要善于提问.md.html</a>
</li>
<li>
<a href="/专栏/左耳听风/105 高效沟通：好好说话的艺术.md">105 高效沟通：好好说话的艺术.md.html</a>
</li>
<li>
<a href="/专栏/左耳听风/106 加餐 谈谈我的“三观”.md">106 加餐 谈谈我的“三观”.md.html</a>
</li>
<li>
<a href="/专栏/左耳听风/107 结束语 业精于勤，行成于思.md">107 结束语 业精于勤，行成于思.md.html</a>
</li>
</ul>
</div>
</div>
<div class="sidebar-toggle" onclick="sidebar_toggle()" onmouseover="add_inner()" onmouseleave="remove_inner()">
<div class="sidebar-toggle-inner"></div>
</div>
<script>
function add_inner() {
let inner = document.querySelector('.sidebar-toggle-inner')
inner.classList.add('show')
}
function remove_inner() {
let inner = document.querySelector('.sidebar-toggle-inner')
inner.classList.remove('show')
}
function sidebar_toggle() {
let sidebar_toggle = document.querySelector('.sidebar-toggle')
let sidebar = document.querySelector('.book-sidebar')
let content = document.querySelector('.off-canvas-content')
if (sidebar_toggle.classList.contains('extend')) { // show
sidebar_toggle.classList.remove('extend')
sidebar.classList.remove('hide')
content.classList.remove('extend')
} else { // hide
sidebar_toggle.classList.add('extend')
sidebar.classList.add('hide')
content.classList.add('extend')
}
}
function open_sidebar() {
let sidebar = document.querySelector('.book-sidebar')
let overlay = document.querySelector('.off-canvas-overlay')
sidebar.classList.add('show')
overlay.classList.add('show')
}
function hide_canvas() {
let sidebar = document.querySelector('.book-sidebar')
let overlay = document.querySelector('.off-canvas-overlay')
sidebar.classList.remove('show')
overlay.classList.remove('show')
}
</script>
<div class="off-canvas-content">
<div class="columns">
<div class="column col-12 col-lg-12">
<div class="book-navbar">
<!-- For Responsive Layout -->
<header class="navbar">
<section class="navbar-section">
<a onclick="open_sidebar()">
<i class="icon icon-menu"></i>
</a>
</section>
</header>
</div>
<div class="book-content" style="max-width: 960px; margin: 0 auto;
overflow-x: auto;
overflow-y: hidden;">
<div class="book-post">
<p id="tip" align="center"></p>
<div><h1>088 程序员练级攻略（2018）：前端性能优化和框架</h1>
<h1>前端性能优化</h1>
<p>首先是推荐几本前端性能优化方面的图书。</p>
<ul>
<li>
<p><a href="http://www.allitebooks.in/web-performance-action/">Web Performance in Action</a> ，这本书目前国内没有卖的。你可以看电子版本，我觉得是一本很不错的书，其中有 CSS、图片、字体、JavaScript 性能调优等。</p>
</li>
<li>
<p><a href="http://designingforperformance.com/">Designing for Performance</a> ，这本在线的电子书很不错，其中讲了很多网页优化的技术和相关的工具，可以让你对整体网页性能优化有所了解。</p>
</li>
<li>
<p><a href="https://book.douban.com/subject/5362856/">High Performance JavaScript</a> ，这本书在国内可以买到，能让你了解如何提升各方面的性能，包括代码的加载、运行、DOM 交互、页面生存周期等。雅虎的前端工程师尼古拉斯·扎卡斯（Nicholas C. Zakas）和其他五位 JavaScript 专家介绍了页面代码加载的最佳方法和编程技巧，来帮助你编写更为高效和快速的代码。你还会了解到构建和部署文件到生产环境的最佳实践，以及有助于定位线上问题的工具。</p>
</li>
<li>
<p><a href="https://book.douban.com/subject/26411563/">High Performance Web Sites: Essential Knowledge for Front-End Engineers</a> ，这本书国内也有卖，翻译版为《高性能网站建设指南：前端工程师技能精髓》。作者给出了 14 条具体的优化原则，每一条原则都配以范例佐证，并提供了在线支持。</p>
<p>全书内容丰富，主要包括减少 HTTP 请求、Edge Computing 技术、Expires Header 技术、gzip 组件、CSS 和 JavaScript 最佳实践、主页内联、Domain 最小化、JavaScript 优化、避免重定向的技巧、删除重复 JavaScript 的技巧、关闭 ETags 的技巧、Ajax 缓存技术和最小化技术等。</p>
</li>
<li>
<p>除了上面这几本书之外，Google 的 <a href="https://developers.google.com/web/fundamentals/">Web Fundamentals</a> 里的 <a href="https://developers.google.com/web/fundamentals/performance/why-performance-matters/">Performance</a> 这一章节也有很多非常不错的知识和经验。</p>
</li>
</ul>
<p>接下来是一些最佳实践性的文档。</p>
<ul>
<li><a href="http://browserdiet.com/zh/">Browser Diet</a> ，前端权威性能指南（中文版）。这是一群为大型站点工作的专家们建立的一份前端性能的工作指南。</li>
<li><a href="https://developers.google.com/speed/docs/insights/rules">PageSpeed Insights Rules</a> ，谷歌给的一份性能指南和最佳实践。</li>
<li><a href="https://developer.yahoo.com/performance/rules.html">Best Practices for Speeding Up Your Web Site</a> ，雅虎公司给的一份 7 个分类共 35 个最佳实践的文档。</li>
</ul>
<p>接下来，重点推荐一个性能优化的案例学习网站 <a href="https://wpostats.com/">WPO Stats</a> 。WPO 是 Web Performance Optimization 的缩写，这个网站上有很多很不错的性能优化的案例分享，一定可以帮助你很多。</p>
<p>然后是一些文章和案例。</p>
<ul>
<li><a href="https://blog.httpwatch.com/2015/01/16/a-simple-performance-comparison-of-https-spdy-and-http2/">A Simple Performance Comparison of HTTPS, SPDY and HTTP/2</a> ，这是一篇比较浏览器的 HTTPS、SPDY 和 HTTP/2 性能的文章，除了比较之外，还可以让你了解一些技术细节。</li>
<li><a href="https://www.nginx.com/blog/7-tips-for-faster-http2-performance/">7 Tips for Faster HTTP/2 Performance</a> ，对于 HTTP/2 来说，Nginx 公司给出的 7 个增加其性能的小提示。</li>
<li><a href="https://slack.engineering/reducing-slacks-memory-footprint-4480fec7e8eb">Reducing Slack’s memory footprint</a> ，Slack 团队减少内存使用量的实践。</li>
<li><a href="https://medium.com/@Pinterest_Engineering/driving-user-growth-with-performance-improvements-cfc50dafadd7">Pinterest: Driving user growth with performance improvements</a> ，Pinterest 关于性能调优的一些分享，其中包括了前后端的一些性能调优实践。其实也是一些比较通用的玩法，这篇文章主要是想让前端的同学了解一下如何做整体的性能调优。</li>
<li><a href="http://jonraasch.com/blog/10-javascript-performance-boosting-tips-from-nicholas-zakas">10 JavaScript Performance Boosting Tips</a> ，10 个提高 JavaScript 运行效率的小提示，挺有用的。</li>
<li><a href="http://www.guypo.com/17-statistics-to-sell-web-performance-optimization/">17 Statistics to Sell Web Performance Optimization</a> ，这个网页上收集了好些公司的 Web 性能优化的工程分享，都是非常有价值的。</li>
<li><a href="http://deanhume.com/Home/BlogPost/getting-started-with-the-picture-element/8109">Getting started with the Picture Element</a> ，这篇文章讲述了 Responsive 布局所带来的一些负面的问题。主要是图像适配的问题，其中引出了一篇文章 &quot;<a href="https://dev.opera.com/articles/native-responsive-images/">Native Responsive Images</a>&quot; ，值得一读。</li>
<li><a href="http://www.deanhume.com/Home/BlogPost/improve-page-load-times-with-dns-prefetching/80">Improve Page Load Times With DNS Prefetching</a> ，这篇文章教了你一个如何降低 DNS 解析时间的小技术——DNS prefetching。</li>
<li><a href="https://www.html5rocks.com/en/tutorials/speed/rendering/">Jank Busting for Better Rendering Performance</a> ，这是一篇 Google I/O 上的分享，关于前端动画渲染性能提升。</li>
<li><a href="https://developer.chrome.com/devtools/docs/javascript-memory-profiling">JavaScript Memory Profiling</a> ，这是一篇谷歌官方教你如何使用 Chrome 的开发工具来分析 JavaScript 内存问题的文章。</li>
</ul>
<p>接下来是一些性能工具。在线性能测试分析工具太多，这里只推荐比较权威的。</p>
<ul>
<li><a href="https://developers.google.com/speed/pagespeed/">PageSpeed</a> ，谷歌有一组 PageSpeed 工具来帮助你分析和优化网站的性能。Google 出品的，质量相当有保证。</li>
<li><a href="https://github.com/marcelduran/yslow">YSlow</a> ，雅虎的一个网页分析工具。</li>
<li><a href="https://gtmetrix.com/">GTmetrix</a> ，是一个将 PageSpeed 和 YSlow 合并起来的一个网页分析工具，并且加上一些 Page load 或是其它的一些分析。也是一个很不错的分析工具。</li>
<li><a href="https://github.com/davidsonfellipe/awesome-wpo">Awesome WPO</a> ，在 GitHub 上的这个 Awesome 中，你可以找到更多的性能优化工具和资源。</li>
</ul>
<p>另外，中国的网络有各种问题（你懂的），所以，你不能使用 Google 共享的 JavaScript 链接来提速，你得用中国自己的。你可以到这里看看中国的共享库资源，<a href="http://chineseseoshifu.com/blog/china-hosted-javascript-libraries-jquery-dojo-boostrap.html">Forget Google and Use These Hosted JavaScript Libraries in China</a> 。</p>
<h1>前端框架</h1>
<p>接下来，要学习的是 Web 前端的几大框架。目前而言，前端社区有三大框架 Angular.js、React.js 和 Vue.js。我认为，React 和 Vue 更为强劲一些，所以，我这里只写和 React 和 Vue 相关的攻略。关于两者的比较，网上有好多文章。我这里推荐几篇我觉得还不错的，供你参考。</p>
<ul>
<li><a href="https://medium.com/unicorn-supplies/angular-vs-react-vs-vue-a-2017-comparison-c5c52d620176">Angular vs. React vs. Vue: A 2017 comparison</a></li>
<li><a href="https://medium.com/js-dojo/react-or-vue-which-javascript-ui-library-should-you-be-using-543a383608d">React or Vue: Which JavaScript UI Library Should You Be Using?</a></li>
<li><a href="https://medium.com/@TechMagic/reactjs-vs-angular5-vs-vue-js-what-to-choose-in-2018-b91e028fa91d">ReactJS vs Angular5 vs Vue.js - What to choose in 2018?</a></li>
</ul>
<p>其实，比较这些框架的优缺点还有利弊并不是要比出个输赢，而是让你了解一下不同框架的优缺点。我觉得，这些框架都是可以学习的。而在我们生活工作中具体要用哪个框架，最好还是要有一些出发点，比如，你是为了找份好的工作，为了快速地搭一个网站，为了改造一个大规模的前端系统，还是纯粹地为了学习……</p>
<p>不同的目的会导致不同的决定。我并不希望上述的这些比较会让你进入 &quot; 二选一 &quot; 或是 &quot; 三选一 &quot; 的境地。我只是想通过这些文章让你知道这些框架的设计思路和实现原理，这些才是让你受益一辈子的事。</p>
<h2>React.js 框架</h2>
<p>下面先来学习一下 React.js 框架。</p>
<p><strong>入门</strong></p>
<p>React 学起来并不复杂，就看 <a href="https://reactjs.org/tutorial/tutorial.html">React 官方教程</a> 和其文档就好了（ <a href="https://doc.react-china.org/">React 的中文教程</a> ）。</p>
<p>然后，下面的文章会带你了解一下 React.js 的基本原理。</p>
<ul>
<li><a href="https://medium.freecodecamp.org/all-the-fundamental-react-js-concepts-jammed-into-this-single-medium-article-c83f9b53eac2">All the fundamental React.js concepts</a> ，这篇文章讲了所有的 React.js 的基本原理。</li>
<li><a href="https://blog.kentcdodds.com/learn-react-fundamentals-and-advanced-patterns-eac90341c9db">Learn React Fundamentals and Advanced Patterns</a> ，这篇文章中有几个短视频，每个视频不超过 5 分钟，是学习 React 的一个很不错的地方。</li>
<li><a href="https://reactjs.org/docs/thinking-in-react.html">Thinking in React</a>，这篇文章将引导你完成使用 React 构建可搜索产品数据表的思考过程。</li>
</ul>
<p><strong>提高</strong></p>
<p>学习一个技术最重要的是要学到其中的思想和方法。下面是一些我觉得学习 React 中最重要的东西。</p>
<ul>
<li>
<p><strong>状态</strong>，对于富客户端来说是非常麻烦也是坑最多的地方，这里有几篇文章你可以一读。</p>
<ul>
<li><a href="http://reactkungfu.com/2015/09/common-react-dot-js-mistakes-unneeded-state/">Common React.js mistakes: Unneeded state</a> ，React.js 编程的常见错误——不必要的状态。</li>
<li><a href="https://www.reddit.com/r/reactjs/comments/3bjdoe/state_is_an_antipattern/">State is an Anti-Pattern</a> ，关于如何做一个不错的组件的思考，很有帮助。</li>
<li><a href="https://www.safaribooksonline.com/blog/2015/10/29/react-local-component-state/">Why Local Component State is a Trap</a> ，一些关于 “Single state tree” 的想法。</li>
<li><a href="https://daveceddia.com/thinking-statefully/">Thinking Statefully</a> ，几个很不错的例子让你对声明式的有状态的技术有更好的理解。</li>
<li>传统上，解决 React 的状态问题一般用 Redux。在这里推荐 <a href="https://www.robinwieruch.de/tips-to-learn-react-redux/">Tips to learn React + Redux in 2018</a> 。Redux 是一个状态粘合组件，一般来说，我们会用 Redux 来做一些数据状态和其上层 Component 上的同步。这篇教程很不错。</li>
<li>最后是 &quot;State Architecture Patterns in React &quot; 系列文章，非常值得一读。
<ul>
<li><a href="https://medium.com/@skylernelson_64801/state-architecture-patterns-in-react-a-review-df02c1e193c6">Part 1: A Review</a></li>
<li><a href="https://medium.com/@skylernelson_64801/state-architecture-patterns-in-react-part-2-the-top-heavy-architecture-flux-and-performance-a388b928ce89">Part 2: The Top-Heavy Architecture, Flux and Performance</a></li>
<li><a href="https://medium.com/@skylernelson_64801/state-architecture-patterns-in-react-part-3-articulation-points-zine-and-an-overall-strategy-cf076f906391">Part 3: Articulation Points, zine and An Overall Strategy</a></li>
<li><a href="https://medium.com/@skylernelson_64801/state-architecture-patterns-in-react-part-4-purity-flux-duality-and-dataflow-d06016b3379a">Part 4: Purity, Flux-duality and Dataflow</a></li>
</ul>
</li>
</ul>
</li>
<li>
<p><strong>函数式编程</strong>。从 jQuery 过来的同学一定非常不习惯 React，而从 Java 等后端过来的程序员就会很习惯了。所以，我觉得 React 就是后端人员开发的，或者说是做函数式编程的人开发的。对此，你需要学习一下 JavaScript 函数式编程的东西。</p>
<p>这里推荐一本免费的电子书 《<a href="https://github.com/MostlyAdequate/mostly-adequate-guide">Professor Frisby’s Mostly Adequate Guide to Functional Programming</a>》，其中译版为《<a href="https://jigsawye.gitbooks.io/mostly-adequate-guide/content/">JS 函数式编程指南中文版</a>》。</p>
<p>下面有几篇文章非常不错。前两篇和函数式编程有关的文章非常值得一读。后三篇是一些比较实用的函数式编程和 React 结合的文章。</p>
<ul>
<li><a href="https://medium.com/javascript-scene/master-the-javascript-interview-what-is-functional-programming-7f218c68b3a0?utm_source=mybridge&amp;utm_medium=email&amp;utm_campaign=read_more">Master the JavaScript Interview: What is Functional Programming?</a></li>
<li><a href="https://medium.com/javascript-scene/the-rise-and-fall-and-rise-of-functional-programming-composable-software-c2d91b424c8c">The Rise and Fall and Rise of Functional Programming (Composing Software)</a></li>
<li><a href="https://blog.risingstack.com/functional-ui-and-components-as-higher-order-functions/">Functional UI and Components as Higher Order Functions</a></li>
<li><a href="https://banderson.github.io/functional-js-reverse-engineering-the-hype/">Functional JavaScript: Reverse-Engineering the Hype</a></li>
<li><a href="https://medium.com/javascript-inside/some-thoughts-on-function-components-in-react-cb2938686bc7">Some Thoughts on Function Components in React</a></li>
</ul>
</li>
<li>
<p><strong>设计相关</strong>。接下来是学习一些 React 的设计模式。<a href="https://reactpatterns.com/">React Pattern</a> 是一个不错的学习 React 模式的地方。除此之外，还有如下的一些不错的文章也会对你很有帮助的。</p>
<ul>
<li><a href="https://medium.com/@franleplant/react-higher-order-components-in-depth-cf9032ee6c3e">React Higher Order Components in depth</a></li>
<li><a href="https://medium.com/@dan_abramov/smart-and-dumb-components-7ca2f9a7c7d0">Presentational and Container Components</a></li>
<li><a href="https://goshakkk.name/controlled-vs-uncontrolled-inputs-react/">Controlled and uncontrolled form inputs in React don’t have to be complicated</a></li>
<li><a href="https://medium.com/merrickchristensen/function-as-child-components-5f3920a9ace9">Function as Child Components</a></li>
<li><a href="https://medium.com/styled-components/component-folder-pattern-ee42df37ec68">Writing Scalable React Apps with the Component Folder Pattern</a></li>
<li><a href="https://medium.freecodecamp.org/reusable-web-application-strategies-d51517ea68c8">Reusable Web Application Strategies</a></li>
<li><a href="https://medium.com/@robftw/characteristics-of-an-ideal-react-architecture-883b9b92be0b">Characteristics of an Ideal React Architecture</a></li>
</ul>
</li>
<li>
<p><strong>实践和经验</strong></p>
</li>
</ul>
<p>还有一些不错的实践和经验。</p>
<ul>
<li><a href="https://camjackson.net/post/9-things-every-reactjs-beginner-should-know">9 things every React.js beginner should know</a></li>
<li><a href="https://engineering.siftscience.com/best-practices-for-building-large-react-applications/">Best practices for building large React applications</a></li>
<li><a href="https://americanexpress.io/clean-code-dirty-code/">Clean Code vs. Dirty Code: React Best Practices</a></li>
<li><a href="https://dev.to/jakoblind/how-to-become-a-more-productive-react-developer">How to become a more productive React Developer</a></li>
<li><a href="https://medium.freecodecamp.org/8-key-react-component-decisions-cc965db11594">8 Key React Component Decisions</a></li>
</ul>
<p><strong>资源列表</strong></p>
<p>最后就是 React 的资源列表。</p>
<ul>
<li><a href="https://github.com/enaqx/awesome-react">Awesome React</a> ，这是一些 React 相关资源的列表，很大很全。</li>
<li><a href="https://github.com/markerikson/react-redux-links">React/Redux Links</a> ，这也是 React 相关的资源列表，与上面不一样的是，这个列表主要收集了大量的文章，其中讲述了很多 React 知识和技术，比上面的列表好很多。</li>
<li><a href="https://react.rocks/">React Rocks</a> ，这个网站主要收集各种 React 的组件示例，可以让你大开眼界。</li>
</ul>
<h2>Vue.js 框架</h2>
<p>Vue 可能是一个更符合前端工程师习惯的框架。不像 React.js 那样使用函数式编程方式，是后端程序员的思路。</p>
<ul>
<li>通过文章 “<a href="https://medium.com/vue-mastery/why-43-of-front-end-developers-want-to-learn-vue-js-7f23348bc5be">Why 43% of Front-End Developers want to learn Vue.js</a>” ，你可以看出其编程方式和 React 是大相径庭的，符合传统的前端开发的思维方式。</li>
<li>通过文章 <a href="https://www.smashingmagazine.com/2018/02/jquery-vue-javascript/">Replacing jQuery With Vue.js: No Build Step Necessary</a> ，我们可以看到，从 jQuery 是可以平滑过度到 Vue 的。</li>
<li>另外，我们可以通过 “<a href="https://medium.com/@dalaidunc/10-things-i-love-about-vue-505886ddaff2">10 things I love about Vue</a>” ，了解 Vue 的一些比较优秀的特性。</li>
</ul>
<p>最令人高兴的是，Vue 的作者是我的好朋友尤雨溪（Evan You），最近一次对他的采访 “<a href="https://blog.hackages.io/https-blog-hackages-io-evanyoubhack2017-cc5559806157">Vue on 2018 - Interview with Evan You</a>” 当中有很多故事以及对 Vue 的展望。（<strong>注意：Vue 是完全由其支持者和用户资助的，这意味着它更接近社区而不受大公司的控制。</strong>）</p>
<p>要学习 Vue 并不难，我认为上官网看文档（ <a href="https://vuejs.org/guide/">Vue 官方文档</a>（<a href="https://cn.vuejs.org/v2/guide/">中文版</a>）），照着搞一搞就可以很快上手了。<a href="https://laracasts.com/series/learn-vue-2-step-by-step">Vue.js screencasts</a> 是一个很不错的英文视频教程。</p>
<p>另外，推荐 <a href="https://zhuanlan.zhihu.com/p/23134551">新手向：Vue 2.0 的建议学习顺序</a> ，这是 Vue 作者写的，所以有特殊意义。</p>
<p>Vue 的确比较简单，有 Web 开发经验的人上手也比较快，所以这里也不会像 React 那样给出很多的资料。下面是一些我觉得还不错的内容，推荐给你。</p>
<ul>
<li><a href="https://itnext.io/how-not-to-vue-18f16fe620b5">How not to Vue</a> ，任何技术都有坑，了解 Vue 的短板，你就能扬长避短，就能用得更好。</li>
<li><a href="https://alligator.io/vuejs/component-communication/">Vue.js Component Communication Patterns</a></li>
<li><a href="https://medium.com/js-dojo/4-ajax-patterns-for-vue-js-apps-add915fc9168">4 AJAX Patterns For Vue.js Apps</a></li>
<li><a href="https://vuejsdevelopers.com/2017/05/20/vue-js-safely-jquery-plugin/">How To (Safely) Use A jQuery Plugin With Vue.js</a></li>
<li><a href="https://vuejsdevelopers.com/2017/03/24/vue-js-component-templates/">7 Ways To Define A Component Template in Vue.js</a></li>
<li><a href="https://vuejsdevelopers.com/2017/04/22/vue-js-libraries-plugins/">Use Any Javascript Library With Vue.js</a></li>
<li><a href="https://lobotuerto.com/blog/dynamic-and-async-components-made-easy-with-vuejs/">Dynamic and async components made easy with Vue.js</a></li>
</ul>
<p>当然，最后一定还有 <a href="https://github.com/vuejs/awesome-vue">Awesome Vue</a> ，Vue.js 里最为巨大最为优秀的资源列表。</p>
<h1>小结</h1>
<p>总结一下今天的内容。我先介绍的是前端性能优化方面的内容，推荐了图书、最佳实践性的文档、案例，以及一些在线性能测试分析工具。随后重点讲述了 React 和 Vue 两大前端框架，给出了大量的文章、教程和相关资源列表。我认为，React.js 使用函数式编程方式，更加符合后端程序员的思路，而 Vue 是更符合前端工程师习惯的框架。因此，两者比较起来，Vue 会更容易上手一些。</p>
</div>
</div>
<div>
<div style="float: left">
<a href="/专栏/左耳听风/087 程序员练级攻略（2018）：前端基础和底层原理.md">上一页</a>
</div>
<div style="float: right">
<a href="/专栏/左耳听风/089 程序员练级攻略（2018）：UIUX设计.md">下一页</a>
</div>
</div>
</div>
</div>
</div>
</div>
<a class="off-canvas-overlay" onclick="hide_canvas()"></a>
</div>
<script defer src="https://static.cloudflareinsights.com/beacon.min.js/v652eace1692a40cfa3763df669d7439c1639079717194" integrity="sha512-Gi7xpJR8tSkrpF7aordPZQlW2DLtzUlZcumS8dMQjwDHEnw9I7ZLyiOj/6tZStRBGtGgN6ceN6cMH8z7etPGlw==" data-cf-beacon='{"rayId":"709978a00b763cfa","version":"2021.12.0","r":1,"token":"1f5d475227ce4f0089a7cff1ab17c0f5","si":100}' crossorigin="anonymous"></script>
</body>
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-NPSEEVD756"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag() {
dataLayer.push(arguments);
}
gtag('js', new Date());
gtag('config', 'G-NPSEEVD756');
var path = window.location.pathname
var cookie = getCookie("lastPath");
console.log(path)
if (path.replace("/", "") === "") {
if (cookie.replace("/", "") !== "") {
console.log(cookie)
document.getElementById("tip").innerHTML = "<a href='" + cookie + "'>跳转到上次进度</a>"
}
} else {
setCookie("lastPath", path)
}
function setCookie(cname, cvalue) {
var d = new Date();
d.setTime(d.getTime() + (180 * 24 * 60 * 60 * 1000));
var expires = "expires=" + d.toGMTString();
document.cookie = cname + "=" + cvalue + "; " + expires + ";path = /";
}
function getCookie(cname) {
var name = cname + "=";
var ca = document.cookie.split(';');
for (var i = 0; i < ca.length; i++) {
var c = ca[i].trim();
if (c.indexOf(name) === 0) return c.substring(name.length, c.length);
}
return "";
}
</script>
</html>
Reference in New Issue View Git Blame Copy Permalink