JS综合面试

1. 关于变量、函数提升、构造函数

     function Foo(){
            getName = function(){alert(1)} //当此函数执行时,覆盖全局getName
            return this;
       }
        Foo.getName = function(){alert(2)}
        Foo.prototype.getName = function(){alert(3)}
        var getName = function(){alert(4)} 
        function getName(){alert(5)} //变量提升被上面的赋值覆盖

        //写出下列输出结果
        Foo.getName() // 2
        getName() // 4
        Foo().getName() // 1
        getName() //1
        new Foo.getName() // 2 执行函数并创建一个实例
        new Foo().getName() // 3  执行Foo实例的方法 -->( (new Foo()).getName )()
        new new Foo().getName() // 3 同上 不过创建了一个Foo.prototype.getName实例

 2. 节流与防抖

/* 
        节流: 函数在规定的执行周期类 只有第一次触发的函数能被执行
        应用场景:需要频繁触发的函数 ,处于优化型角度
        @param:fn 要被执行的函数
        @param:delay 执行的时间周期
     */    
        function throttle(fn,delay){
            var lastTime = 0 //上一次函数执行的时间
            return function(){
                var nowTime = Date.now() //记录此刻的时间
                if(nowTime - lastTime > delay){
                    fn()
                    nowTime = lastTime
                }
            }
    /* 
        防抖: 函数在规定的执行周期类 只有第最后一次触发的函数能被执行
     */
    
        function debounce(fn,delay){
            var timer = null
            return function(){
                clearTimeout(timer)
                timer = setTimeout(function(){
                    fn.apply(this)
                },delay)
            }
        } 

 3. 实现跨域方式

//1.jsonp,利用script标签src实现跨域,仅支持get请求
            //注意:服务器返回的响应得是js代码(script才能识别)
            
            function fn(data){
                console.log(data)
            }
            //创建script标签
            const script = document.createElement(script)
            //设置src属性:请求的服务器地址
            script.src = http://localhost:3000/jsonp-server
            document.body.appendChild(script)
            
            /* 
                服务器端:
                app.all(request,response){
                    //要返回的数据
                    const data ={
                        a:1,
                        b:2
                    }
                    //将数据转为字符串
                    const str = JSON.stringfy(data)
                    //返回数据
                    response.end(`fn(${str})`)
                }
             
             */

 4.从url地址到最终页面渲染,经历了哪些阶段?

  1)DNS解析:将域名地址解析为ip地址

      -- 浏览器DNS缓存

      -- 系统DNS缓存

      -- 路由器DNS缓存

      -- 网络运营商DNS缓存

      -- 递归搜索:blog.baidu.com

        -- .com域名下查找DNS解析

        -- .baidu域名下查找DNS解析

        -- .blog域名下查找DNS解析

        -- 如果以上都找不到,出错

  2)TCP连接,TCP三次握手

      -- 第一次:浏览器发起,告诉服务器我要发送请求了

      -- 第二次:服务器发起,告诉浏览器我准备接收了,你发吧

      -- 第三次:浏览器发起,告诉服务器我马上就发,准备接收

  3)发送请求

      -- 请求报文,HTTP请求报文

  4)接收响应

      -- 响应报文

  5)渲染页面

      -- 遇见HTML标签,浏览器调用HTML解析器解析成Token并构建成dom树

      -- 遇见style/link标签,浏览器调用CSS解析器,处理css标记并构建cssom树

      -- 遇见script标签,调用JavaScript解析器,处理script代码(绑定事件,修改dom树/cssom树)

      -- 将dom树与cssom树合并为一棵渲染树

      -- 根据渲染树来计算布局,计算每个节点的几何信息(布局)

      -- 将各个节点颜色绘制到屏幕上(渲染)

  注意:这五个步骤一定按照顺序执行,如果dom树或cssom树被修改了,可能会执行多次布局和渲染。往往页面会执行多次这些步骤

  6)断开连接,TCP四次握手

      -- 第一次:浏览器发起,告诉服务器我的请求发送完了

      -- 第二次:服务器发起,告诉浏览器你的请求我已经接受完了

      -- 第三次:服务器发起,告诉浏览器我的响应发送完了,你准备关闭吧

      -- 第四次:浏览器发起,你的响应我已经接收完了,你关闭吧

 

JS综合面试

上一篇:通过Dapr实现一个简单的基于.net的微服务电商系统(十二)——istio+dapr构建多运行时服务网格


下一篇:HttpServletResponse写入的中文在浏览器乱码