blog
blog copied to clipboard
Pines-Cheng
技术博客
可能你学会了如何使用 Webpack ，也大致知道其工作原理，可是你想过 Webpack 输出的 bundle.js 是什么样子的吗？ 为什么原来一个个的模块文件被合并成了一个单独的文件？为什么 bundle.js 能直接运行在浏览器中？ ### 简单工程打包 下面通过 Webpack 构建一个采用 CommonJS 模块化编写的项目，该项目有个网页会通过 JavaScript 在网页中显示 Hello,Webpack。 运行构建前，先把要完成该功能的最基础的 JavaScript 文件和 HTML 建立好，需要如下文件： 页面入口文件 index.html ```html ``` JS...
## RAIL 简介 RAIL 是一种以用户为中心的性能模型。每个网络应用均具有与其生命周期有关的四个不同方面，且这些方面以不同的方式影响着性能：  RAIL核心思想是以用户为中心；最终目标不是让您的网站在任何特定设备上都能运行很快，而是使用户满意。主要包含以下几个方面： - 立即响应用户；在 100 毫秒以内确认用户输入。 - 设置动画或滚动时，在 10 毫秒以内生成帧。 - 最大程度增加主线程的空闲时间。 - 持续吸引用户；在 1000 毫秒以内呈现交互内容。 ### 以用户为中心 让用户成为您的性能工作的中心。用户花在网站上的大多数时间不是等待加载，而是在使用时等待**响应**。下表是用户时间与用户反应的关系： | 延迟 | 用户反应 | |...
## 关键渲染路径与性能优化 从收到 HTML、CSS 和 JavaScript 字节到对其进行必需的处理，从而将它们转变成渲染的像素这一过程中有一些中间步骤，优化性能其实就是了解这些步骤中发生了什么， 即**关键渲染路径**。**优化关键渲染路径**是指优先显示与当前用户操作有关的内容。  通过优化关键渲染路径，我们可以显著缩短首次渲染页面的时间。 此外，了解关键渲染路径还可以为构建高性能交互式应用打下基础。 渲染一个网页，浏览器需要完成的步骤： 1. 处理 HTML 标记并构建 DOM 树。 2. 处理 CSS 标记并构建 CSSOM 树。 3. 将 DOM 与 CSSOM 合并成一个渲染树。...
HTTP/1 已经支撑我们走到今天，但是现代 Web 应用的需求迫使我们关注其设计缺陷。下面是它面临的一些比较重要的问题；这自然也是设计 HTTP/2 要解决的核心问题。 > 并没有“HTTP/1”这种专业术语;此处这一用法(还有 h1)，是对 HTTP/1.0 (RFC 1945)和 HTTP/1.1(RFC 2616)的简称。 ## 队头阻塞 浏览器很少只从一个域名获取一份资源。大多数时候，它希望能同时获取许多资源。设想这样一个网站，它把所有图片放在单个特定域名下。HTTP/1 并未提供机制来同时请求这些资源。如果仅仅使用一个连接，它需要发起请求、等待响应，之后才能发起下一个请求。 h1 有个特性叫 `管道化(pipelining)`，允许一次发送一组连续的请求，而不用等待应答返回。这样可以避免连接延迟。但是该特性只能按照发送顺序依次接收响应。而且，管道化备受互操作性和部署的各种问题的困扰，基本没有实用价值。 在请求应答过程中，如果出现任何状况，剩下所有的工作都会被阻塞在那次请求应答之后。这就是 [队头阻塞](https://en.wikipedia.org/wiki/Head-of-line_blocking) （Head-of-line blocking或缩写为HOL blocking），它会阻碍网络传输和 Web 页面渲染，直至失去响应。 为了防止这种问题，现代浏览器会针对单个域名开启 6...
## HTTP版本 在HTTP的发展过程中，出现了很多HTTP版本，其中的大部分协议都是向下兼容的。在进行HTTP请求时，客户端在请求时会告诉服务器它采用的协议版本号，而服务器则会在使用相同或者更早的协议版本进行响应。 ### HTTP/0.9 这是HTTP最早大规模使用的版，现已过时。在这个版本中 只有GET一种请求方法，在HTTP通讯也没有指定版本号，也不支持请求头信息。该版本不支持POST等方法，因此客户端向服务器传递信息的能力非常有限。 ### HTTP/1.0 这个版本是第一个在HTTP通讯中指定版本号的协议版本，HTTP/1.0至今仍被广泛采用，特别是在代理服务器中。 HTTP/1.0支持：GET、POST、HEAD三种HTTP请求方法。 ### HTTP/1.1 HTTP/1.1是当前正在使用的版本。该版本默认采用持久连接，并能很好地配合代理服务器工作。还支持以管道方式同时发送多个请求，以便降低线路负载，提高传输速度。 HTTP/1.1新增了：OPTIONS、PUT、DELETE、TRACE、CONNECT五种HTTP请求方法。 ### HTTP/2 这个版本是最新发布的版本，于今年5月（2015年5月）做HTTP标准正式发布。HTTP/2通过支持请求与相应的多路重用来减少延迟，通过压缩HTTP头字段将协议开销降到最低，同时增加了对请求优先级和服务器端推送的支持。 ## HTTP Method OPTIONS 方法用于确定 Web 服务器的一般功能，或者 Web 服务器处理特定资源的能力。 ### GET GET...
> 摘自 MDN web docs ## 简介 选择器是 CSS 规则的一部分且位于 CSS 声明块前。  选择器可以被分为以下类别： - `简单选择器（Simple selectors）`：通过元素类型、class 或 id 匹配一个或多个元素。 - `属性选择器（Attribute selectors）`：通过 属性 / 属性值 匹配一个或多个元素。 - `伪类（Pseudo-classes）`：匹配处于确定状态的一个或多个元素，比如被鼠标指针悬停的元素，或当前被选中或未选中的复选框，或元素是 DOM...
初学者对React可能满怀期待，觉得React可能完爆其它一切框架，甚至不切实际地认为React可能连原生的渲染都能完爆——对框架的狂热确实会出现这样的不切实际的期待。让我们来看看React的官方是怎么说的。React官方文档在Advanced Performanec这一节，这样写道： > One of the first questions people ask when considering React for a project is whether their application will be as fast and responsive as an equivalent non-React...
CDN详解
> 文章同步于Github [Pines-Cheng/blog](https://github.com/Pines-Cheng/blog/issues/18) ## 什么是CDN `CDN（内容分发网络）`全称是 `Content Delivery Network`，建立并覆盖在承载网之上、由分布在不同区域的边缘节点服务器群组成的分布式网络，替代传统以 `WEB Server` 为中心的数据传输模式。 作用是将源内容发布到边缘节点，配合精准的**调度系统**；将用户的请求分配至最适合他的节点，使用户可以以最快的速度取得他所需的内容，有效解决Internet网络拥塞状况，提高用户访问的响应速度。 ### CDN的基本工作过程 用户通过浏览器等方式访问网站的过程如图所示：  1. 用户在自己的浏览器中输入要访问的网站域名。 2. 浏览器向 **本地DNS服务器** 请求对该域名的解析。 3. 本地DNS服务器中如果缓存有这个域名的解析结果，则直接响应用户的解析请求。 4. 本地DNS服务器中如果没有关于这个域名的解析结果的缓存，则以递归方式向整个DNS系统请求解析，获得应答后将结果反馈给浏览器。 5. 浏览器得到域名解析结果，就是该域名相应的服务设备的 **IP地址**...
## 方法一：通过正则表达式进行替换 ```javascript //HTML标签转义（< -> <） function html2Escape(sHtml) { return sHtml.replace(/[&"]/g,function(c){ return {'':'>','&':'&','"':'"'}[c]; }); } ``` ## 方法二：通过 innerText 与 innerHTML 配合实现转换 这个实现原理是：innerText(textContent) 会获取纯文本内容，忽略 html 节点标签，而 innerHTML 会显示标签内容。 ### HTML...
## 把控制流变得易读 > 把条件、循环以及其他对控制流的改变做得越“自然”越好。运用一种方式使读者不用停下来重读你的代码。 ### ?:条件表达式（又名“三目运算符”） > 相对于追求最小化代码行数，一个更好的度量方法是最小化人们理解它所需的时间。 ### 避免do/while循环 我的经验是，do语句是错误和困惑的来源……我倾向于把条件放在“前面我能看到的地方”。其结果是，我倾向于避免使用do语句。 ### 从函数中提前返回 通常来讲提早返回可以减少嵌套并让代码整洁。“保护语句”（在函数顶部处理简单的情况时）尤其有用。 ### 最小化嵌套 > 当你对代码做改动时，从全新的角度审视它，把它作为一个整体来看待。 嵌套的代码块需要更加集中精力去理解。每层新的嵌套都需要读者把更多的上下文“压入栈”。应该把它们改写成更加“线性”的代码来避免深嵌套。 #### 通过提早返回来减少嵌套 #### 减少循环内的嵌套 在循环中，与提早返回类似的技术是continue： 与if(...)return;在函数中所扮演的保护语句一样，这些if(...) continue;语句是循环中的保护语句。 ### 你能理解执行的流程吗 然而在实践中，编程语言和库的结构让代码在“幕后”运行，或者让流程难以理解。 下面是一些例子：...