今日学到了......(*^▽^*)

布灵布灵
259 阅读6分钟

前言：

本篇文章就是整理总结自己每日从不同的地方学到的知识点，方便以后阅读与查看，不喜勿喷，不喜勿进。之所以发出来呢，是因为学习需要仪式感，而我需要仪式感来督促自己，就是这么简单~

html/css知识点:

  • 1、Reflow（回流）和Repaint（重绘）:

首先我们要明白的是，页面的显示过程分为以下几个阶段：

1、生成DOM树(包括display:none的节点)

2、在DOM树的基础上根据节点的集合属性(margin,padding,width,height等)生成render树(不包括display:none，head节点，但是包括visibility:hidden的节点)

3、在render树的基础上继续渲染颜色背景色等样式

Reflow：当render树的一部分或者全部因为大小边距等问题发生改变而需要重建的过程，叫做回流。

reflow会影响到dom的结构渲染，同时会触发repaint，他会改变他本身与所有父辈元素(祖先)，这种开销是非常昂贵的，导致性能下降是必然的，页面元素越多效果越明显。

Repaint(重绘)：当诸如颜色背景等不会引起页面布局变化，而只需要重新渲染的过程叫做重绘。

repaint发生更改时，元素的外观被改变，且在没有改变布局的情况下发生，如改变outline,visibility,background color，不会影响到dom结构渲染。

通过上述定义，可以很明显看出，重绘的代价要比回流小，毕竟重绘只涉及样式的改变，不涉及到布局。

以上内容不是我本人写的~参考博客地址

  • 2、localStorage 与 sessionStorage 的区别:

我们都知道，html5提供两种新对象，通过js API 来存储本地数据，这两种对象就是 localStorage 与 sessionStorage 。

区别：sessionStorage中的数据，这些数据只有在同一个会话中的页面才能访问并且当会话结束后数据也随之销毁。因此sessionStorage不是一种持久化的本地存储，仅仅是会话级别的存储。而localStorage用于持久化的本地存储，除非主动删除数据，否则数据是永远不会过期的。

如何使用localStorage?

存值：

window.localStorage.setItem("key", JSON.stringify(value));

//以“key”为名称存储一个值“value”

取值：

var obj = JSON.parse(window.localStorage.getItem("key"));

//获取名称为“key”的值

那么，JSON.parse()与JSON.stringify()的区别又是什么呢？

比如：

JSON.stringify() 从一个对象中解析出字符串 ,一般用来存值

var obj={name:'梦云小小w'}

JSON.stringify(obj)

结果是：

'{"name":"梦云小小w"}'

JSON.parse() 从一个字符串中解析出json对象 ,一般用来取值

//定义一个字符串

var obj='{"name":"梦云小小w"}'

//解析对象

JSON.parse(obj)

结果是：

name:"梦云小小w"

补充：cookie:它的大小是受限制的，并且每次请求一个新的页面的时候存储的内容都会被发送给服务器，这样无形中浪费了带宽，另外cookie还需要指定的作用域，不可以跨域调用。如果在浏览器中设置了cookie的过期时间，cookie被保存在硬盘中，关闭浏览器后，cookie数据仍然存在，直到过期时间结束才消失。cookie的作用是与服务器进行交互。

  • 3、创建带有id属性的DOM元素有什么副作用:

答案：会创建同名的全局变量

如果一个元素拥有ID属性，那么ID属性的属性值就会成为window对象的属性名

例如：

<div id="box">梦云小小w</div>

alert(box.innerHTML); //=> '梦云小小w'

alert(window['box'].innerHTML); //=> '梦云小小w'

  • 4、link和@import的区别：

1）link是XHTML标签，无兼容问题；@import是在CSS2.1提出的，低版本的浏览器不支持。

2）link可以加载CSS，Javascript；@import只能加载CSS。

3）link加载的内容是与页面同时加载；@import需要页面网页完全载入以后加载。

  • 5、HTML5 中新增加的标签有哪些：

js知识点:

  • 1、局部变量与全局变量：

var a,b;
(function(){
    alert(a);   //undefined
    alert(b);   //undefined
    var a=b=666;
    alert(a);   //666
    alert(b);   //666
})();
alert(a);   //undefined
alert(b);   //666

解析：这是一个自执行函数，关键点在于var a=b=666;相当于var a=666;b=666;此时a是局部变量，而b是全局变量

  • 2、call、apply、bind：

var p1 = {
  name:'小明',
  age:'12',
  action:function(where,doing){
   console.log(this.age + '岁的'+this.name + '在' + where + doing);
  }  
}
var p2 = {
  name:'小红',
  age:'15'
}
console.log(p1.action.call(p2,'操场上','运动')) //15岁的小红在操场上运动

解析：使用call，就意味着要替换上下文，那么此时可以理解为将action方法执行的上下文改为p2，所以this会指向p2

call 、bind 、 apply 这三个函数的第一个参数都是 this 的指向对象，第二个参数差别就来了： call的参数是直接放进去的，第二第三第n个参数全都用逗号分隔，直接放到后面 obj.myFun.call(db,'成都', ... ,'string' )； apply的所有参数都必须放在一个数组里面传进去 obj.myFun.apply(db,['成都', ..., 'string' ]); bind除了返回是函数以外，它 的参数和call 一样。 当然，三者的参数不限定是string类型，允许是各种类型，包括函数 、 object 等等！    

  • 3、includes(), startsWith(), endsWith() ：

传统上，JavaScript 只有indexOf方法，可以用来确定一个字符串是否包含在另一个字符串中。ES6 又提供了三种新方法。

includes()：返回布尔值，表示是否找到了参数字符串。

startsWith()：返回布尔值，表示参数字符串是否在原字符串的头部。

endsWith()：返回布尔值，表示参数字符串是否在原字符串的尾部。

let s = 'Hello world!';

s.startsWith('Hello') // true
s.endsWith('!') // true
s.includes('o') // true

这三个方法都支持第二个参数，表示开始搜索的位置。

let s = 'Hello world!';

s.startsWith('world', 6) // true
s.endsWith('Hello', 5) // true
s.includes('Hello', 6) // false

上面代码表示，使用第二个参数n时，endsWith的行为与其他两个方法有所不同。它针对前n个字符，而其他两个方法针对从第n个位置直到字符串结束。

以上参考ECMAScript 6入门-阮一峰

  • 4、setTimeout()：

for(var i=0;i<5;++i){
    setTimeout(function(){
        console.log(i+ ' ');
    },100);
}       //5 5 5 5 5

解析：setTimeout() 是异步的，只有等到主线上的都执行完，才会执行异步的，此时i已经变成5。

vue知识点:

待续~

react知识点:

待续~

总结：

坚持就是胜利，每天学习一点点，离成功也就近一点点，加油~O(∩_∩)O哈哈~

avatar
文章
阅读
粉丝