学习工作中遇到的问题，和容易忘记的零碎知识，部分为摘抄，如若侵权，请告知。
HTML篇
CSS篇
box-sizing：
设置盒子模型为标准模式或者IE模式。属性有三个：
1.content-box：默认值，border和padding不计算到width。
2.padding-box：padding算入width。
3.border-box：border和padding都会算入width。
4.另外标准模式下，背景其实是包括边框的，可以使用background-clip来设置。
5.同理background-origin也可以设置背景图片的位置。
6.IE盒子模型会改变
四个边框阴影
边框阴影也可以设置透明度，这样看起来会很美观，而且还会解决没透明度会出现阴影和背景色一样的情况。
box-shadow: -1px 0 2px rgb(000, 000, 000, 0.2),
0 0 0 rgb(000, 000, 000, 0.2),
1px 0 2px rgb(000, 000, 000, 0.2),
0 2px 4px rgb(000, 000, 000, 0.2);浏览器渲染原理
(不同浏览器大同小异)
1.一般以8K单位接受请求的内容，并解析其中的HTML构建DOM Tree(display:none的元素不会渲染)。CSS构建CSS Rule Tree。
2.DOM，CSS合并生成Render Tree。根据CSS2标准，tree中每个节点都成为box，具有width，height，margin，padding等属性。
3.浏览器根据Render Tree可以知道网页中的节点，各节点的关系或样式或位置。最后通过显卡绘制出来。
回流(reflow)和重绘(repaint)
回流：Render Tree中一些元素尺寸布局等发生改变，页面需要重新构建，页面需要执行reflow操作。
重绘：Render Tree中一些元素外观一类的属性发生改变，不会影响布局，这会触发repaint。
减少reflow
Dom Tree的每个节点都有reflow方法，一个节点的reflow可能触发其他节点的reflow，reflow不可避免，难以预测。
1.将多次的样式操作合并到一次操作，可以新建一个类选择器，将这些样式添加进来。
2.display:none不在Tree中，修改属性不会触发回流，可以先隐藏再操作，再显示。
3.DocumentFragment缓存操作，这个还没听过。
4.position设置为absolute或fixed。这样改变CSS会大大减少reflow。
5.不要使用table布局。
6.避免不必要的复杂CSS选择器，尤其是后代选择器！
css3动画
/*css3动画可以在css中编写*/
/*1.设置*/
@keyframes animateName {
/*animate here,0%可以设置动画的初始状态*/
0%{
transform: translateX(0px);
transform: rotate(0deg);
opacity: 1;
}
50%{
/*...css code here*/
}
100%{
/*...css code here*/
}
}
/*2.使用*/
.someEle{
/*缩写： 动画名称 执行时间 延迟时间*/
animation: animateName 0.5s 1.5s;
/*全称
animation-name: ;
animation-duration: ;
animation-delay: ;
用来保持动画处于最后一帧的状态
animation-fill-mode: forwards;
*/
}JavaScript篇
判断变量是不是数组：
(注意跨frame实例化对象不共享原型)
var a=[];
a.constructor===Array;
a instanceof Array ===true;instanceof
用法：(object instanceof constructor)
用来检验constructor.prototype是否存在于参数object的原型链上，用于检测对象类型
javascript继承/原型/工厂模式
1.工厂模式
- 抽象了创建对象的过程,解决了创建多个相似对象的问题
对于对象识别问题并没有解决
function createPerson(name,age) { var obj = {}; obj.name=name; obj.age=age; obj.info=function() { // ...code here } return obj; }
2.原型
- 我们创建的每个函数都有prototype(原型)属性,它是一个指针,指向一个对象(原型对象),它可以使所有对象实例共享属性和方法
- 原型对象初始会默认取得constructor属性,它是一个指针,指向原型属性所在的函数
3.几种继承方法
原型链继承：此时属性有点像java中的静态属性,没有个体之分
function Super(name) { this.name=name; } Sub.prototype = new Super(); Sub.prototype.constructor = Sub;借用构造函数：可以将属性变为实例属性,但是函数复用捉襟见肘
function Super(name) { this.name=name; } function Sub(name) { Super.call(this,name); }- 组合继承：使用原型实现方法复用,借用构造函数实现每个实例有自己的属性
原型式继承：对传入的对象进行了浅复制,包含引用类型值得属性会共享相应的值
function object(o) { function F() {} F.prototype=o; return new F(); } // ES5新增Object.create()方法规范了原型式继承寄生式继承：组合继承会两次超类型构造函数,一次是创建子类型原型(new),一次是在子类型构造函数内部(call),最终实例上的属性会屏蔽原型中的同名属性,这是可以用寄生式继承解决：通过借用构造函数继承属性,通过原型链的混成形式来继承方法
function inheritPrototype(subType,superType){ var prototype = Object(subType.prototype); //创建对象 prototype.constructor = subType; //增强对象 subType.prototype = prototype; //指定对象 } function SuperType(name) { this.name=name; } function SubType(name,age) { Super.call(this,name); this.age = age } inheritPrototype(SubType,SuperType); // 这个例子的高效率体现在只调用了一次SuperType构造函数,同时原型链还能保持不变,可以正常的使用instanceof呵呵isPrototypeOf()
this作用域。
- this对象是在运行时基于函数的执行环境绑定的,全局函数中为window,被作为某个对象的方法调用时,this等于那个对象
- 每个函数执行时都会自动取得两个特殊变量：argumens和this,内部函数搜索这两个变量时只会搜索到其活动对象位置,所以不可能直接访问外部函数中的这两个变量
- 把外部作用域中的this对象保存在一个闭包能够访问的变量里,就可以让闭包访问该对象了
var obj = {
name:"inner",
getName:function() {
// 这里的this指向obj
// 保存this
var that = this;
return function() {
// 这里的this不能指向外部函数中的this
// console.log(this.name)
console.log(that.name);
}
}
}- 箭头函数的this指向当前上下文，而且使用bind/apply无效，在Vue中也可能会导致一些错误，React中有时则可以很方便的绑定组件中的this
new的意思
1.创建一个新对象
2.将这个新对象的__proto__指向构造函数的prototype(即将新创建对象的隐式原型指向构造函数的显示原型)。
3.将构造函数的this指向这个新创建的对象(即将this指向这个新对象)。
4.无返回值或非对象返回则返回这个对象，否则返回这个返回的新对象。
typeof
避免XSS
(可以理解为一种js注入，既然是注入就需要对输入进行规范)
XSS方式：a.注入出现在URL中，然后又随服务器返回到浏览器b.这个注入会存储在服务端。
1.避免使用eval，new Function方法可接受字符串形式的js代码。
2.cookie的httpOnly可以阻止js读取cookie。
3.注意innerHTML,document.write方法。
4.对用户输入的数据进行HTML Entity编码。
取消冒泡
event.cancleBubble=true;这种相当于全局取消事件冒泡。
ajax实现的过程(原生的js)
// 创建对象
var http = new XMLHttpRequest();
// 设置请求详情
http.open(method, url, true);
// 发送
http.send();
// 通过事件判断请求处理结果,处理返回的数据
http.onreadystatechange = function () {
if (http.readyState == 4 && http.status == 200) {
// http.responseText为返回的字符串
// code here
}
}入口函数
window.onload=function(){…}和$(document).ready(function(){…})
1.js中需要等待图片等所有元素加载完毕才会执行，jq中则是等待DOM结构绘制完成即可执行。
2.js这方法只能执行一个，jq编写多个入口函数，多个都会执行。
3.如果需要等待所有元素加载完毕则使用$(window).load(function(){…}),这个相当于js中的window.onload。
4.一些问题：jq3版本js入口函数总是会先执行。jq2版本是正常顺序，3版本好像在网页资源很少的时候js的入口函数就会先执行。
5.jq可简写为$(function(){…})。
promise
首先会执行Promise里的方法，方法里会有一个resolve和result，相当于两个指针，执行到一个就会触发相应的then或者是catch，then里是一个函数，接受的参数通过resolve传入。
onmouseover/enter
onmouseover:移动到子元素也会继续触发over。
onmouseenter:子元素不会影响。
前端性能的优化
1.避免全局查找，全局查找需要涉及作用域链上的查找。
2.避免使用with一句，with会创建自己的作用域，会增加执行代码的作用域链的长度，with语句中的代码的执行时间肯定会比外面的代码的执行时间长。
function test(){
with(document.body){
alert(tagName);
innerHtml="Hello";
}
}
function test(){
var body=document.body;
alert(body.tagName);
body.innerHtml="Hello";
}
}3.几个算法复杂度的例子
O(1):var value=10;arr[1];
O(log n):二分查找，总的执行时间和值得数量有关，但并不一定要获得的每个值。
O(n):遍历一个数组中的元素。
O(n^2):每个值至少需要获取n次，例如插入排序。
思路：可以将多次使用的一个复杂度高点的变量设为局部变量。
4.优化循环：
减值迭代：
优化循环体
简化终止条件：因为每次循环都会计算终止条件，然后和他比较。
使用后测试循环（do-while）：
5.展开循环：循环次数不多可以展开，减少了终止条件的判断。
思路：Duff装置，将所有循环按每八个一起执行。
var iterations = Math.floor(values.length/8);
var leftover = values.length&8;//处理多余的几个元素
var i=0;
/*用来处理多出来的几个元素*/
if(leftover>0){
do{
process(values[i++]);
}while(--leftover>0);
}
/*余下数量为8的倍数，不用担心下标越界*/
do{
process(values[i++]);
//...以下省略其余7个循环体
}while(--iterations>0);
/*简单的数组循环测试发现其实要慢很多*/6.避免双重解释:Function(),eval();
7.原生方法快点，switch语句快点，位运算符快点，var语句可以合并，迭代可以arr[i++]，只用一条语句创建数组或对象。
8.减少js和DOM的交互，可以判断event.target的nodeName来绑定事件，利用事件冒泡的机制减少循环绑定事件。
9.访问集合元素时使用局部变量，这样不用反复遍历作用域链？所以稍微快点，过多使用hover也会影响性能
onfoucus没有冒泡
可以使用onfoucusin。
浅拷贝深拷贝
参考变量的引用，深拷贝可以先创建一个空容器，然后向其中赋值实现拷贝。
node.js
npm -S和npm -D
1.
-
-S--save， -
-D是--save-dev
2.-save和save-dev可以省掉你手动修改package.json文件的步骤。
-
npm install module-name -save自动把模块和版本号添加到dependencies部分 ，一般是项目开发到上线都会用到的包 -
npm install module-name -save-dve自动把模块和版本号添加到devDependencies部分 ，一般是工具安装的使用
react跨域cookie
- 服务器端:
app.all('*', function (req, res, next) {
res.header("Access-Control-Allow-Origin", req.headers.origin); //需要显示设置来源
res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
res.header("Access-Control-Allow-Methods", "PUT,POST,GET,DELETE,OPTIONS");
res.header("Access-Control-Allow-Credentials", true); //带cookies7 res.header("Content-Type", "application/json;charset=utf-8");
next();
});- 客户端使用axios:
var params = new URLSearchParams();
params.append('username', "");
params.append('password', "");
params.append('nickname', "");
axios({
method: "post",
headers: {
'Content-Type': 'application/x-www-form-urlencoded; charset=utf-8',
},
url: "http://localhost:3000/users/register",
data: params
}).then().catch()这样设置，就可以在请求时加上cookie了
