学习工作中遇到的问题,和容易忘记的零碎知识,部分为摘抄,如若侵权,请告知。
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.οnlοad=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了