mirror of
https://github.com/zhwei820/learn.lianglianglee.com.git
synced 2025-09-30 23:26:43 +08:00
734 lines
50 KiB
HTML
734 lines
50 KiB
HTML
<!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.html">000 开篇词 洞悉技术的本质，享受科技的乐趣</a>
|
||
</li>
|
||
<li>
|
||
|
||
<a href="/专栏/左耳听风/001 程序员如何用技术变现（上）.md.html">001 程序员如何用技术变现（上）</a>
|
||
</li>
|
||
<li>
|
||
|
||
<a href="/专栏/左耳听风/002 程序员如何用技术变现（下）.md.html">002 程序员如何用技术变现（下）</a>
|
||
</li>
|
||
<li>
|
||
|
||
<a href="/专栏/左耳听风/003 Equifax信息泄露始末.md.html">003 Equifax信息泄露始末</a>
|
||
</li>
|
||
<li>
|
||
|
||
<a href="/专栏/左耳听风/004 从Equifax信息泄露看数据安全.md.html">004 从Equifax信息泄露看数据安全</a>
|
||
</li>
|
||
<li>
|
||
|
||
<a href="/专栏/左耳听风/005 何为技术领导力.md.html">005 何为技术领导力</a>
|
||
</li>
|
||
<li>
|
||
|
||
<a href="/专栏/左耳听风/006 如何拥有技术领导力.md.html">006 如何拥有技术领导力</a>
|
||
</li>
|
||
<li>
|
||
|
||
<a href="/专栏/左耳听风/007 推荐阅读：每个程序员都该知道的事.md.html">007 推荐阅读：每个程序员都该知道的事</a>
|
||
</li>
|
||
<li>
|
||
|
||
<a href="/专栏/左耳听风/008 Go语言，Docker和新技术.md.html">008 Go语言，Docker和新技术</a>
|
||
</li>
|
||
<li>
|
||
|
||
<a href="/专栏/左耳听风/009 答疑解惑：渴望、热情和选择.md.html">009 答疑解惑：渴望、热情和选择</a>
|
||
</li>
|
||
<li>
|
||
|
||
<a href="/专栏/左耳听风/010 如何成为一个大家愿意追随的Leader？.md.html">010 如何成为一个大家愿意追随的Leader？</a>
|
||
</li>
|
||
<li>
|
||
|
||
<a href="/专栏/左耳听风/011 程序中的错误处理：错误返回码和异常捕捉.md.html">011 程序中的错误处理：错误返回码和异常捕捉</a>
|
||
</li>
|
||
<li>
|
||
|
||
<a href="/专栏/左耳听风/012 程序中的错误处理：异步编程和最佳实践.md.html">012 程序中的错误处理：异步编程和最佳实践</a>
|
||
</li>
|
||
<li>
|
||
|
||
<a href="/专栏/左耳听风/013 魔数 0x5f3759df.md.html">013 魔数 0x5f3759df</a>
|
||
</li>
|
||
<li>
|
||
|
||
<a href="/专栏/左耳听风/014 推荐阅读：机器学习101.md.html">014 推荐阅读：机器学习101</a>
|
||
</li>
|
||
<li>
|
||
|
||
<a href="/专栏/左耳听风/015 时间管理：同扭曲时间的事儿抗争.md.html">015 时间管理：同扭曲时间的事儿抗争</a>
|
||
</li>
|
||
<li>
|
||
|
||
<a href="/专栏/左耳听风/016 时间管理：投资赚取时间.md.html">016 时间管理：投资赚取时间</a>
|
||
</li>
|
||
<li>
|
||
|
||
<a href="/专栏/左耳听风/017 故障处理最佳实践：应对故障.md.html">017 故障处理最佳实践：应对故障</a>
|
||
</li>
|
||
<li>
|
||
|
||
<a href="/专栏/左耳听风/018 故障处理最佳实践：故障改进.md.html">018 故障处理最佳实践：故障改进</a>
|
||
</li>
|
||
<li>
|
||
|
||
<a href="/专栏/左耳听风/019 答疑解惑：我们应该能够识别的表象和本质.md.html">019 答疑解惑：我们应该能够识别的表象和本质</a>
|
||
</li>
|
||
<li>
|
||
|
||
<a href="/专栏/左耳听风/020 分布式系统架构的冰与火.md.html">020 分布式系统架构的冰与火</a>
|
||
</li>
|
||
<li>
|
||
|
||
<a href="/专栏/左耳听风/021 从亚马逊的实践，谈分布式系统的难点.md.html">021 从亚马逊的实践，谈分布式系统的难点</a>
|
||
</li>
|
||
<li>
|
||
|
||
<a href="/专栏/左耳听风/022 分布式系统的技术栈.md.html">022 分布式系统的技术栈</a>
|
||
</li>
|
||
<li>
|
||
|
||
<a href="/专栏/左耳听风/023 分布式系统关键技术：全栈监控.md.html">023 分布式系统关键技术：全栈监控</a>
|
||
</li>
|
||
<li>
|
||
|
||
<a href="/专栏/左耳听风/024 分布式系统关键技术：服务调度.md.html">024 分布式系统关键技术：服务调度</a>
|
||
</li>
|
||
<li>
|
||
|
||
<a href="/专栏/左耳听风/025 分布式系统关键技术：流量与数据调度.md.html">025 分布式系统关键技术：流量与数据调度</a>
|
||
</li>
|
||
<li>
|
||
|
||
<a href="/专栏/左耳听风/026 洞悉PaaS平台的本质.md.html">026 洞悉PaaS平台的本质</a>
|
||
</li>
|
||
<li>
|
||
|
||
<a href="/专栏/左耳听风/027 推荐阅读：分布式系统架构经典资料.md.html">027 推荐阅读：分布式系统架构经典资料</a>
|
||
</li>
|
||
<li>
|
||
|
||
<a href="/专栏/左耳听风/028 编程范式游记（1）- 起源.md.html">028 编程范式游记（1）- 起源</a>
|
||
</li>
|
||
<li>
|
||
|
||
<a href="/专栏/左耳听风/029 编程范式游记（2）- 泛型编程.md.html">029 编程范式游记（2）- 泛型编程</a>
|
||
</li>
|
||
<li>
|
||
|
||
<a href="/专栏/左耳听风/030 编程范式游记（3） - 类型系统和泛型的本质.md.html">030 编程范式游记（3） - 类型系统和泛型的本质</a>
|
||
</li>
|
||
<li>
|
||
|
||
<a href="/专栏/左耳听风/031 Git协同工作流，你该怎样选.md.html">031 Git协同工作流，你该怎样选</a>
|
||
</li>
|
||
<li>
|
||
|
||
<a href="/专栏/左耳听风/032 推荐阅读：分布式数据调度相关论文.md.html">032 推荐阅读：分布式数据调度相关论文</a>
|
||
</li>
|
||
<li>
|
||
|
||
<a href="/专栏/左耳听风/033 编程范式游记（4）- 函数式编程.md.html">033 编程范式游记（4）- 函数式编程</a>
|
||
</li>
|
||
<li>
|
||
|
||
<a href="/专栏/左耳听风/034 编程范式游记（5）- 修饰器模式.md.html">034 编程范式游记（5）- 修饰器模式</a>
|
||
</li>
|
||
<li>
|
||
|
||
<a href="/专栏/左耳听风/035 编程范式游记（6）- 面向对象编程.md.html">035 编程范式游记（6）- 面向对象编程</a>
|
||
</li>
|
||
<li>
|
||
|
||
<a href="/专栏/左耳听风/036 编程范式游记（7）- 基于原型的编程范式.md.html">036 编程范式游记（7）- 基于原型的编程范式</a>
|
||
</li>
|
||
<li>
|
||
|
||
<a href="/专栏/左耳听风/037 编程范式游记（8）- Go 语言的委托模式.md.html">037 编程范式游记（8）- Go 语言的委托模式</a>
|
||
</li>
|
||
<li>
|
||
|
||
<a href="/专栏/左耳听风/038 编程范式游记（9）- 编程的本质.md.html">038 编程范式游记（9）- 编程的本质</a>
|
||
</li>
|
||
<li>
|
||
|
||
<a href="/专栏/左耳听风/039 编程范式游记（10）- 逻辑编程范式.md.html">039 编程范式游记（10）- 逻辑编程范式</a>
|
||
</li>
|
||
<li>
|
||
|
||
<a href="/专栏/左耳听风/040 编程范式游记（11）- 程序世界里的编程范式.md.html">040 编程范式游记（11）- 程序世界里的编程范式</a>
|
||
</li>
|
||
<li>
|
||
|
||
<a href="/专栏/左耳听风/041 弹力设计篇之“认识故障和弹力设计”.md.html">041 弹力设计篇之“认识故障和弹力设计”</a>
|
||
</li>
|
||
<li>
|
||
|
||
<a href="/专栏/左耳听风/042 弹力设计篇之“隔离设计”.md.html">042 弹力设计篇之“隔离设计”</a>
|
||
</li>
|
||
<li>
|
||
|
||
<a href="/专栏/左耳听风/043 弹力设计篇之“异步通讯设计”.md.html">043 弹力设计篇之“异步通讯设计”</a>
|
||
</li>
|
||
<li>
|
||
|
||
<a href="/专栏/左耳听风/044 弹力设计篇之“幂等性设计”.md.html">044 弹力设计篇之“幂等性设计”</a>
|
||
</li>
|
||
<li>
|
||
|
||
<a href="/专栏/左耳听风/045 弹力设计篇之“服务的状态”.md.html">045 弹力设计篇之“服务的状态”</a>
|
||
</li>
|
||
<li>
|
||
|
||
<a href="/专栏/左耳听风/046 弹力设计篇之“补偿事务”.md.html">046 弹力设计篇之“补偿事务”</a>
|
||
</li>
|
||
<li>
|
||
|
||
<a href="/专栏/左耳听风/047 弹力设计篇之“重试设计”.md.html">047 弹力设计篇之“重试设计”</a>
|
||
</li>
|
||
<li>
|
||
|
||
<a href="/专栏/左耳听风/048 弹力设计篇之“熔断设计”.md.html">048 弹力设计篇之“熔断设计”</a>
|
||
</li>
|
||
<li>
|
||
|
||
<a href="/专栏/左耳听风/049 弹力设计篇之“限流设计”.md.html">049 弹力设计篇之“限流设计”</a>
|
||
</li>
|
||
<li>
|
||
|
||
<a href="/专栏/左耳听风/050 弹力设计篇之“降级设计”.md.html">050 弹力设计篇之“降级设计”</a>
|
||
</li>
|
||
<li>
|
||
|
||
<a href="/专栏/左耳听风/051 弹力设计篇之“弹力设计总结”.md.html">051 弹力设计篇之“弹力设计总结”</a>
|
||
</li>
|
||
<li>
|
||
|
||
<a href="/专栏/左耳听风/052 区块链技术 - 区块链的革命性及技术概要.md.html">052 区块链技术 - 区块链的革命性及技术概要</a>
|
||
</li>
|
||
<li>
|
||
|
||
<a href="/专栏/左耳听风/053 区块链技术 - 区块链技术细节 - 哈希算法.md.html">053 区块链技术 - 区块链技术细节 - 哈希算法</a>
|
||
</li>
|
||
<li>
|
||
|
||
<a href="/专栏/左耳听风/054 区块链技术 - 区块链技术细节 - 加密和挖矿.md.html">054 区块链技术 - 区块链技术细节 - 加密和挖矿</a>
|
||
</li>
|
||
<li>
|
||
|
||
<a href="/专栏/左耳听风/055 区块链技术 - 去中心化的共识机制.md.html">055 区块链技术 - 去中心化的共识机制</a>
|
||
</li>
|
||
<li>
|
||
|
||
<a href="/专栏/左耳听风/056 区块链技术 - 智能合约.md.html">056 区块链技术 - 智能合约</a>
|
||
</li>
|
||
<li>
|
||
|
||
<a href="/专栏/左耳听风/057 区块链技术 - 传统金融和虚拟货币.md.html">057 区块链技术 - 传统金融和虚拟货币</a>
|
||
</li>
|
||
<li>
|
||
|
||
<a href="/专栏/左耳听风/058 管理设计篇之分布式锁.md.html">058 管理设计篇之分布式锁</a>
|
||
</li>
|
||
<li>
|
||
|
||
<a href="/专栏/左耳听风/059 管理设计篇之配置中心.md.html">059 管理设计篇之配置中心</a>
|
||
</li>
|
||
<li>
|
||
|
||
<a href="/专栏/左耳听风/060 管理设计篇之边车模式.md.html">060 管理设计篇之边车模式</a>
|
||
</li>
|
||
<li>
|
||
|
||
<a href="/专栏/左耳听风/061 管理设计篇之服务网格.md.html">061 管理设计篇之服务网格</a>
|
||
</li>
|
||
<li>
|
||
|
||
<a href="/专栏/左耳听风/062 管理设计篇之网关模式.md.html">062 管理设计篇之网关模式</a>
|
||
</li>
|
||
<li>
|
||
|
||
<a href="/专栏/左耳听风/063 管理设计篇之部署升级策略.md.html">063 管理设计篇之部署升级策略</a>
|
||
</li>
|
||
<li>
|
||
|
||
<a href="/专栏/左耳听风/064 性能设计篇之缓存.md.html">064 性能设计篇之缓存</a>
|
||
</li>
|
||
<li>
|
||
|
||
<a href="/专栏/左耳听风/065 性能设计篇之异步处理.md.html">065 性能设计篇之异步处理</a>
|
||
</li>
|
||
<li>
|
||
|
||
<a href="/专栏/左耳听风/066 性能设计篇之数据库扩展.md.html">066 性能设计篇之数据库扩展</a>
|
||
</li>
|
||
<li>
|
||
|
||
<a href="/专栏/左耳听风/067 性能设计篇之秒杀.md.html">067 性能设计篇之秒杀</a>
|
||
</li>
|
||
<li>
|
||
|
||
<a href="/专栏/左耳听风/068 性能设计篇之边缘计算.md.html">068 性能设计篇之边缘计算</a>
|
||
</li>
|
||
<li>
|
||
|
||
<a href="/专栏/左耳听风/069 程序员练级攻略（2018）：开篇词.md.html">069 程序员练级攻略（2018）：开篇词</a>
|
||
</li>
|
||
<li>
|
||
|
||
<a href="/专栏/左耳听风/070 程序员练级攻略（2018）：零基础启蒙.md.html">070 程序员练级攻略（2018）：零基础启蒙</a>
|
||
</li>
|
||
<li>
|
||
|
||
<a href="/专栏/左耳听风/071 程序员练级攻略（2018）：正式入门.md.html">071 程序员练级攻略（2018）：正式入门</a>
|
||
</li>
|
||
<li>
|
||
|
||
<a href="/专栏/左耳听风/072 程序员练级攻略（2018）：程序员修养.md.html">072 程序员练级攻略（2018）：程序员修养</a>
|
||
</li>
|
||
<li>
|
||
|
||
<a href="/专栏/左耳听风/073 程序员练级攻略（2018）：编程语言.md.html">073 程序员练级攻略（2018）：编程语言</a>
|
||
</li>
|
||
<li>
|
||
|
||
<a href="/专栏/左耳听风/074 程序员练级攻略：理论学科.md.html">074 程序员练级攻略：理论学科</a>
|
||
</li>
|
||
<li>
|
||
|
||
<a href="/专栏/左耳听风/075 程序员练级攻略（2018）：系统知识.md.html">075 程序员练级攻略（2018）：系统知识</a>
|
||
</li>
|
||
<li>
|
||
|
||
<a href="/专栏/左耳听风/076 程序员练级攻略（2018）：软件设计.md.html">076 程序员练级攻略（2018）：软件设计</a>
|
||
</li>
|
||
<li>
|
||
|
||
<a href="/专栏/左耳听风/077 程序员练级攻略（2018）：Linux系统、内存和网络.md.html">077 程序员练级攻略（2018）：Linux系统、内存和网络</a>
|
||
</li>
|
||
<li>
|
||
|
||
<a href="/专栏/左耳听风/078 程序员练级攻略（2018）：异步IO模型和Lock-Free编程.md.html">078 程序员练级攻略（2018）：异步IO模型和Lock-Free编程</a>
|
||
</li>
|
||
<li>
|
||
|
||
<a href="/专栏/左耳听风/079 程序员练级攻略（2018）：Java底层知识.md.html">079 程序员练级攻略（2018）：Java底层知识</a>
|
||
</li>
|
||
<li>
|
||
|
||
<a href="/专栏/左耳听风/080 程序员练级攻略（2018）：数据库.md.html">080 程序员练级攻略（2018）：数据库</a>
|
||
</li>
|
||
<li>
|
||
|
||
<a href="/专栏/左耳听风/081 程序员练级攻略（2018）：分布式架构入门.md.html">081 程序员练级攻略（2018）：分布式架构入门</a>
|
||
</li>
|
||
<li>
|
||
|
||
<a href="/专栏/左耳听风/082 程序员练级攻略（2018）：分布式架构经典图书和论文.md.html">082 程序员练级攻略（2018）：分布式架构经典图书和论文</a>
|
||
</li>
|
||
<li>
|
||
|
||
<a href="/专栏/左耳听风/083 程序员练级攻略（2018）：分布式架构工程设计.md.html">083 程序员练级攻略（2018）：分布式架构工程设计</a>
|
||
</li>
|
||
<li>
|
||
|
||
<a href="/专栏/左耳听风/084 程序员练级攻略（2018）：微服务.md.html">084 程序员练级攻略（2018）：微服务</a>
|
||
</li>
|
||
<li>
|
||
|
||
<a href="/专栏/左耳听风/085 程序员练级攻略（2018）：容器化和自动化运维.md.html">085 程序员练级攻略（2018）：容器化和自动化运维</a>
|
||
</li>
|
||
<li>
|
||
|
||
<a href="/专栏/左耳听风/086 程序员练级攻略（2018）：机器学习和人工智能.md.html">086 程序员练级攻略（2018）：机器学习和人工智能</a>
|
||
</li>
|
||
<li>
|
||
|
||
<a href="/专栏/左耳听风/087 程序员练级攻略（2018）：前端基础和底层原理.md.html">087 程序员练级攻略（2018）：前端基础和底层原理</a>
|
||
</li>
|
||
<li>
|
||
<a class="current-tab" href="/专栏/左耳听风/088 程序员练级攻略（2018）：前端性能优化和框架.md.html">088 程序员练级攻略（2018）：前端性能优化和框架</a>
|
||
|
||
</li>
|
||
<li>
|
||
|
||
<a href="/专栏/左耳听风/089 程序员练级攻略（2018）：UIUX设计.md.html">089 程序员练级攻略（2018）：UIUX设计</a>
|
||
</li>
|
||
<li>
|
||
|
||
<a href="/专栏/左耳听风/090 程序员练级攻略（2018）：技术资源集散地.md.html">090 程序员练级攻略（2018）：技术资源集散地</a>
|
||
</li>
|
||
<li>
|
||
|
||
<a href="/专栏/左耳听风/091 程序员面试攻略：面试前的准备.md.html">091 程序员面试攻略：面试前的准备</a>
|
||
</li>
|
||
<li>
|
||
|
||
<a href="/专栏/左耳听风/092 程序员面试攻略：面试中的技巧.md.html">092 程序员面试攻略：面试中的技巧</a>
|
||
</li>
|
||
<li>
|
||
|
||
<a href="/专栏/左耳听风/093 程序员面试攻略：面试风格.md.html">093 程序员面试攻略：面试风格</a>
|
||
</li>
|
||
<li>
|
||
|
||
<a href="/专栏/左耳听风/094 程序员面试攻略：实力才是王中王.md.html">094 程序员面试攻略：实力才是王中王</a>
|
||
</li>
|
||
<li>
|
||
|
||
<a href="/专栏/左耳听风/095 高效学习：端正学习态度.md.html">095 高效学习：端正学习态度</a>
|
||
</li>
|
||
<li>
|
||
|
||
<a href="/专栏/左耳听风/096 高效学习：源头、原理和知识地图.md.html">096 高效学习：源头、原理和知识地图</a>
|
||
</li>
|
||
<li>
|
||
|
||
<a href="/专栏/左耳听风/097 高效学习：深度，归纳和坚持实践.md.html">097 高效学习：深度，归纳和坚持实践</a>
|
||
</li>
|
||
<li>
|
||
|
||
<a href="/专栏/左耳听风/098 高效学习：如何学习和阅读代码.md.html">098 高效学习：如何学习和阅读代码</a>
|
||
</li>
|
||
<li>
|
||
|
||
<a href="/专栏/左耳听风/099 高效学习：面对枯燥和量大的知识.md.html">099 高效学习：面对枯燥和量大的知识</a>
|
||
</li>
|
||
<li>
|
||
|
||
<a href="/专栏/左耳听风/100 高效沟通：Talk和Code同等重要.md.html">100 高效沟通：Talk和Code同等重要</a>
|
||
</li>
|
||
<li>
|
||
|
||
<a href="/专栏/左耳听风/101 高效沟通：沟通阻碍和应对方法.md.html">101 高效沟通：沟通阻碍和应对方法</a>
|
||
</li>
|
||
<li>
|
||
|
||
<a href="/专栏/左耳听风/102 高效沟通：沟通方式及技巧.md.html">102 高效沟通：沟通方式及技巧</a>
|
||
</li>
|
||
<li>
|
||
|
||
<a href="/专栏/左耳听风/103 高效沟通：沟通技术.md.html">103 高效沟通：沟通技术</a>
|
||
</li>
|
||
<li>
|
||
|
||
<a href="/专栏/左耳听风/104 高效沟通：好老板要善于提问.md.html">104 高效沟通：好老板要善于提问</a>
|
||
</li>
|
||
<li>
|
||
|
||
<a href="/专栏/左耳听风/105 高效沟通：好好说话的艺术.md.html">105 高效沟通：好好说话的艺术</a>
|
||
</li>
|
||
<li>
|
||
|
||
<a href="/专栏/左耳听风/106 加餐 谈谈我的“三观”.md.html">106 加餐 谈谈我的“三观”</a>
|
||
</li>
|
||
<li>
|
||
|
||
<a href="/专栏/左耳听风/107 结束语 业精于勤，行成于思.md.html">107 结束语 业精于勤，行成于思</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 布局所带来的一些负面的问题。主要是图像适配的问题，其中引出了一篇文章 "<a href="https://dev.opera.com/articles/native-responsive-images/">Native Responsive Images</a>" ，值得一读。</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>不同的目的会导致不同的决定。我并不希望上述的这些比较会让你进入 " 二选一 " 或是 " 三选一 " 的境地。我只是想通过这些文章让你知道这些框架的设计思路和实现原理，这些才是让你受益一辈子的事。</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>最后是 "State Architecture Patterns in React " 系列文章，非常值得一读。
|
||
<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&utm_medium=email&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.html">上一页</a>
|
||
</div>
|
||
<div style="float: right">
|
||
<a href="/专栏/左耳听风/089 程序员练级攻略（2018）：UIUX设计.md.html">下一页</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>
|