我的笔记
- CSS实现div的高度填满剩余空间
参考：https://www.cnblogs.com/yoyogis/p/4040513.html
// html
<div id="main">
<div id="nav">nav</div>
<div id="content">content</div>
</div>
// css
#nav {
background-color: #85d989;
width: 100%;
height: 50px;
}
#content {
background-color: #cc85d9;
width: 100%;
position: absolute;
// 重点是要top和bottom一起使用
top: 50px;
bottom: 0px;
left: 0px;
}
2.在页面渲染阶段对前端优化建议：
⭐建议将 CSS 文件放在页首，以便构建 DOM 树；而将 JavaScript 文件尽量放在页面下方，防止阻塞构建 DOM 树；而 JavaScript 的 onload 事件里，不要写太多影响首屏渲染的、操作 DOM 树的 JavaScript 代码。
⭐精简 JavaScript 和 CSS 代码，并进行代码压缩，使得css和js资源更快的下载
⭐编写高效的CSS代码
⭐重要的图片或者想让用户优先看到的图片使用img标签，次要的图片使用background引入
参考：https://www.cnblogs.com/jesse131/p/6215961.html
3.DNS解析全过程
DNS.png
4.浏览器渲染
MVC.png
5.TCP&DNS
从输入域名到最后呈现经历的过程：
域名解析 --> 发起TCP的3次握手 --> 建立TCP连接后发起http请求 --> 服务器响应http请求，浏览器得到html代码 --> 浏览器解析html代码，并请求html代码中的资源（如js、css、图片等） --> 浏览器对页面进行渲染呈现给用户 --> 四次挥手结束
三次握手，四次挥手.png
原文：https://blog.csdn.net/sinat_21455985/article/details/53508115
TCP DNS.jpg
6.跨域问题：解决跨域的三种方案
⭐只要 协议 、 域名 、 端口 有任何一个 不同, 都被当作是 不同 的域。
粗讲：https://www.cnblogs.com/itmacy/p/6958181.html
⭐⭐⭐精讲
https://blog.csdn.net/hansexploration/article/details/80314948
https://www.cnblogs.com/think-in-java/p/7285296.html?utm_source=itdadao&utm_medium=referral
<img>的src（获取图片），<link>的href（获取css），<script>的src（获取javascript）这三个都不符合同源策略，它们可以跨域获取数据。这里要介绍的JSONP就是利用<script>的src来实现跨域获取数据的。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script type="text/javascript">
// 得到航班信息查询结果后的回调函数
var flightHandler = function(data){
alert('你查询的航班结果是：票价 ' + data.price + ' 元，' + '余票 ' + data.tickets + ' 张。');
};
// 提供jsonp服务的url地址（不管是什么类型的地址，最终生成的返回值都是一段javascript代码）
var url = "http://flightQuery.com/jsonp/flightResult.aspx?code=CA1998&callback=flightHandler";
// 创建script标签，设置其属性
var script = document.createElement('script');
script.setAttribute('src', url);
// 把script标签加入head，此时调用开始
document.getElementsByTagName('head')[0].appendChild(script);
</script>
</head>
<body>
</body>
</html>
我们看到调用的url中传递了一个code参数，告诉服务器我要查的是CA1998次航班的信息，而callback参数则告诉服务器，我的本地回调函数叫做flightHandler，所以请把查询结果传入这个函数中进行调用。
OK，服务器很聪明，这个叫做flightResult.aspx的页面生成了一段这样的代码提供给jsonp.html
（服务端的实现这里就不演示了，与你选用的语言无关，说到底就是拼接字符串）：
flightHandler({
"code": "CA1998",
"price": 1780,
"tickets": 5
});
7.垂直居中
image.png
适用：通用，但在IE版本低于7时不能正常工作，demo
代码：
<div id="parent">
<div id="child">Content here</div>
</div>
#parent {position: relative;}
#child {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 50%;
height: 30%;
margin: auto;
}
⭐更多方法：
https://blog.csdn.net/liufeifeinanfeng/article/details/78615567
8.css容器固定宽高比
.wrapper{
padding-bottom: xx%;
height: 0;
width: 100%;
}
HTTP服务器，默认的端口号为80
HTTPS服务器，默认的端口号为443
Telnet默认端口号为23
FTP默认的端口号为21
浏览器渲染流程,以下哪个顺序是正确的?
1构建render树 2绘制render树 3布局render树 4解析HTML并构建DOM树
ans:4123
常见的对称加密算法有: DES、3DES、AES、Blowfish、IDEA、RC5
- 常见的Web攻击手段之CSRF攻击
https://www.jianshu.com/p/67408d73c66d
11.如果不给cookie设置过期时间，会默认在会话结束后过期
image.png
加法
加法操作符（+）的用法如下所示：
var result = 1 + 2;
如果两个操作符都是数值，执行常规的加法计算，然后根据下列规则返回结果：
如果有一个操作数是 NaN，则结果是 NaN；
如果是 Infinity 加 Infinity，则结果是 Infinity；
如果是-Infinity 加-Infinity，则结果是-Infinity；
如果是 Infinity 加-Infinity，则结果是 NaN；
如果是+0 加+0，则结果是+0；
如果是 - 0 加 - 0，则结果是-0；
如果是+0 加 - 0，则结果是+0。
不过，如果有一个操作数是字符串，那么就要应用如下规则：
⭐如果两个操作数都是字符串，则将第二个操作数与第一个操作数拼接起来；
⭐如果只有一个操作数是字符串，则将另一个操作数转换为字符串，然后再将两个字符串拼接
起来。
⭐如果有一个操作数是对象、数值或布尔值，则调用它们的 toString()方法取得相应的字符串值，然后再应用前面关于字符串的规则。对于 undefined 和 null，则分别调用 String()函数并取得字符串"undefined"和"null"。
减法
减法操作符（-）是另一个极为常用的操作符，其用法如下所示：
var result = 2 - 1;
与加法操作符类似，ECMAScript 中的减法操作符在处理各种数据类型转换时，同样需要遵循一些
特殊规则，如下所示：
如果两个操作符都是数值，则执行常规的算术减法操作并返回结果；
如果有一个操作数是 NaN，则结果是 NaN；
如果是 Infinity 减 Infinity，则结果是 NaN；
如果是-Infinity 减-Infinity，则结果是 NaN；
如果是 Infinity 减-Infinity，则结果是 Infinity；
如果是-Infinity 减 Infinity，则结果是-Infinity；
如果是+0 减+0，则结果是+0；
如果是+0 减-0，则结果是-0；
如果是0 减0，则结果是+0；
⭐如果有一个操作数是字符串、布尔值、null 或 undefined，则先在后台调Number()函数将其转换为数值，然后再根据前面的规则执行减法计算。
⭐如果转换的结果是 NaN，则减法的结果就是 NaN；
⭐ 如果有一个操作数是对象，则调用对象的 valueOf()方法以取得表示该对象的数值。如果得到的值是 NaN，则减法的结果就是 NaN。如果对象没有 valueOf()方法，则调用其 toString()方法并将得到的字符串转换为数值。
下面几个都会转化为0：
Number()
Number(0)
Number('')
Number('0')
Number(false)
Number(null)
Number([])
Number([0])
⭐NaN表示"not a number",JS中NaN定义与用法:
https://blog.csdn.net/superzhangshuo/article/details/60970755
var myObject = {
foo: "bar",
func: function() {
var self = this;
console.log(this.foo);
console.log(self.foo);
(function() {
console.log(this.foo);
console.log(self.foo);
}());
}
};
myObject.func();
/*
1.第一个this.foo输出bar，因为当前this指向对象myObject。
2.第二个self.foo输出bar，因为self是this的副本，同指向myObject对象。
3.第三个this.foo输出undefined，因为这个IIFE(立即执行函数表达式)中的this指向window。
4.第四个self.foo输出bar，因为这个匿名函数所处的上下文中没有self，所以通过作用
域链向上查找，从包含它的父函数中找到了指向myObject对象的self。
*/
this 对象是在运行时基于函数的执行环境绑定的：在全局函数中，this 等于 window，而当函数被作为某个对象的
方法调用时，this 等于那个对象。不过，匿名函数的执行环境具有全局性，因此其 this 对象通常指向 window。
var name = "The Window";
var object = {
name : "My Object",
getNameFunc : function(){
return function(){
return this.name;
}
}
};
alert(object.getNameFunc()()); //"The Window"（在非严格模式下）
以上代码先创建了一个全局变量 name，又创建了一个包含 name 属性的对象。这个对象还包含一
个方法——getNameFunc()，它返回一个匿名函数，而匿名函数又返回 this.name。由于 getNameFunc()
返回一个函数，因此调用 object.getNameFunc()()就会立即调用它返回的函数，结果就是返回一个
字符串。然而，这个例子返回的字符串是"The Window"，即全局 name 变量的值。
var name = 1;
var util = {
name: 2,
getName: function(){
return this.name;
},
sub: {
name: 3,
getName: function(){
console.log(this);
return this.name
}
}
}
var a = util.getName;
var b = util.sub;
console.log(a()); // 1 a的this为window，所以为window.name
console.log(util.getName()); // 2 util.name为2
console.log(b.getName()); // 3 // b的this为sub，sub.name = 3
console.log(util.sub.getName()); // 3 getName为sub的直接调用，所以也为sub.name
通常意义上this指针指向为最后调用它的对象。这里需要注意的一点就是如果返回值是一个对象，那么
this指向的就是那个返回的对象，如果返回值不是一个对象那么this还是指向函数的实例，例子如下：
function getName(){
this.name = 1;
return {}; // 返回对象
}
var a = new getName;
console.log(a.name); //undefined
function getName(){
this.name = 1;
return 2; // 返回非对象
}
var d = new getName;
console.log(d.name); //1
常见的请求头和相应头都有什么呢？
1)请求(客户端->服务端[request])
GET(请求的方式) /newcoder/hello.html(请求的目标资源) HTTP/1.1(请求采用的协议和版本号)
Accept: */*(客户端能接收的资源类型)
Accept-Language: en-us(客户端接收的语言类型)
Connection: Keep-Alive(维护客户端和服务端的连接关系)
Host: localhost:8080(连接的目标主机和端口号)
Referer: http://localhost/links.asp(告诉服务器我来自于哪里)
User-Agent: Mozilla/4.0(客户端版本号的名字)
Accept-Encoding: gzip, deflate(客户端能接收的压缩数据的类型)
If-Modified-Since: Tue, 11 Jul 2000 18:23:51 GMT(缓存时间)
Cookie(客户端暂存服务端的信息)
Date: Tue, 11 Jul 2000 18:23:51 GMT(客户端请求服务端的时间)
2)响应(服务端->客户端[response])
HTTP/1.1(响应采用的协议和版本号) 200(状态码) OK(描述信息)
Location: http://www.baidu.com(服务端需要客户端访问的页面路径)
Server:apache tomcat(服务端的Web服务端名)
Content-Encoding: gzip(服务端能够发送压缩编码类型)
Content-Length: 80(服务端发送的压缩数据的长度)
Content-Language: zh-cn(服务端发送的语言类型)
Content-Type: text/html; charset=GB2312(服务端发送的类型及采用的编码方式)
Last-Modified: Tue, 11 Jul 2000 18:23:51 GMT(服务端对该资源最后修改的时间)
Refresh: 1;url=http://www.it315.org(服务端要求客户端1秒钟后，刷新，然后访问指定的页面路径)
Content-Disposition: attachment; filename=aaa.zip(服务端要求客户端以下载文件的方式打开该文件)
Transfer-Encoding: chunked(分块传递数据到客户端）
Set-Cookie:SS=Q0=5Lb_nQ; path=/search(服务端发送到客户端的暂存数据)
Expires: -1//3种(服务端禁止客户端缓存页面数据)
Cache-Control: no-cache(服务端禁止客户端缓存页面数据)
Pragma: no-cache(服务端禁止客户端缓存页面数据)
Connection: close(1.0)/(1.1)Keep-Alive(维护客户端和服务端的连接关系)
Date: Tue, 11 Jul 2000 18:23:51 GMT(服务端响应客户端的时间)
在服务器响应客户端的时候，带上Access-Control-Allow-Origin头信息，解决跨域的一种方法。
javascript中实现跨域的方式总结
第一种方式：jsonp请求；jsonp的原理是利用<script>标签的跨域特性，可以不受限制地从其他域中加载资源，类似的标签还有<img>.
第二种方式：document.domain；这种方式用在主域名相同子域名不同的跨域访问中
第三种方式：window.name；window的name属性有个特征：在一个窗口(window)的生命周期内,窗口载入的所有的页面都是共享一个window.name的，每个页面对window.name都有读写的权限，window.name是持久存在一个窗口载入过的所有页面中的，并不会因新页面的载入而进行重置。
第四种方式：window.postMessage；window.postMessages是html5中实现跨域访问的一种新方式，可以使用它来向其它的window对象发送消息，无论这个window对象是属于同源或不同源。
第五种方式：CORS；CORS背后的基本思想，就是使用自定义的HTTP头部让浏览器与服务器进行沟通，从而决定请求或响应是应该成功还是应该失败。
第六种方式：Web Sockets；web sockets原理：在JS创建了web socket之后，会有一个HTTP请求发送到浏览器以发起连接。取得服务器响应后，建立的连接会使用HTTP升级从HTTP协议交换为web sockt协议。
17 float && absolute
⭐absolute是绝对脱离，设置了该属性的元素，将完全独立在文档流之外，不会对其他的元素产生任何影响
⭐float只是脱离了文档流的dom空间但是还占据着文字空间
⭐float会把浮动元素变成块级元素
https://segmentfault.com/a/1190000006041960
js七种数据类型：Sting Object null undefined Array Boolean Number
js五种基本类型：String Boolean Number null undefined
typeof六种返回格式：'string' 'number' 'object' 'function' 'boolean' 'undefined'
promise.then(() => {
...
return a ⭐then内部自动默认返回一个promise.resolve(a)
})
