宝丁
From 2017.8.20 To Author: winger/冉宁
在学习 #36 过程中，学习Babel如何将ES6代码转义成ES5代码
## 什么是HTTP劫持 想必，大家平时上网的时候，在网页的一脚有时候会出现一些小广告，有时候这些广告，不是访问的站点为了盈利而投放的广告，而是第三方的运营商提供的，类似这种：   ## HTTP劫持怎么做到的呢？ 一般来说 HTTP劫持主要通过下面几个步骤来做： * 标识HTTP连接。在天上飞的很多连接中，有许多种协议，第一步做的就是在TCP连接中，找出应用层采用了HTTP协议的连接，进行标识 * 篡改HTTP响应体，可以通过网关来获取数据包进行内容的篡改 * 抢先回包，将篡改后的数据包抢先正常站点返回的数据包先到达用户侧，这样后面正常的数据包在到达之后会被直接丢弃  第三个步骤可以通过抓包来看是否有两个回包以及通过与正常的回报时间进行对比可以得出是否被HTTP劫持的结论 ## HTTP劫持的手段有哪些呢？ 一般通用的方法都是插入静态脚本或者是HTML Content，或者是将整体替换成Iframe，然后再在顶层的Iframe上进行内容的植入 ## 如何防范HTTP劫持呢？ 根据对抗HTTP劫持的时机来分类，可以主要分为三类 * 事前加密 * 事中规避...
## 什么是CDN 给出一段 官方的介绍 > CDN的全称是Content Delivery Network ，即内容分发网络，是位于网络层和应用层之间的网络应用。 这个的目的是通过在先用的Internet中增加一层新的网络架构，能够通过分布式的服务器集群来改善internet上的服务质量，提高网站的承载能力和提升用户体验 ## CDN的作用 在了解CDN的作用之前，我们先说说看在传统互联网中存在的问题 ### 传输延迟 网站对用户的访问响应在网络上主要取决于三个部分： * 网站服务器接入internet的链路所能提供的带宽，也就是通常说的网站接入带宽 * 网络中从网站的接入点到最终用户的接入点之间的传输路径，由于internet是由很多网络组成的，所以这一部门经常是跨网络的，所以在网络中的传输延时和链路拥塞会影响数据的传输速度 * 最终用户接入internet的方式 ### 内容集中放置 在大部分情况下，现有网络上的内容都采用内容集中式放置，这样方便对网站的管理和维护，以及内容的更新，但是对于互联网的用户来说，他们是分布在全球的，所以他们很收当前的网络环境影响，访问效果也得不到保障 而且当特殊时期，如：开展活动等。突然导致访问量的剧增，那么就会导致网站的带宽资源的紧张，服务器的压力剧增。但如果平时的情况下，去扩展资源，增加机器，又会导致大量的资源浪费。 那么，CDN能解决什么问题呢？ CDN技术通过将网站的内容发布到最接近用户的网络“边缘”的方法，使用户可以就近取得所需的内容，解决网络拥塞的情况，提高了用户访问网站的响应速度。 而且CDN包括：分布式存储、负载均衡、网络请求的重定向和内容管理等几个部分组成，可以通过访问用户的来源和服务器负载等网络性能的分析，从而以更适合的方式来响应用户的请求 ##...
# 网络 ## 网络访问过程 * DNS解析 在用户在浏览器中输入了url（www.qq.com）之后，dns的解析步骤： * 首先会查看本地的host文件，有没有url和ip地址的对应关系，如果有，则直接用该映射关系 * 如果没有映射关系，那么会去查找本地DNS解析器的缓存，如果有，则走缓存 * 如果DNS解析器没有缓存，则会根据TCP/IP参数中设置的DNS首选服务器去请求，称之为本地DNS服务器，如果本地DNS服务器中有的话，则会返回ip地址 * 如果本地DNS服务器中没有缓存 * 如果不是转发模式，则会由本地的DNS服务器向根DNS服务器发送请求，根DNS服务器将会判断是由哪一台来管理，并会返回本地DNS服务器负责顶级DNS服务器的地址(qq.com),然后本地DNS服务器在会发送请求刀顶级DNS服务器，如果没有，则会返回一个下一级DNS服务器，直至找到url主机 * 如果是转发模式，此DNS服务器就会把请求转发至上一级DNS服务器，由上一级服务器进行解析，上一级服务器如果不能解析，或找根DNS或把转请求转至上上级，以此循环 * TCP连接  **TCP慢启动** 初始化的窗口数目一般为10个（运营商经验之谈）,10个TCP包的大小，单个RTT内传输数据上限是14KB，所以说，如果第一次创造连接的时候如果资源大小小于14KB，那么就只需要单个RTT时间 就可以得到数据  慢启动会有阀值  **链路复用！！** ...
## 常规策略 * 能不用图片就不用图片 透明、边框、圆角、阴影、渐变都可以用css来实现，而且svg和canvas、iconfont等再主流浏览器中的支持非常高 * 压缩 * 简单压缩，利用在线图片压缩网站 * 前端构建工具：gulp、webpack等 * CDN部署、合理的缓存设置、多尺寸的支持 * CDN的部署要求可以支持gzip的压缩 * 针对不同的图片类型设置不同的浏览器缓存时间 * 针对不同的设备尺寸、采用不同尺寸的图片大小 * 针对不同的网络情况，图片的大小不同，但也意味着很有可能失真 * 使用base64编码 > base64的编码都是按字符串长度，以每3个8bit的字符为一组，然后针对每组，首先获取每个字符的ASCII编码，然后将ASCII编码转换成8bit的二进制，得到一组3*8=24bit的字节,然后再将这24bit划分为4个6bit的字节，并在每个6bit的字节前面都填两个高位0，得到4个8bit的字节, 然后将这4个8bit的字节转换成10进制，对照Base64编码表，得到对应编码后的字符 但是将图片转成Base64编码的话，内嵌在css或者HTML中，存在的问题是转换为Base64编码的体积比原图体积还要大，通常我们只将小雨8KB的图片转换为Base64 * 合并精灵图 可以减少请求数，但是一旦加载失败，所有的图片都会展示失败...
* encodeURIComponent 需要传递参数时，需要用encodeURIComponent进行包裹，这样特殊参数不会被截断 * encodeURI 进行url跳转的时候可以用encodeURI进行包裹 * escape 用的较少，一般对数据就行处理 ``` escape不编码字符有69个：*，+，-，.，/，@，_，0-9，a-z，A-Z encodeURI不编码字符有82个：!，#，$，&，'，(，)，*，+，,，-，.，/，:，;，=，?，@，_，~，0-9，a-z，A-Z encodeURIComponent不编码字符有71个：!， '，(，)，*，-，.，_，~，0-9，a-z，A-Z ```
# webpack3之Scope Hoisting ## 介绍 在webpack2发布半年不到，webpack3又发布了，这次的发布版本虽然跨度比较大，但是不同于webpack2的升级，它对于向下的兼容性还是要好很多的，但是由于内部的突破性变化导致某些插件的使用，根据官方的数据表明，目前为止，至少98%的用户都没有遇到升级过程中不兼容的问题。 在这次升级中，有以下特性： * 作用域的提升(Scope Hoisting) * 魔法注释（Magic Comments） 我们在这篇文章中，主要的对象是作用域的提升**scope hoisting** 如果对于webpack前两个版本了解的同学，应该知道，在打包后的文件里面，每个模块都会被包装在一个单独的函数闭包中，这些闭包会导致你JS在浏览器中的执行速度变慢，并且会导致内存占用率增加，而另外的打包工具rollup则是将所有的模块包装在一个大的闭包中 所以在webpack3中增加了这个功能，我们可以在配置项中添加对应的配置来开启该功能 ``` module.exports = { // ... plugins: [ new webpack.optimize.ModuleConcatenationPlugin() ] } //...
https://github.com/css-modules/icss
URL的序列化代码 ``` var str = "https://www.google.com.hk:3000/search/cadsacd/hello/hrllo.html?q=jsbin&oq=jsbin&aqs=chrome..69i57j0l5.4360j0j7&sourceid=chrome&ie=UTF-8#12"; var reg = /^(?:([a-zA-Z]+):)?(\/{0,3})([a-zA-Z.\-0-9]+)(?::(\d+)\/)?(?:([^?]+))?(?:([^#]*))?(?:#(.*))?$/; var field = ['url', 'scheme', 'slash', 'host', 'port', 'path', 'query', 'hash']; var match = reg.exec(str); var obj = {}; field.forEach(function(item,...