Javascript必会的常用知识点

小灰灰 2021-07-25 13:15 433阅读 0赞

# 从网页中输入url后经历的过程 #

从网页中输入一个URL资源定位器后，到页面展示出来，一共经历了哪些过程。  
1） DNS解析，解析成一个IP地址。  
2） Tcp三次握手  
3） 接收返回信息，js html css img  
4） 解析返回的信息，查看js时间线部分内容  
5） 渲染过程，是渲染引擎做的事  
6） Tcp的四次挥手  
这个查看收藏的网址中前辈总结的，那个更详细。

# 浏览器的基本组成 #

1） 用户界面  
2） 浏览器引擎  
3） 渲染引擎  
4） 网络  
5） UI后端  
6） JS引擎  
7） 数据存储

# 渲染/渲染引擎/渲染过程 #

渲染：在电脑绘图中是指用软件从模型生成图像的过程。  
渲染引擎：其职责就是渲染，即在浏览器窗口中显示所请求的内容  
渲染过程：解析html从而构建DOM树——>CSS Rule树——>构建Render树——>布局Render树——>绘制Render树。

# 标准模式与混杂模式 #

在IE6诞生之前，浏览器发展比较封闭，兼容性不好，此时的模式为混杂模式，IE6诞生之后，各个浏览器厂商按照标准模式改进了浏览器，此时的模式为标准模式。

# 标准模式的写法 #

<!DOCTYPE html>
     <!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN” “http://www/w3.org/TR/html4/strict.dtd”>
     <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml/DTD/xhtml1-strict.dtd”>

Html页面中开头如果写了<!DOCTYPE html>,则代表页面是标准模式。否则就是混杂模式。
    在浏览器中判断当前是什么模式的方式就是：
    Document.compatMode.如果是标准模式，则结果就是css1compat
    Document.compatMode.如果是混杂模式，则结果就是backcompat

# label标签与input标签 #

Label标签与input标签的连接，是通过for属性，label中的for和input的id是一一对应的。这样就会让label和input绑定到一起了。

# 特性和属性 #

特性是属性的一部分，是先天就有的属性。  
获取特性值的方式可以是：元素.特性名，还可以进行修改特性值。  
对不是特性的属性的操作方式就是通过 setAttribute getAttribute 的方式进行处理。

# 图片的预加载和懒加载 #

图片预加载的思路就是：  
创建一个图片对象，图片加载完成的函数就是 img.οnlοad=function()\{\}  
创建图片的两种方式：

Var oImg = document.createElement(‘img’);
    Var oImg = new Image();

**图片预加载的处理方式：**

oImg.onload = function(){ 
    	var oDiv = document.getElementById(‘demo’);
     oDiv.appendChild(this);
    }
    oImg.src=”图片地址”;

**图片懒加载的思路就是：**  
监控滑轮事件，不断判断当前div的位置，采取预加载的方式，把图片正式添加到页面中

# Math.random()获取随机数 #

Math.random()获取随机数，\[0，1）的左闭右开区间随机数  
Math.random()\*(max-min)+min就可以获取到\[min,max）之间的随机数了。

# 文档碎片-虚拟DOM #

创建文档碎片的方式如下：

document.createDocumentFragment();

文档碎片并没有提高js的性能，以后的学习过程中会用到高级框架，里面会有虚拟DOM的一些操作，这些操作会提高js的性能。还可以通过字符串拼接的方式进行处理页面中内容的渲染。

# 封装getElementsByClassName()函数 #

Element.prototype.getElementsByClassName = Document.prototype.getElementsByClassName = function(
     _className) { 
    //获取document下面的所有标签
    var allDomArray = this.getElementsByTagName("*");
            var lastDomArray = [];
            function trimSpace(strClass) { 
            var reg = /\s+/g;
            var newStrClass = strClass.replace(reg, " ");
            return newStrClass;
           }
    for (var i = 0; i < allDomArray.length; i++) { 
       var lastStrClass = trimSpace(allDomArray[i].className).trim();
       var classArray = lastStrClass.split(" ");
       for (var j = 0; j < classArray.length; j++) { 
        if (classArray[j] == _className) { 
           lastDomArray.push(allDomArray[i]);
           break;
               }
              }
            }
            return lastDomArray;
          };
    console.log(document.getElementsByClassName("demo"));
    var oWrapper = document.getElementById("wrapper");
    console.log(oWrapper.getElementsByClassName("active"));

注意：document上面的元素是通过document原型链的方式获取的，所以this指向的是document,如果是从元素里面进行判断，比如id=’wrapper’这个，则需要用的是Element上的原型链的方式。

# JS中手动断点：debugger #

在js代码中手动打断点的方式如下：debugger