cfour
cfour
- [使用 CSS 弹性盒子 - MDN](https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_Flexible_Box_Layout/Using_CSS_flexible_boxes) - [Flex 布局教程：语法篇](http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html) - [Flex 布局教程：实例篇](http://www.ruanyifeng.com/blog/2015/07/flex-examples.html) - [Flexbox Froggy - 一个用来学CSS flexbox的游戏](http://flexboxfroggy.com/#zh-cn) - [Flexbox playground](https://codepen.io/enxaneta/full/adLPwv) --- ### 概念 元素设置 `display: flex` 或 `display: inline-flex`...
### Reference - [单线程模型](http://javascript.ruanyifeng.com/advanced/single-thread.html) - [JavaScript 运行机制详解：再谈Event Loop](http://www.ruanyifeng.com/blog/2014/10/event-loop.html) - [浏览器环境概述](http://javascript.ruanyifeng.com/bom/engine.html) - [浏览器进程？线程？傻傻分不清楚！](http://imweb.io/topic/58e3bfa845e5c13468f567d5) ### 浏览器相关 - 每一个 Tab 都是浏览器的一个进程 同域名 Tab 之间可通过 [Web Storage API](https://developer.mozilla.org/zh-CN/docs/Web/API/Web_Storage_API/Using_the_Web_Storage_API) 进行 [跨标签通讯](http://web.jobbole.com/82225/) - Javascript 是单线程的，但浏览器是多线程的： -...
[文字编码的那些事](https://fed.renren.com/2017/11/11/text-encode/) ### 基础 #### [什么是位、字节、字、KB、MB](http://www.cnblogs.com/myseagull/archive/2008/08/09/1264131.html) > 位：“位(bit)”是电子计算机中最小的数据单位。每一位的状态只能是0或1。 > > 字节：8个二进制位构成1个“字节(Byte)”，它是存储空间的基本计量单位。1个字节可以储存1个英文字母或者半个汉字，换句话说：1个汉字占据2个字节的存储空间。 > > 字：“字”由若干个字节构成，字的位数叫做字长，不同档次的机器有不同的字长。例如一台8位机，它的1个字就等于1个字节，字长为8位。如果是一台16位机，那么，它的1个字就由2个字节构成，字长为16位。字是计算机进行数据处理和运算的单位。 > > KB：K表示1024，也就是2的10次方。1KB表示1K个Byte，也就是1024个字节。 > > MB：1MB = 220 Bytes = 1048576Bytes #### [为什么电脑数据一个字节是8位](https://www.guokr.com/question/542532/) > 所谓字节，原意就是用来表示一个完整的字符的。 > >...
[汤姆大叔的博客 - 深入理解JavaScript系列](http://www.cnblogs.com/TomXu/archive/2011/12/15/2288411.html) [js 中的活动对象 与 变量对象 什么区别？](https://www.zhihu.com/question/36393048) ### 作用域 (Scope) JavaScript 采用 **词法作用域 (Lexical Scoping)**，也就是静态作用域（与之相对的是动态作用域）。 函数的作用域在函数 **创建** 的时候就已确定，而不是 **调用** 的时候。 函数被调用时（进入上下文阶段），会复制创建函数时的作用域，并将当前函数局部作用域放到作用域链的顶层。 ### 作用域链 > Scope = AO + [[scope]]...
[深入理解JavaScript系列（19）：求值策略(Evaluation strategy)](http://www.cnblogs.com/TomXu/archive/2012/02/08/2341439.html) ### 引用传递 将引用地址 **直接** 传递给标识符 ``` js var foo = { a: 1, b: 2 } var bar = foo bar = { c: 3, d: 4 }...
> eval() 是魔鬼 ### 特性 将字符串变为可执行代码执行，同样能做到的这点的还有 `Function` `setTimeout` `setInterval`。 ### 缺陷 1. 开发者工具无法进行断点调试 2. 性能问题 现代浏览器有两种编译模式：fast path 和 slow path，fast path 用来编译稳定和可预测代码（stable and predictable），slow path 用来便于不可预测代码。 eval 的执行的字符串代码属于不可预测代码，使用 slow path...
- [Progressive Web Apps](https://developers.google.com/web/progressive-web-apps/) - [第一本 PWA 中文书 ](https://github.com/SangKa/PWA-Book-CN) - [浏览器缓存、CacheStorage、Web Worker 与 Service Worker](https://github.com/youngwind/blog/issues/113) - [PWA 在饿了么的实践经验](https://zhuanlan.zhihu.com/p/25800461) - [Web静态资源缓存及优化](https://juejin.im/post/5a098b5bf265da431a42b227) - [下一代 Web 应用模型 —— Progressive Web App](https://huangxuan.me/2017/02/09/nextgen-web-pwa/) - [饿了么的...
### XSS - Cross Site Script（跨站脚本） #### 非持久型 - 攻击方式 诱惑用户点击包含攻击脚本的链接 - 攻击场景 常见站点页面从 URL 查询或 hash 参数中取出内容，未做任何处理的情况下直接加入到页面内容，URL 中的查询或 hash 参数则可被注入 XSS 脚本。 - 防御方式 对非服务端获取的内容进行转义处理，比如 URL、form 表单等。 #### 持久型...
- [维基百科 - HTTP](https://zh.wikipedia.org/wiki/%E8%B6%85%E6%96%87%E6%9C%AC%E4%BC%A0%E8%BE%93%E5%8D%8F%E8%AE%AE) ### HTTP 协议 与 TCP/IP 协议之间的关系 HTTP 属于应用层协议，传输层使用 TCP 协议，在网络层使用 IP 协议。IP 协议主要解决网络路由和寻址问题，TCP 协议主要解决如何在 IP 层之上可靠的传递数据包，使在网络上的接收端收到发送端发出的所有包，并且收到顺序与发出顺序一致。 ### HTTP 的无状态特点 HTTP 协议是无状态的，意思是协议对于事务处理没有记忆功能。每次 HTTP 连接结束，等于生命的结束，再次建立连接就是一个新的生命诞生，之前生命的所有状态都要重新传送。 ### 短连接和长连接 HTTP...
CSS 盒模型
[盒子模型 - MDN](https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model) .png) *图片来源 - [MDN](https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model)* 盒模型由内向外依次是 content、padding、border、margin，分别有上下左右四个方向。 ### 标准 vs 怪异 - 标准盒模型下元素 css 宽度只应用于 content - 怪异盒模型元素 css 宽度包含 content + padding + border，主要体现在 IE 内核浏览器。 IE6...