blog
blog copied to clipboard
creeperyang
前端博客，关注基础知识和性能优化。
本文是大名鼎鼎的雅虎前端优化规则（**Yslow**）的翻译。翻译并不逐字逐句，部分难以逐字翻译的被意译了，另外一些不重要的举例等也被精简。 原文： [Best Practices for Speeding Up Your Web Site](https://developer.yahoo.com/performance/rules.html)。 如何让web页面更快，雅虎团队实践总结了7类35条规则，下面一一列出。 ## 1. Content ### 1.1 Make Fewer HTTP Requests **Minimize HTTP Requests**减少/最小化 http 请求数。 到终端用户的响应时间80%花在前端：大部分用于下载组件（js/css/image/flash等等）。减少组件数就是减少渲染页面所需的http请求数。这是更快页面的关键。 减少组件数的一个方法就是简化页面设计。保持富内容的页面且能减少http请求，有以下几个技术： - Combined files。合并文件，如合并js，合并css都能减少请求数。如果页面间脚本和样式差异很大，合并会更具挑战性。...
工作，日常学习，阅读文章等过程中的问题记录，包括解决方案（如果有）或者相关探索。 **相关：** 1. 框架和库的使用问题 2. 浏览器相关问题（如调试） 3. 系统相关问题（如兼容性问题） 4. 各种工具（如 git）问题 5. ... **注意：** *由于水平有限，不保证100%正确，欢迎讨论，共同进步。*
这个issue试图阐述JavaScript这门语言的3个难点：**声明提升**、**作用域（链）**和**`this`**。 首先推荐https://github.com/getify/You-Dont-Know-JS，这是一本非常棒的JavaScript书籍，几乎所有的JS知识点都包括并且详细解释了。看一遍相信必有大收获。 ### 1. 声明提升 大部分编程语言都是先声明变量再使用，但在JS中，事情有些不一样： ``` js console.log(a); // undefined var a = 1; ``` 上面是合法的JS代码，正常输出`undefined`而不是报错`Uncaught ReferenceError: a is not defined`。为什么？就是因为声明提升（hoisting）。 #### 1.1 变量声明 参考：https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/var **语法：** ``` js var...
HTML与CSS相关问题
今天遇到并讨论了一个CSS相关的问题，很有意思，并更正了我的某些错误概念。想以问答的形式记录下，发现只有 [JavaScript问题集锦](https://github.com/creeperyang/blog/issues/2)，于是干脆就新开了一个issue，以后所有的HTML与CSS相关问题都记录在这里。
请相信，题目着重**简单**，没有撒谎，这篇博文的所有算法相关的内容都是简单的。 作为一个早把《数据结构》还给老师的非专业选手，博主也正在努力学习算法。这篇文章以题目为组织形式，算是一个学习笔记吧。
### 一、HashTable （哈希函数，哈希表的简单实现） 这一章节内容主要是 HashTable，中文即哈希表，散列表等等。HashTable 是编程中日常使用，不可或缺的一个数据结构，本章节最终会代码实现一个简单哈希表，来解释哈希表相关的重要概念。 对前端同学而言，哈希表是个每天用但说起来可能陌生的概念。说每天用，是因为在 JavaScript 中，对象（`{}`）的底层实现即哈希表，我们也经常用对象来做缓存等各种用法，利用其查找时间复杂度为 **O(1)** 的特性。 #### 1. 为什么需要 hash table （元素查找的时间复杂度） 对若干个元素（key-value对），如果我们想通过 key 来找到对应的 value，通常情况下，我们需要遍历所有元素，一一比较 key，来找到对应的 value。这个时间复杂度是 **O(n)** 。 然后我们假设这些元素是有序的，那么通过二分查找，时间复杂度可以降到 **O(log n)** 。 那么有没有更好的方法呢？这就是...
本文是对Node.js官方文档[The Node.js Event Loop, Timers, and `process.nextTick()`](https://nodejs.org/en/docs/guides/event-loop-timers-and-nexttick/)的翻译和理解。文章并不是一字一句严格对应原文，其中会夹杂其它相关资料，以及相应的理解和扩展。 相关资料： - [Node.js API: timer](https://nodejs.org/dist/latest-v6.x/docs/api/timers.html) - [stackoverflow NodeJS - setTimeout(fn,0) vs setImmediate(fn)](http://stackoverflow.com/questions/24117267/nodejs-settimeoutfn-0-vs-setimmediatefn) - [Concurrency model and Event Loop](https://developer.mozilla.org/en-US/docs/Web/JavaScript/EventLoop) ## 什么是事件循环（`Event loop`）？ Event loop是什么？...
浏览器的工作原理
> **这是[浏览器的工作原理：新式网络浏览器幕后揭秘（英文）](https://www.html5rocks.com/en/tutorials/internals/howbrowserswork/#Gradual_process)/[（中文）](https://www.html5rocks.com/zh/tutorials/internals/howbrowserswork/#The_browser_main_functionality)的阅读笔记。尽量精简原文章，方便回忆和复习相关概念。** > **十分推荐阅读原文（原文应该非常有名），这里只是自用的笔记和归纳～** # 浏览器的工作原理 ## 一、浏览器的结构 浏览器的主要组件为： - 用户界面 - 包括地址栏、前进/后退按钮、书签菜单等。除了浏览器主窗口（显示页面），其他部分都属于用户界面。 - 浏览器引擎 - 在用户界面和渲染引擎之间传送指令。 - **渲染引擎** - 显示（渲染）请求的内容。如果请求的内容是 HTML，它就负责解析 HTML 和 CSS 内容，并将解析后的内容显示在屏幕上。 - 网络 - 用于网络调用，比如...
什么是AMD（不是做显卡的:joy:）？如果不熟的话，`require.js`总应该比较熟。 AMD是_Asynchronous Module Definition_的缩写，字面上即异步模块定义。`require.js`是模块加载器，实现了AMD的规范。 本文想说的就是怎么实现一个类似`require.js`的加载器。但在这之前，我们应该了解下JS模块化的历史。 https://github.com/Huxpro/js-module-7day 这个Slides讲的比我好的多，所以想了解前端模块化的前世今生的可以去看看。这里简单总结下： **为什么需要模块化？** 1. Web Pages正在变成 Web App，应用越大那么代码也越复杂； 2. 模块化利于解耦，降低复杂性和提高可维护性； 3. 应用部署可以优化代码，减少http请求（避免多模块文件造成的多请求）。 **前端模块历史？** 1. 无模块，全局作用域冲突； 2. namespace封装，减少暴露给全局作用域的变量，本质是对象，不安全； 3. IIFE； 4. 添加依赖的IIFE，即模块化，也是现代模块化的基础； 但模块化还需要解决加载问题： 1. 原始的script tag，有难以维护，依赖模糊，请求过多的问题；...
在React中，状态管理方案除了 redux 还有很多，目前工作中主要用到其中的一种—— mobx，本篇文章主要关注 mobx 的实现机制和原理。 这里尝试从基本的概念开始，以问题的形式阐述。 ## observable 对象是什么？ observable 对象是什么，即 [API `observable(data) `](https://mobx.js.org/refguide/observable.html) 返回了什么？  从上图来看， 1. 首先我们可以确认把数据（`data`，普通的 JS 对象，API 支持 array/map/primitives 等等）转换成的 observable 对象（`ob`）本身也是一个普通 JS 对象； 2....