最近面试的一些思考，以及面试总结！！！

小刘是个技术菜
79 阅读6分钟
u=649690176,1329275076&fm=253&fmt=auto&app=138&f=JPEG.webp

持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第1天

emo了最近，从月初离职到现在，一直不停的投简历，到头来面试都木有几个，上班的时候一直想着离职一定要好好的玩几天，最起码下份工作一定要有一定的薪资涨幅，各种的“我以为”，到头来除了离职当天收到过一个offer之外，就再也没有收到过一个offer，当时还觉得找工作也没这么难啊，我这不就无缝衔接了嘛？？

然而我没有想到这是我这个月唯一的offer，我感觉我就是一个纯纯的大怨种，当然这种情况也就我这种菜鸟能够遇到，最难受的是明明都给腾讯会议号了，突然通知我新发布的面试名单里木有我的名字。。。。。

u=3093729269,789261448&fm=253&fmt=auto&app=120&f=JPEG.jpg 言归正传，总结一下这个月遇到的面试题吧，也就是大体整理一下，没啥顺序可言。。。。

一、js页面的声明周期

  1. DOMContentLoaded事件---在这个事件中浏览器已经完成了HTML的加载，构建了DOM，但是并没有获取到图片资源

  2. load事件---当整个页面包括样式、图片和其他资源被加载完成时，会触发 window 对象上的 load 事件， 当页面未加载完成时，script 标签如果在文档上，js 脚本中将无法获取到元素，可以通过 onload 事件等文档元素加载完成再使用

  3. beforeunload 事件---如果访问者触发了离开页面的导航或试图关闭窗口，beforeunload 事件将会触发

  4. unload 事件---unload 事件会在文档卸载完成后触发

  5. readyState 状态

document.readyState 属性提供当前加载状态的信息

  • loading —— 文档正在被加载
  • interactive —— 文档被全部读取
  • complete —— 文档被全部读取，并且所有资源（例如图片等）都已加载完成
  1. resize 事件

window.onresize = function(){}当浏览器窗口被缩放到新的高度或者宽度时，会触发 resize 事件 这个事件在 window 上触发，需要通过在 window 或者 body 上添加 onresize 事件来指定事件处理程序

  1. error 事件
  • 在 window 上，当 js 脚本报错时触发
  • 在 img 元素上，当无法加载指定图片时触发
  • 在元素对象上，无法加载对应对象时触发
  • 在多窗口下，一个或多个窗口无法完成加载时触发

二、async和defer的区别

  • 相同点，两个都会延迟加载页面，在js，css脚本下载完之后用户才能看到页面内容
  • 不同点：defer脚本按照文档顺序加载，async会在页面中随机加载脚本，哪个先下载完哪个先加载

三、em，rem，vw，vh之间的区别

  1. em：在做手机端的时候经常会用到的做字体的尺寸单位 说白了 em就相当于“倍”，比如设置当前的div的字体大小为1.5em，则当前的div的字体大小为：当前div继承的字体大小*1.5，em是相对于自身元素来定义的

  2. rem：相对于html根元素的font-size计算而来，因为所有单位是rem单位的元素的基础值都是同一个，所以计算比较方便，也不会出现em单位的那种嵌套问题

document.documentElement.style.fontSize = document.documentElement.clientWidth / 3.75 + 'px'
  1. vw，vh

vw和vh将视口平均分成了100份，它相对的不是父节点或者页面的根节点。而是由视窗（Viewport）大小来决定的

  • vw:1vw 等于视口宽度的1%
  • Vh:1vh 等于视口高度的1%
  • vmin: 选取 vw 和 vh 中最小的那个,即在手机竖屏时，1vmin=1vw
  • vmax:选取 vw 和 vh 中最大的那个 ,即在手机竖屏时，1vmax=1vh
  • 浏览器高度900px，宽度为750px, 1 vh = 900px/100 = 9 px，1vw = 750px/100 = 7.5 px

四、你做过那些浏览器兼容

五大浏览器内核
Chrome谷歌之前Webkit，已改Blink内核
FireFox火狐Gecko
Ssfari苹果Webkit
IETrident
Opera欧朋现已改用Google Chrome的Blink内核

css兼容

  1. 不同浏览器的标签默认的margin和padding不同

    解决方法：在css里设置全局的*{margin:0;padding:0;)},但是性能不好 一般我们在引入reset.css样式重置；

  2. 在css3新属性，加浏览器前缀兼容早期浏览器

    • -moz- 火狐浏览器
    • -Webkit- safari谷歌浏览器等使用Webkit引擎的浏览器
    • -o- Opera浏览器（早期）
    • -ms- IE

  3. 块属性标签float后，又有横行的margin情况下，IE浏览器margin加倍的问题

    问题：常见症状是IE6中后面的一块被顶到下一行。

    解决方案：在这个div里面加上display:inline;

  4. 设置较小高度标签（一般小于10px），在IE6，IE7，页面中高度超出自己设置的高度 解决方案：

    给超出高度的标签设置overflow:hidden；

    或者设置行高line-height小于你设置的高度；

  5. 行内属性标签，设置display:block后采用float布局，又有横行的margin的情况，IE6间距bug

    解决方案：

    • 在display：block；

    • 后面加入display：inline；/display：table；

  6. 图片默认有间距 解决方案：使用float属性为img布局（所有图片左浮）

js兼容

  1. 时间绑定

    IE：dom.attachEvent();

    标准浏览器:dom.addEventListener('click',function(event){},false);

  2. event事件对象问题

    
document.onClick=function(ev){//谷歌火狐的写法，IE9以上不支持，往下不支持
        var e = ev;
        console.log(e);
}
document.onClick=function(){//谷歌和IE支持，火狐不支持
        var e = event;
        console.log(e);
}
document.onClick=function(ev){//兼容写法
        var e=ev||window.event;
        var mouseX=e.clientX;//鼠标x轴的坐标
        var mouseY=e.clientY;//鼠标y轴的坐标
}

  3. 阻止事件冒泡传播

    //js阻止事件传播，这里使用click事件为例
        document.onClick=function(e){
                var e = e||window.event;
                if(e.stopPropagation){
                        e.stopPropagation();//W3C标准
                }else{
                        e.cancelBubble=true;//IE
                }
        }

  4. 阻止事件默认行为

        //js阻止默认事件 一般阻止a链接href，form表单submit提交
    document.onClick=function(e){
            var e=e||window.event;
            if(e.preventDefault){
                    e.preventDefault();//W3C标准
            }
    }

  5. ajax兼容问题

    IE:ActiveXObject

    其他： xmlHttpRequest

    在IE6以前不是用XMLHttpRequest创建的，所以我们要兼容ie6以前的浏览器要判断他有没有XMLHttpRequest()

五、 防抖和节流

防抖

动作绑定事件，动作发生后一定时间后触发，在这段时间内如果该动作又发生，则重新等待一定时间再触发（在这段时间内再次点击重新计算时间）

function debounce(fn,time){
    let timer = null;
    return ()=>{
        clearTimeOut(timer);
        timer=setTimeOut(()=>{
            fn.apply(this,arguments)
        })
    }
}
节流

动作发生后一段时间后触发事件，在这段时间内，如果动作又发生，则无视该动作，直到事件执行完后，才能重新触发。（在n秒内只会执行一次节流会稀释函数的执行效率）

function throtte(fn,time){
    let activeTime=0;
    return()=>{
        const current = Date.now()
        if(current-activeTime>time){
            fn.apply(this,arguments)
            activeTime=Date.now()
        }
    }
}

今天重复着向我这样的人含泪整理了五个印象最深刻的问题，边整理边感觉自己好菜，明明之前看过的东西过了几天全忘了，求安慰！！

avatar
文章
阅读
粉丝