前端你需要了解和知道的知识

太过爱你忘了你带给我的痛 2023-03-13 09:05 137阅读 0赞

## 1 . use strict严格模式是用来干什么的？严格模式和普通模式的区别 ##

**1 . 为什么用严格模式**

*  消除Javascript语法的一些不合理、不严谨之处，减少一些怪异行为;
 *  消除代码运行的一些不安全之处，保证代码运行的安全；
 *  提高编译器效率，增加运行速度；
 *  为未来新版本的Javascript做好铺垫。

同样的代码，在"严格模式"中，可能会有不一样的运行结果；  
一些在"正常模式"下可以运行的语句，在"严格模式"下将不能运行；

**1 . 全局变量显式声明**  
正常模式中，如果一个变量没有声明就赋值，默认是全局变量。严格模式禁止这种用法，全局变量必须显式声明。

"use strict";
    　　v = 1; // 报错，v未声明
    for(i = 0; i < 2; i++) {  // 报错，i未声明
    
    }

**2 . 禁止this关键字指向全局对象**

function f(){ 
    　　　　return !this;
    　　} 
    　　// 返回false，因为"this"指向全局对象，"!this"就是false
    function f(){  
    　　　　"use strict";
    　　　　return !this;
    　　} 
    　　// 返回true，因为严格模式下，this的值为undefined，所以"!this"为true。

**3 . 对象不能有重名的属性**  
正常模式下，如果对象有多个重名属性，最后赋值的那个属性会覆盖前面的值。严格模式下，这属于语法错误。

"use strict";
    　　var o = { 
    　　　　p: 1,
    　　　　p: 2
    　　}; // 语法错误

**4 . 函数不能有重名的参数**  
正常模式下，如果函数有多个重名的参数，可以用arguments\[i\]读取。严格模式下，这属于语法错误。

"use strict";
    　　function f(a, a, b) {  // 语法错误
    　　　　return ;
    　　}

## 2 . 输入HTTP地址到渲染成页面，中间发生了什么？ ##

用户输入URL后，向服务器端发起请求、如果顺利，得到网络响应之后，浏览器对资源进行解析、最后将其渲染到页面上。

**具体步骤为：**

1 . 首先构建请求

2 . 查找缓存，如果命中缓存，直接使用缓存资源

3 . 否则进行DNS解析，将域名转换成对应的IP地址

4 . 建立TCP连接

5 . 发送HTTP请求

6 . 如果顺利得到网络响应，浏览器开始解析和渲染

7 . HTML解释器 解析HTML 为 DOM树

8 . 同时CSS解释器 解析CSS文档 为 styleSheets

9 . 创建布局树，进行布局计算

10 . 整合图层，展示页面

有待补充，这里只是一点点，如果面试官就一个问题深挖，那基本就是懵逼

## 3 . HTML是怎么渲染的 ##

1 . 用户输入url地址，浏览器根据域名寻找IP地址

2 . 浏览器向服务器发送http请求，如果服务器段返回以301之类的重定向，浏览器根据相应头中location再次发送请求

3 . 服务器端接受请求，处理请求生成html代码，返回给浏览器，这时的html页面代码可能是经过压缩的

4 . 浏览器接收服务器响应结果，如果有压缩则首先进行解压处理，紧接着就是页面解析渲染

**解析渲染该过程主要分为以下步骤：**

1 . 解析HTML  
2 . 构建DOM树  
3 . DOM树与CSS样式进行附着构造呈现树  
4 . 布局  
5 . 绘制

## 4 . new一个对象过程中发生了什么 ##

1 . 创建一个新对象  
2 . this 指向这个新对象  
3 . 执行构造函数中的代码，即对 this 进行赋值  
4 . 最后隐式返回 this

function Person(name,age){ 
                this.name = name;
                this.age = age;
                // return this; 默认会隐式返回this
            }
            var person = new Person("xiaoming",20);

## 5 . 事件冒泡（IE微软）、事件捕获（网景） 和 事件委托 ##

**事件冒泡**：指事件传播顺序，从发生事件的元素节点到DOM树的根节点（通俗的说就是点击事件如果是在子元素上，但是子元素没有绑定事件，他就会一级一级的往更上一级的父元素上找，直到找到根节点上）  
**事件捕获**：与事件冒泡正好相反，指从DOM书的根节点到发生时间的元素节点（简单地说就是点击事件在父元素上，如果父元素没有绑定事件，就会一级一级往下面的子元素上找，直到找到最后一个子元素）  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwODkzMDM1_size_16_color_FFFFFF_t_70]  
事件冒泡例子：

<div id="did">父元素
        <p id="pid1">激活</p>
        <p id="pid2">取消</p>
        <p id="pid3">取消</p>
        <p id="pid4">取消</p>
        <p id="pid5">取消</p>
    </div>
    <body>
        <script>
            document.body.addEventListener("click",function(e){ 
                alert("取消");
            })
            //定义在body上的事件，即使点击子元素也会触发
            document.getElementById("pid1").addEventListener("click",function(e){ 
                e.stopPropagation();
                //取消事件冒泡，事件不会向上传播
                alert("激活");
            })
        </script>
    </body>

根据事件冒泡，例子2：

<div id="test">
            <p>1</p>
            <p>2</p>
            <p>3</p>
            <p>4</p>
            <p>5</p>
    </div>
    
        <script>
            var t = document.getElementById("test");
            t.addEventListener("click",function(event){ 
                var tar = event.target;
                //target 事件属性可返回事件的目标节点
                console.log(tar.innerHTML)
            })
        </script>

## 6 . !doctype的作用，做什么的 ##

< ! DOCTYPE> 声明必须是 HTML 文档的第一行，位于 标签之前。

< ! DOCTYPE> 声明不是 HTML 标签；它是指示 web 浏览器关于页面使用哪个 HTML 版本进行编写的指令。

## 7 . JS也可以实现CSS3的动画效果，为什么还要用CSS写呢？ ##

因为 JS 会损耗浏览器性能，而且他是单线程在处理动画的时候只会一个接一个，CSS渲染动画不占用JS的主线程

## 8 . css选择器的优先级 ##

1 . ！important 特殊性最高，详情访问重要性  
2 . 对于内联样式，加1000（行内样式，直接在标签上定义属性）  
3 . ID选择器，加0100  
4 . class类选择器，属性选择，伪类，加0010（伪类如：:link（点击前），:visited（点击后），:hover（悬浮））  
5 . 元素选择器，关系选择器，伪元素，加0001.  
6 . 结合符（div p） 和 通配符选择器（\*） 对特殊性没有任何贡献，0000

## 9 . type bar === 'object’来判断bar是否为对象的验证缺陷？ ##

因为，typeof null 也等于object ！  
所以可以使用((bar !== null) && (typeof bar ===“object”))来判断 //true

## 10 . new Data()获取的是什么时间？ ##

**获取系统当前时间**

var myDate = new Date() ; //获取系统当前时间
    myDate.getYear(); //获取当前年份(2位)
    myDate.getFullYear(); //获取完整的年份(4位,1970-????)
    myDate.getMonth(); //获取当前月份(0-11,0代表1月)
    myDate.getDate(); //获取当前日(1-31)
    myDate.getDay(); //获取当前星期X(0-6,0代表星期天)
    myDate.getTime(); //获取当前时间(从1970.1.1开始的毫秒数)
    myDate.getHours(); //获取当前小时数(0-23)
    myDate.getMinutes(); //获取当前分钟数(0-59)
    myDate.getSeconds(); //获取当前秒数(0-59)
    myDate.getMilliseconds(); //获取当前毫秒数(0-999)
    myDate.toLocaleDateString(); //获取当前日期
    myDate.toLocaleTimeString(); //获取当前时间
    myDate.toLocaleString( ); //获取日期与时间

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwODkzMDM1_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/2020051221055824.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwODkzMDM1,size_16,color_FFFFFF,t_70