blog
blog copied to clipboard
Pines-Cheng
技术博客
与桌面应用不同，网络应用不需要单独的安装过程：只需输入网址，便可启动和运行 - 这是网络的一个关键特色。不过，要做到这一步，**我们通常需要获取几十个（有时甚至是几百个）不同的资源，所有这些资源加起来的数据量高达几兆字节，并且必须在短短几百毫秒内汇聚起来，以实现我们想要达到的即时网络体验。** 在满足上述要求的前提下实现即时网络体验绝非易事，优化内容效率至关重要的原因就在于此：避免不必要的下载、通过各种压缩技术优化每个资源的传送编码以及尽可能利用缓存来避免多余的下载。 ## 文本编码和大小优化 除了避免不必要的资源下载，在提高网页加载速度上您可以采取的最有效措施就是，通过优化和压缩其余资源来最大限度减小总下载大小。 ### 优化资源 压缩冗余或不必要数据的最佳方法是将其全部消除。我们不能只是删除任意数据，但在某些环境中，我们可能对数据格式及其属性有内容特定了解，往往可以在不影响其实际含义的情况下显著减小负载的大小。 通用压缩程序（例如设计用于压缩任意文本的压缩程序）在压缩以上网页时可能同样可以取得相当不错的效果，但永远别指望它能去除注释、折叠 CSS 规则或者进行大量的其他内容特定优化。正因如此，预处理/源码压缩/环境感知优化才会成为功能如此强大的工具。 注：举个有说服力的例子，JQuery 内容库未压缩开发版本的大小现已接近大约 300KB。而压缩（移除注解等内容）后同一内容库的大小仅为原来的大约 1/3：大约 100KB。 ### Gzip [Gzip](https://en.wikipedia.org/wiki/Gzip) 是一种可以作用于任何字节流的通用压缩程序。它会在后台记忆一些之前看到的内容，并尝试以高效方式查找并替换重复的数据片段。（欲知详情，请参阅[浅显易懂的 GZIP 低阶说明](https://www.youtube.com/watch?v=whGwm0Lky2s&feature=youtu.be&t=14m11s&hl=zh-cn)。）GZIP 对基于文本的内容的压缩效果最好，在压缩较大文件时往往可实现高达 70-90% 的压缩率，而如果对已经通过替代算法压缩过的资产（例如，大多数图片格式）运行 GZIP，则效果甚微，甚至毫无效果。 | 内容库...
## 简介 > 本质都是为了解决异步action的问题 Redux Saga可以理解为一个和系统交互的常驻进程，其中，Saga可简单定义如下： ``` Saga = Worker + Watcher ``` saga特点： - saga的应用场景是复杂异步，如长时事务`LLT(long live transcation)`等业务场景。 - 方便测试，可以使用takeEvery打印logger。 - 提供`takeLatest/takeEvery/throttle`方法，可以便利的实现对事件的仅关注最近事件、关注每一次、事件限频 - 提供`cancel/delay`方法，可以便利的取消、延迟异步请求 - 提供`race(effects),[…effects]`方法来支持竞态和并行场景 - 提供channel机制支持外部事件 Redux Saga适用于对事件操作有细粒度需求的场景，同时他们也提供了更好的可测试性。...
Bloom Filter 是由 Bloom 在 1970 年提出的一种多哈希函数映射的快速查找算法。通常应用在一些需要快速判断某个元素是否属于集合，但是并不严格要求 100% 正确的场合。 它实际上是一个很长的二进制向量和一系列随机映射函数。布隆过滤器可以用于检索一个元素是否在一个集合中。它的优点是空间效率和查询时间都远远超过一般的算法，缺点是有一定的误识别率和删除困难。 Bloom Filter 是一种空间效率很高的随机数据结构，它利用位数组很简洁地表示一个集合，并能判断一个元素是否属于这个集合。Bloom Filter 的这种高效是有一定代价的：在判断一个元素是否属于某个集合时，有可能会把不属于这个集合的元素误认为属于这个集合（false positive）。因此，Bloom Filter 不适合那些“零错误”的应用场合。而在能容忍低错误率的应用场合下，Bloom Filter 通过极少的错误换取了存储空间的极大节省。 ## 适用场景 - 黑名单 - 爬虫重复URL检测 - 字典纠缠 - 磁盘文件检测...
ES7 引入的 async/await 是 JavaScript 异步编程的一个重大改进，提供了在不阻塞主线程的情况下使用同步代码异步访问资源的能力。 Chrome 55 中默认情况下启用异步函数（Async functions），坦率地讲，这个特性相当实用。 可以利用它们像编写同步代码那样编写基于 Promise 的代码，而且还不会阻塞主线程，还能够大大提高代码的可读性。 ## Async/Await 起源 早在 2012 年微软的 C# 语言发布 5.0 版本时，就正式推出了 Async/Await 的概念，随后在 Python 和 Scala 中也相继出现了 Async/Await...
了解通过网络收集资源的阶段至关重要。这是解决加载问题的基础，也是前端性能优化的关键点之一。 所有网络请求都被视为资源。通过网络对它们进行检索时，资源具有不同生命周期。[Resource Timing API](http://www.w3.org/TR/resource-timing) 为网络事件（如重定向的开始和结束事件, DNS查找的开始和结束事件, 请求开始, 响应开始和结束时间等）生成有 `高分辨率时间戳( high-resolution timestamps )` 的资源加载时间线, 并提供了资源大小和资源类型。 通过Resource Timing API可以获取和分析应用资源加载的详细网络计时数据, 应用程序可以使用时间度量标准来确定加载特定资源所需要的时间，比如 `XMLHttpRequest`、``、图片、或者脚本。 > 出于隐私保护的原因，在获得资源的 Resource Timing 详情时有 [跨域限制](http://www.w3.org/TR/resource-timing/#cross-origin-resources) 。 ## 请求生命周期 [Resource Timing...
> 翻译自：[How to Read the ECMAScript Specification](https://timothygu.me/es-howto/#navigating-the-spec) Ecmascript 语言规范 `The ECMAScript Language specification`（又名：Javascript 规范 `the JavaScript specification` 或 `ECMA-262`）是学习 JavaScript 底层工作原理的非常好的资源。 然而，这是一个庞大的专业文本资料，咋一眼看过去，大家可能会感到迷茫、恐惧，满怀激情却无从下手。 ## 前言 不管你是打算每天阅读一点 ECMAScript 规范，还是把它当成一个年度或者季度的目标，这篇文章旨在让你更轻松的开始阅读最权威的 JavaScript 语言参考资料。 ###...
神仙打架: [Maybe you don't need Rust and WASM to speed up your JS](https://mrale.ph/blog/2018/02/03/maybe-you-dont-need-rust-to-speed-up-your-js.html)
本文翻译自 Expo 的一篇博客：[You can now use Expo APIs in any React Native app](https://blog.expo.io/you-can-now-use-expo-apis-in-any-react-native-app-7c3a93041331)  > 注: 本文最初于 2019 年 2 月 28 日发布，随后于 2019 年 3 月 14 日更新，以反映 Workflow...
Javascript 代码的**解析**（Parse ）步骤分为两个阶段：[**词法分析**（Lexical Analysis）](https://en.wikipedia.org/wiki/Lexical_analysis)和 [**语法分析**（Syntactic Analysis）](https://en.wikipedia.org/wiki/Parsing)。这个步骤接收代码并输出 [抽象语法树](https://en.wikipedia.org/wiki/Abstract_syntax_tree)，亦称 AST。 随着 Babel 的生态越来越完善，我们通常会使用 Babel 来帮助我们分析代码的解析过程。Babel 使用一个基于 [ESTree](https://github.com/estree/estree) 并修改过的 AST，它的内核说明文档可以在 [这里]([https://github](https://github/). com/babel/babel/blob/master/doc/ast/spec. md) 找到。 在分析 Javascript 的 AST 过程中，借助于工具 [AST Explorer](http://astexplorer.net/) 能帮助我们对 AST...
> 主要摘自：《CSS 揭秘》一书 > “44 年前我们就把人类送上月球了，但现在我们仍然无法在 CSS 中 实现垂直居中。” > > ——James Anderson(https://twitter.com/jsa/ status/358603820516917249) 在 CSS 中对元素进行水平居中是非常简单的：如果它是一个行内元素， 就对它的父元素应用 `text-align: center;` 如果它是一个块级元素，就对它自身应用 `margin: auto`。然而如果要对一个元素进行垂直居中，可能光是想想就令人头皮发麻了。 长久以来，为了解决这一绝世难题，前端开发者们殚精竭虑，琢磨出了各种解决方法，可惜大多数并不实用。在本篇攻略中，我们将探索现代 CSS 的强大威力，以全新的思路去攻克各种场景下的垂直居中难题。请注意，有几种技巧十分流行，但在这里并不会深入探讨，原因如下： - 表格布局法(利用表格的显示模式)需要用到一些冗余的 HTML 元素，实现起来不够优雅简洁，因此这里不多介绍。...