学习和工作中遇到的问题，以及容易忘记的知识点点滴滴，部分摘抄，如有侵权请告知。HTMLchapterCSSchapterbox-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盒子模型会改变四个边框阴影。边框阴影还可以设置透明度，看起来会很漂亮，也解决了没有透明度阴影和背景颜色一样的情况。框阴影：-1px02pxrgb(000,000,000,0.2),000rgb(000,000,000,0.2),1px02pxrgb(000,000,000,0.2),02px4pxRGB(000,000,000,0.2);浏览器渲染原理（不同浏览器大同小异）1、一般接受以8K为单位的请求内容，解析其中的HTML构建DOMTree（display:none元素不会被渲染）。CSS构建CSS规则树。2.结合DOM和CSS生成RenderTree。根据CSS2标准，树中的每个节点都变成一个盒子，有宽度、高度、边距、填充等属性。3.根据RenderTree，浏览器可以知道网页中的节点，关系或每个节点的样式或位置。最后由显卡绘制。Reflow和repaint回流：RenderTree中的一些元素大小和布局发生变化，需要重新构建页面，页面需要进行回流操作。重绘：RenderTree中元素外观等一些属性发生变化，不会影响布局，会触发重绘。减少回流DomTree的每个节点都有一个回流方法。一个节点的回流可能会触发其他节点的回流。回流是不可避免的，而且很难预测。1.要将多个样式操作合并为一个操作，您可以创建一个新的类选择器来添加这些样式。2.display:none不在Tree中，修改属性不会触发回流，可以先隐藏，再操作，再显示。3.DocumentFragment缓存操作，这个没听说过。4.位置设置为绝对或固定。像这样更改CSS将大大减少回流。5.不要使用表格布局。6.避免不必要的复杂CSS选择器，尤其是后代选择器！css3动画/*css3动画可以用css*//*1来写。setting*/@keyframesanimateName{/*这里是动画，0%可以设置动画初始状态*/0%{transform:translateX(0px);变换：旋转（0度）；不透明度：1；}50%{/*...这里是css代码*/}100%{/*...这里是css代码*/}}/*2。使用*/.someEle{/*缩写：动画名称执行时间延迟时间*/animation:animateName0.5s1.5s;/*全称animation-name:;animation-duration:;animation-delay:;用来保持动画在最后一帧动画的状态-fill-mode:forwards;*/}JavaScript判断变量是否为数组：（注意跨帧实例化的对象不共享原型）vara=[];a.constructor===数组；数组实例===真；instanceof用法：(objectinstanceofconstructor)用于检查参数对象的原型链上是否存在constructor.prototype，用于检测对象类型javascript继承/原型/工厂模式1.工厂模式抽象了流程创建对象并解决创建对象的问题。对于物体识别问题functioncreatePerson(name,age){varobj={};没有解决多个相似物体的问题obj.name=名称；obj.age=年龄；obj.info=function(){//...代码在这里}returnobj;}2。Prototype我们创建的每一个函数都有一个原型（prototype）属性，它是一个指向对象（prototypeobject）的指针，它允许所有对象实例共享属性和方法原型对象最初会默认获得constructor属性，这是一个指针针，指向prototype属性所在的函数3.几种继承方式原型链继承：此时属性有点像java中的static属性，没有个体区分functionSuper(name){this.name=姓名;}Sub.prototype=newSuper();Sub.prototype.constructor=Sub;借用构造函数：属性可以改成实例属性，但是函数重用太难functionSuper(name){this.name=name;}functionSub(name){Super.call(this,name);}组合继承：使用prototype实现方法重用，借用constructor实现每个实例都有自己的属性Sharecorrespondingvaluesfunctionobject(o){functionF(){}F.prototype=o;返回新的F()；}//ES5的newObject.create()方法规范了原型继承和寄生继承：组合继承会超类型构造函数两次，一次是创建子类型原型（new），一次是在子类型构造函数内部（调用）。最终实例上的属性会屏蔽掉原型中的同名属性，可以使用寄生继承方案：通过借用构造函数继承属性，通过原型链函数inheritPrototype(subType,superType)的混合形式继承方法{varprototype=Object(subType.prototype);//创建对象prototype.constructor=subType;//增强对象subType.prototype=prototype;//指定对象}functionSuperType(name){this.name=name;}functionSubType(name,age){Super.call(this,姓名）;this.age=age}inheritPrototype(SubType,SuperType);//这个例子的高效体现在只调用一次SuperType构造函数，原型链可以保持不变，可以正常使用instanceof。isPrototypeOf()thisscope这个对象是根据函数在运行时的执行环境绑定的。在全局函数中，它是window。当它作为对象的方法被调用时，this等于该对象。每个函数都会自动获取两个特殊的变量：arguments和this，内部函数搜索这两个变量时，只会搜索其活动对象所在的位置，所以在外部函数中是不可能直接访问这两个变量的。将外部作用域中的this对象保存在一个闭包中以便能够在访问的变量中，闭包可以访问该对象varobj={name:"inner",getName:function(){//这里的this指向obj//保存这个varthat=this;returnfunction(){//这里的this不能指向外部函数中的this//console.log(this.name)console.log(that.name);}}}箭头函数的this指向当前上下文，使用bind/apply是无效的，也可能导致Vue中的一些错误。有时在React中，为了方便在组件中绑定thisnew的含义1.创建一个新对象2.将这个新对象的__proto__指向构造函数的原型（即new创建对象的隐式原型指向构造函数的显式原型）。3.将构造函数的this指向这个新创建的对象（也就是把this指向这个新对象）。4.如果没有返回值或者非对象返回，则返回这个对象，否则返回这个返回的新对象。typeof避免XSS（可以理解为一种js注入，既然是注入，那么输入就需要标准化）XSS方法：a.注入出现在URL中，然后用服务器b返回给浏览器。此注入将存储在服务器端。1.避免使用eval，新的Function方法可以接受字符串形式的js代码。2、cookie的httpOnly可以防止js读取cookie。3、注意innerHTML、document.write方法。4、对用户输入的数据进行HTMLEntity编码。取消冒泡event.cancleBubble=true;这相当于全局取消事件冒泡。ajax实现的过程（原生js）//创建对象varhttp=newXMLHttpRequest();//设置请求详情http.open(method,url,true);//发送http.send();//传递事件判断请求处理结果并处理返回数据http.onreadystatechange=function(){if(http.readyState==4&&http.status==200){//http.responseText为返回字符串//codehere}}入口函数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版本好像是web资源少的时候先执行js入口函数。5.jq可以简写为$(function(){...})。Promise会先执行Promise中的方法。方法中会有resolve和result，相当于两个指针。当一个被执行时，相应的then或catch就会被触发。然后是一个函数，接受的参数通过resolve传入。onmouseover/enteronmouseover：移动到子元素会继续触发结束。onmouseenter：子元素不受影响。前端性能优化1.避免全局搜索，需要涉及作用域链上的搜索。2.避免使用with语句。with将创建自己的作用域并增加执行代码的作用域链的长度。with语句中的代码执行时间肯定会比外面的代码执行时间长。functiontest(){with(document.body){alert(tagName);innerHtml="你好";}}functiontest(){varbody=document.body;警报（body.tagName）；body.innerHtml="你好";}}3。算法复杂度的几个例子O(1):varvalue=10;arr[1];O(logn)：二分查找，总的执行时间与取值的个数有关，但不一定要得到每个值。O(n)：遍历数组中的元素。O(n^2)：每个值至少需要得到n次，比如插入排序。思路：可以设置一个复杂度高，多次使用的变量作为局部变量。4.优化循环：折旧迭代：优化循环体，简化终止条件：因为每次循环都会计算终止条件，然后和它比较。使用测试循环（do-while）后：5、扩展循环：循环不多的时候可以扩展循环次数，减少终止条件的判断。想法：达夫装置，每八次一起执行所有循环。variterations=Math.floor(values.length/8);varleftover=values.length&8;//处理多余的元素vari=0;/*用来处理多余的元素*/if(leftover>0){do{过程（值[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.jsnpm-S和npm-D1.-S--save,-D是--save-dev2.-save和save-dev可以省去你手动修改package.json文件的步骤。npminstallmodule-name-save自动将模块和版本号添加到dependencies部分，一般是项目开发到上线会用到的包npminstallmodule-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);//withcookies7res.header("Content-Type","application/json;charset=utf-8");next();});客户端使用axios：varparams=newURLSearchParams();params.append('用户名',"");params.append('密码',"");params.append('昵称',"");axios({method:"post",headers:{'Content-Type':'application/x-www-form-urlencoded;charset=utf-8',},url:"http://localhost:3000/users/登记”，data:params}).then().catch()是这样设置的，可以在请求的时候加上cookie
