Performance and Resilience: Stress-Testing Third Parties

https://csswizardry.com/2017/07/performance-and-resilience-stress-testing-third-parties/

对网页中嵌入的第三方资源（譬如字体、广告、CDN 服务等）进行性能调优与弹性容错可借助的工具：

1. Chrome - DevTools - Performance - Bottom-Up (Group by domain)，可以看到每个 domain 下资源进行加载、解析、渲染等的耗时；
2. Chrome - Network，对每条请求而言，右键可选择是否阻塞这条请求。通过这种方式可以看出当缺少某一项资源会对页面造成什么影响；
3. Charles，代理工具，可修改网络带宽，可调试不同网络状况下页面的加在状况；
4. Blackhole Server，服务器宕机的状况。WebPagetest 可模拟黑洞服务器，我们修改下 Host 就可以模拟页面依赖的资源所在的服务器宕机时页面的加载情况。对于阻塞渲染的资源（样式表与未 async / defer 的脚本），这种情况会导致页面白屏一段时间（浏览器判断超时要一点儿时间）。

通过上述工具可以发现页面存在哪些问题，然后开发者可以根据这些问题制定相应的解决方案，以避免页面在依赖的第三方资源出状况的时候失去服务。

Read More

算法不精也不熟，最先想到的总是最笨的方法，遍历，时间复杂度为 O(n²)。

后来 Google 一番，找到了 O(n) 的解决方案，很聪明（但也有种怎么也想不出来的感觉:cry:）。这个问题还有几个相关的问题：

1. 如何判断一个单向链表是否有环？
2. 若有，环的入口在何方？
3. 最后，环的长度与该单向链表的长度各是多少？

借记录故，我来各自解答一番。

Read More

面向对象编程（Object-Oriented Programming）是基于对象的一种编程范式（paradigm）。其有三个广为人知的特性，封装（Encapsulation）、继承（Inheritance）和多态（Polymorphism），让编程更灵活、可维护。常见的面向对象编程方式都是基于类（class）的，在 C++、Java 等高级语言中都以类的形式得到实现。

在 JavaScript（以下简称 JS）是基于对象的弱类型语言，并无类的概念，但其提供了原型机制，可用来支持面向对象编程。下面分别用 JS 实现 OOP 三大特性。

Read More

（任性决定以后英文一个月中文一个月交替！:smile:）

何为跨域

Web 站点众多，人心难测。当在访问未知站点时，我们无法确定其是否可信。如果该站点试图读取（譬如通过 ajax）我们在非同源站点如 gmail.com 的私人信息，这不仅侵犯了我们的隐私，同时也可能会损害我们的利益。为了避免此类安全问题的发生，用户代理（如浏览器）通常会遵循同源策略。

Read More

AMD (Asynchronous Module Definition)

AMD is a JavaScript specification that defines an API for defining code modules and their dependencies, and loading them asynchronously if desired.

The specification only defines a single function define.

1

define(id, dependencies, factory);

Read More

word-wrap - Overflow Wrapping

The overflow-wrap (aka word-wrap) property specifies whether the user agent may arbitrarily break within a word to prevent overflow when an otherwise-unbreakable string is too long to fit within the line box.

1. normal: Lines may break only at allowed break points. (Like whitespace)
2. break-word: An unbreakable word (a complete word) may be broken at arbitrary points if there are no otherwise acceptable break points in the line.
   Only work when the white-space property allows wrapping.

Read More