Skip to content

Commit

Permalink
📝 add http
Browse files Browse the repository at this point in the history
  • Loading branch information
Copyes committed Mar 9, 2018
1 parent 4adb96e commit 822f9a5
Show file tree
Hide file tree
Showing 4 changed files with 81 additions and 2 deletions.
1 change: 1 addition & 0 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -8,3 +8,4 @@ A blog for learning knowledge
* [x] 2、[html&css 知识点总结](https://github.com/Copyes/Articles/blob/master/html%26css.md)
* [x] 3、[javascript 知识点总结](https://github.com/Copyes/Articles/blob/master/javascript.md)
* [x] 4、[原型和原型链的简单总结](https://github.com/Copyes/Articles/blob/master/prototype.md)
* [x] 5、[http 知识点总结](https://github.com/Copyes/Articles/blob/master/http.md)
18 changes: 16 additions & 2 deletions html&css.md
Original file line number Diff line number Diff line change
Expand Up @@ -196,6 +196,20 @@ body {

> BFC 的相关理解
块级格式化上下文,容器里面的子元素不会在布局上影响到外面的元素,反之也是如此(按照这个理念来想,只要脱离文档流,肯定就能产生 BFC)。

触发 BFC 的条件

* float 值不为 node
* overflow 值不为 visible
* position 值不为 relative 和 static
* display 值为 table-cell,table-caption, inline-block 中的任何一个

**相关 IFC**
内联格式化上下文,IFC 的 line box(线框)高度由其包含行内元素中最高的实际高度计算而来(不受到竖直方向的 padding/margin 影响)。

水平居中:当一个块要在环境中水平居中时,设置其为 inline-block 则会在外层产生 IFC,通过 text-align 则可以使其水平居中。垂直居中:创建一个 IFC,用其中一个元素撑开父元素的高度,然后设置其 vertical-align: middle,其他行内元素则可以在此父元素下垂直居中

> rem , em 和 px 的区别
在 CSS 中,em 和 rem 都属于灵活的单位,都会由浏览器根据实际情况转换成 px 值。
Expand Down Expand Up @@ -255,8 +269,8 @@ px 根据不同人理解是不同的。比如说设计师理解的 px 是设备
```css
@base: 46.875rem;
div {
width: 200/@base;
height: 200/@base;
width: 200 / @base;
height: 200 / @base;
}
```
移动端适配方案:
Expand Down
23 changes: 23 additions & 0 deletions http.md
Original file line number Diff line number Diff line change
Expand Up @@ -32,6 +32,29 @@

4》网络接口层:负责通过网络发送和接收 IP 数据报

##### DNS 查询过程

* 查找浏览器缓存
* 查找系统缓存
* 查找路由器缓存
* 查找 ISP DNS 缓存
* 递归从根域开始搜索

**耗时**

```js
let pt = window.performance.timeing
let dns = pt.domainLookupEnd - pt.domainLookuoStart
```

**优化建议**

* 控制域名数量,推荐是两个。
* 使用缓存 Last-Modified,If-Modified-Since,ETag,If-None-Match,Expires,Cache-Control。
* 使用 CDN,提高缓存命中率。
* 服务根据需要设置合理的 TTL。
* DNS 的预解析。

##### 缓存协商

**Last-Modified 与 If-Modified-Since**
Expand Down
41 changes: 41 additions & 0 deletions javascript.md
Original file line number Diff line number Diff line change
Expand Up @@ -135,3 +135,44 @@ Object.setPrototypeOf(Child.prototype, Father.prototype) // 将父类的原型
> JavaScript 内存泄漏
* 全局变量引起的内存泄漏

```js
function leaks() {
leak = 'xxxxxx' //leak 成为一个全局变量,不会被回收
}
```

* 闭包引起的内存泄漏

```js
var leaks = (function() {
var leak = 'xxxxxx' // 被闭包所引用,不会被回收
return function() {
console.log(leak)
}
})()
```

* dom 清空或删除时,事件未清除导致的内存泄漏

```html
<div id="container">
</div>
```

```js
$('#container')
.bind('click', function() {
console.log('click')
})
.remove() // 未把事件移除
```

* 子元素存在引用引起的内存泄漏

> AMD,CMD,CommonJs, ES6 module 各种模块规范
* AMD:requirejs 在推广过程中对模块定义的规范化产出,提前执行,推崇依赖前置
* CMD:seajs 在推广过程中对模块定义的规范化产出,延迟执行,推崇依赖就近
* CommonJs:模块输出的是一个值的 copy,运行时加载,加载的是一个对象(module.exports 属性),该对象只有在脚本运行完才会生成
* ES6 Module:模块输出的是一个值的引用,编译时输出接口,ES6 模块不是对象,它对外接口只是一种静态定义,在代码静态解析阶段就会生成。

0 comments on commit 822f9a5

Please sign in to comment.