前端复习笔记

个人笔记,有错必改,期待指出…

闭包
阮一峰闭包理解地址

 function fun() {
      let a = 123;
      var b = 567;
      function num() {
             a++;
             b++;
                     //a b 值会被缓存
      }
      return num();
    }
    fun()

    // function f1() {
    //   let n = 999;
    //   nAdd = function () { n += 1 }//此处nAdd没有var 是一个全局变量(一般函数中this指向window)
    //   function f2() {
    //     alert(n);
    //   }
    //   return f2;
    // }
    // var result = f1();
    // result(); // 999
    // nAdd();
    // result(); // 1000

///闭包是由函数和词法环境组成,特点有可以使用其他函数内部变量,内部变量被缓存,在执行结束后不会被垃圾回收机制清除,
///使用闭包注意 使用后手动清除变量
    // var name = "The Window";
    // var object = {
    //   name: "My Object",
    //   getNameFunc: function () {
    //     return function () {
    //       return this.name;//此处this指向window
    //     };
    //   }
    // };
    // console.log(object.getNameFunc())
    // alert(object.getNameFunc()());


    // var name = "The Window";
    // var object = {
    //   name: "My Object",
    //   getNameFunc: function () {
    //     console.log(this)//此处函数作为方法使用getNameFunc  this指向调用该方法的实例obj
    //     var that = this;
    //     return function () {//整个函数被return出到window 此时this指向window
    //       console.log(this)
    //       return that.name;
    //     };
    //   }
    // };
    // console.log(object.getNameFunc())
    // alert(object.getNameFunc()());

for循环与while循环区别?
一般情况可以等效代替的
区别在于:
for循环次数已知 ,小括号内定义变量只能在循环内使用 .是根据变量变化循环,一般用于有规律的重复操作中，如数组、对象等迭代
while 循环次数未知,初始表达式在外边定义 ,循环外循环内都可以使用 . 一般用于动态变量,当年特定条件的重复操作
控制语句:
break: 立即结束当前循环
continue: 结束当前循环剩下内容进行下次循环
浏览器工作原理
浏览器结构
对应博客

渲染过程
1. DOMTree的构建
1>第一步(解析) : 从网络或磁盘下读取html原始字节码,通过设置的charsest(字符集,比如utf-8),转化成相应字符(比如开发中字符

hello

)
2> 第二部(token化) : 通过词法分析器,将字符串解析成Token,Token中会标注出当前Token是开始标签还是结束标签或文本标签
3>第三步 (构建DOM树) : 浏览器会根据第二部里记录的所有开始标签/结束标签串联起来,构建DOM树
2. CSSOMTree的构建
CSSOM的生成过程和DOM的生成过程十分相似 1.解析，2.Token化，3.生成Nodes并构建CSSOMTree
CSSOMTree需要等到完全构建后才可以被使用，因为后面的属性可能会覆盖掉前面的设置。
官网解释 :
3. 渲染树的构建
DOM树上没一个节点对应着网页里每一个元素.CSSOM树上每一个节点对应着网页里每一个元素的样式,浏览器可以通过JavaScript操作DOM/CSSOM树,动态改变它的结构.但DOM/CSSOM树本身并不能用于排版和渲染, 浏览器会另外生成Render树
注意: Render树是浏览器排版引擎和渲染引擎的桥梁.是排版引擎的输出,渲染引擎的输入
4. 布局 :此时浏览器已经计算出了那些节点是可见的以及它的信息和样式,之后就是计算节点在设备窗口内位置和样式,这个过程是布局. 布局输出的是一个’盒模型’:将所有相对测量值都转换成屏幕上的绝对像素

  未构建完的CSSOMTree是不准确的，浏览器必须等到CSSOMTree构建完毕后才能进入下一阶段。 所以，CSS的加载速度与构建CSSOMTree的速度将直接影响首屏渲染速度，因此在默认情况下CSS被视为阻塞渲染的资源，需要将它尽早、尽快地下载到客户端，以便缩短首次渲染的时间。

在标签没有设置async/defer属性时，同理，JS也会可以修改CSS样式，影响CSSOMTree最终的结果. js会阻塞DOM的生成。如果JS试图在浏览器还未完成CSSOMTree的下载和构建时去操作CSS样式，浏览器会暂停脚本的运行和DOM的构建，直至浏览器完成了CSSOM的下载和构建。也就是说，JS脚本的出现会让CSSOM的构建阻塞DOM的构建。

浏览器性能
1>减少DOM的回流和重绘
1. 放弃传统dom操作,使用vue react的数据响应式框架mvvm /mvc/ virtual dom /dom diff/
2. 样式集中改变 :例如:向#box盒子中动态插入5个span，当前代码会引发5次回流. 优化思路：不是创建一个span就放置在页面中，而是把5个创建好，整体添加到页面中 .实例
3. 动画效果应用到position:absolute/fixed上(脱离文档流)
4. 基于transform修改元素样式:trabsform直接跳过render tree和layout阶段,直接把更改的样式告诉"合成线程:去渲染,不然会回流只会重绘,因为transform开启了渲染的硬件加速

1. 回流和重绘:传统操作DOM消耗性能的原因,DOM的回流(重排)和重绘.
回流: 页面布局或者几何信息发生改变, 浏览器可能需要重新计算DOM节点或者计算每个元素在设备视图上位置和大小,重新计算完成后,让浏览器重新渲染
1>回流必然发生重绘
2>页面第一次加载必然会有一次回流
3>DOM的样式发生改变,浏览器窗口大小或者视图发生改变
重绘:元素样式发生改变,几何信息和结构信息不变,此时只需要把改变的元素重新渲染即可,比如颜色 背景
为什么有时候在js中访问DOM时会报错?
因为浏览器在构建DOM树时候,遇到script或者link标签时候,会根据src对应地址去加载资源,在script里没有设置async/defer属性时候,这个加载过程是"下载并执行所有代码",此时DOM树还未完全构建完成,此时js访问script标签后面DOM元素时候,会报找不到改元素的错误
页面优化:
吧css文件放html文档中的前面引入,js文件在后面引入
配合理解
注意 : 当浏览器遇到一个script标签时，DOMTree的构建将被暂停，直至脚本执行完毕
JavaScript可以查询和修改DOMTree与CSSOMTree

参考博客

this指向

    // 总结 :谁调用指向谁;
    console.log('全局this', this);//全局变量this指向window
    function fun() {//一般函数中this指向window
      console.log('一般函数中this', this);

    }
    function Fun1() {//构造函数this指向等于 调用它的实例(new Fun1())的this指向,//此处是window
      console.log('构造函数中this',this)
      let arr = () => {//箭头函数作为一个对象的方法调用时候,this指向调用函数的对象指向
      console.log('箭头函数中this', this);
      };
      arr();
      fun();
    }
    new Fun1()

改变this指向call apply bind
call 的第一个参数是this指向，传参一次排后，//第一个参数传null this指向window///
返回:有指定this值和参数的函数的结果
apply 的第一个参数shithis指向，第二个参数是数组形式
bind 的第一个参数是this指向，传参一次排后，返回是新的函数 ，需要调用执行
返回: 返回一个原函数的拷贝，并拥有指定的 this 值和初始参数
//当使用new 调用时候bind的第一个参数无效
判断是否为NaN0

 isNaN(value);//es5
 // isNaN本意是通过Number方法把参数转换成数字类型，如若转换成功，则返回false，反之返回true，它只是判断参数是否能转成数字，不 能用来判断是否严格等于NaN。

 Number.isNaN(value);//es6
 //Number.isNaN()只有对于NaN才返回true，非NaN一律返回false。

Number.isFinite()//对于非数值一律返回false, 
///用来检查一个数值是否为有限的（finite），即不是Infinity。

display:none; opacity:0; visibility:hidden;

1>display:none;//元素隐藏并且不占位置, 
2>visibility:hidden;//元素隐藏占位置
3>opacity:0; //元素透明隐藏,有点击事件

文本溢出…

      text-overflow:ellipsis;
      overflow:hidden;
      white-space:nowrap;

重绘
需要计算生成dom树
绘流
不需要计算重新生成dom树
display：none
生成dom树时候都在 ，在渲染页面时候舍弃
visibility: hidden 在渲染页面之后隐藏不显示，只是占位置