Chuck
- HTTP2 Server Push，一般用以服务器根据解析 index.html 同时推送 JPG/JS/CSS 等资源，而免了服务器发送多次请求。 - WebSocket，需要服务器与客户端手动编写代码实现全双工通信，WebSocket 在 HTTP 协议之上升级后才可用。
实现方式有 3 种： 1. 父元素设置宽度，子元素撑开，然后设置 padding-bottom 等属性撑开，没有高度的情况下以宽度百分比计算； 2. 通过 js 控制； 3. 使用 aspect-ratio 属性：aspect-ratio: 1 / 1;
## 布局 页面布局分为流式布局、浮动布局和绝对定位布局三种，而 BFC 属于流式布局。 ## 概念 Formatting context(格式化上下文) 是 W3C CSS2.1 规范中的一个概念。它是页面中的一块渲染区域，并且有一套渲染规则，它决定了其子元素将如何定位，以及和其他元素的关系和相互作用。 具有 BFC 特性的元素可以看作是隔离了的独立容器，容器里面的元素不会在布局上影响到外面的元素，并且 BFC 具有普通容器所没有的一些特性。 ## 触发 BFC - body 根元素（自身属于流式布局） - 浮动元素：float 除 none 以外的值 -...
## 白屏 浏览器开始渲染 标签或者解析完 标签的时刻就是页面白屏结束的时间点。也就是说从显示内容前的时间。 ```js 白屏 // 不兼容performance.timing 的浏览器，如IE8 window.pageStartTime = Date.now(); // 白屏时间结束点 window.firstPaint = Date.now(); ``` ### 可使用 Performance API 时 白屏时间 = firstPaint - performance.timing.navigationStart; ###...
```js function compose (middleware = []) { return function (context, next) { function dispatch (index) { let fn = middleware[index] if (index === middleware.length) fn = next if (!fn) return...
## XSS 跨站脚本攻击 ### 原理 XSS 是常见的 Web 攻击技术之一.所谓的跨站脚本攻击指得是:恶意攻击者往 Web 页面里注入恶意 Script 代码，用户浏览这些网页时，就会执行其中的恶意代码，可对用户进行盗取 cookie 信息、会话劫持等各种攻击。 ### 危害 1.盗取各类用户帐号，如机器登录帐号、用户网银帐号、各类管理员帐号 2.控制企业数据，包括读取、篡改、添加、删除企业敏感数据的能力 3. 盗窃企业重要的具有商业价值的资料 4.非法转账 5.强制发送电子邮件 6.网站挂马 7.控制受害者机器向其它网站发起攻击 ### 前端如何处理 - 过滤用户的输入信息，禁止用户在输入的过程中输入 "",...
## CDN 工作概述 客户端先检查本地是否有缓存以及缓存是否过期，如果过期，则像 CDN 边缘节点发起请求。CDN 边缘节点会检查用户请求数据的缓存是否过期，如果没有过期，直接响应用户的请求，完成一次 http 请求和响应。如果 CDN 缓存数据过期，那么还需要向源站发送回源请求（back to the source request），来拉取最新的数据。 CDN 的典型拓扑图如下：  ## CDN 层级划分 - 边缘层：CDN 中直接面向用户，负责给用户提供内容服务的 cache 设备直接部署在整个 CDN 网络的边缘位置。 - 中心层：负责全局的管理和控制，同时也拥有最多的...
1. Ajax 是理用 XMLHttpRequest 对象来请求数据的，而 Fetch是 window 的一个方法; 2. Ajax 基于原生的 XHR 开发，XHR 本身的架构不清晰，已经有了 fetch 的替代方案; 3. Fetch 比 Ajax 有着更好更方便的写法，它的 API 是基于 Promise 实现的，但不使用回调函数，对低版本浏览器不兼容; 4. Fetch 只对网络请求报错，对 404、500 都当做成功的请求，需要封装去处理;...
1. 减少操作系统端口资源消耗 PC总端口数为65536，那么一个TCP（http也是tcp）链接就占用一个端口。操作系统通常会对总端口一半开放对外请求，以防端口数量不被迅速消耗殆尽。 2. 过多并发导致频繁切换产生性能问题 一个线程对应处理一个http请求，那么如果并发数量巨大的话会导致线程频繁切换。而线程的上下文切换有时候并不是轻量级的资源。这导致得不偿失，所以请求控制器里面会产生一个链接池，以复用之前的链接。所以我们可以看作同域名下链接池最大为4～8个，如果链接池全部被使用会阻塞后面请求任务，等待有空闲链接时执行后续任务。 3. 避免同一客服端并发大量请求超过服务端的并发阈值 在服务端通常都对同一个客户端来源设置并发阀值避免恶意攻击，如果浏览器不对同一域名做并发限制可能会导致超过服务端的并发阀值被 BAN 掉。 4. 客户端良知机制 为了防止两个应用抢占资源时候导致强势一方无限制的获取资源导致弱势一方永远阻塞状态。
- 更方便 CDN 缓存 - 突破浏览器并发限制 - 节省 cookie 带宽（涉及用户登录时才会用到 cookie） - 节省主域名连接数 域名发散作为网络性能优化手段之一，并不是说越多域名越好，因为 DNS 解析域名也会有开销。而且因为很多网站采用的是 https 协议，需要安装更多的证书，不利于快速部署。