JS 面试总结 理论篇

JS为什么是单线程?

由于浏览器可以渲染DOM,JS也可以修改DOM结构,未避免冲突,JS执行的时候,浏览器DOM渲染会停止。 两段JS不能同时执行。

虽然 HTML5 中新引入的webworker支持多线程,但是不能访问DOM

浏览器允许的并发资源数限制,如何突破?

不同浏览器的并发请求数目限制不同

image.png

因为浏览器的并发请求数目限制是针对同一域名的。

  • 所以可以多设置子个域名来突破限制,比如简书的图片子域名upload-images.jianshu.io
  • 把资源文件放到CDN上,如https://cdn2.jianshu.io/assets/web-f5f4ced5c8b8a95fc8b4.js

单线程的解决方案,异步

和PHP不一样,写的代码顺序和执行的顺序是不一致的,PHP是同步。

console.log(100)
// 等其他JS代码执行完才开始执行
setTimeout(()=> {
 console.log(200)
}, 10000)

console.log(300)

类似的ajax也是

console.log(100)
// 等其他JS代码执行完才开始执行
$.ajax({
   url: 'xxx',
   success: res => {
      console.log(res)
   }
})
console.log(300)

这样有个弊端,可读性差

event loop 事件轮询

  • 同步代码,直接执行
  • 异步函数先放到异步队列中,待同步函数执行完毕,轮询执行异步队列的函数
  • 触发异步函数有 setTimeout,setImmediate,setInterval

实例1

setTimeout(() => console.log(1), 100)
setTimeout(() => console.log(2))
console.log(3)

显示顺序是: 3 2 1

image.png

实例2

image.png

显示顺序: d c a b 或 d c a b 这是由于ajax的success回调函数被放入异步队列的时间是不确定的,当然如果是本地测试,有可能的顺序是 d a...

image.png

关于$ajax的底层

jquery的 $ajax 实际上只对 XMLHttpRequest 对象的封装

xmlhttp.open( "GET", "some/ur/1", true );
xmlhttp.onreadystatechange = function( data ) {
    if ( xmlhttp.readyState === 4 ) {
        console.log( data );
    }
};
xmlhttp.send( null );

底层的XmlHttpRequest对象发起请求,设置回调函数用来处理XHR的readystatechnage事件。 然后执行XHR的send方法。在XHR运行中,当其属性readyState改变时readystatechange事件就会被触发, 只有在XHR从远端服务器接收响应结束时回调函数才会触发执行

jQuery的$ajax的async 参数设置同步或异步的本质是?

关于$ajax 中的 async 参数 async默认的设置值为true,这种情况为异步方式,就是说当ajax发送请求后,在等待server端返回的这个过程中,前台会继续 执行ajax块后面的脚本,直到server端返回正确的结果才会去执行success。 其本质是 xhrReq.open(method, url, async)

JS 异常有做上报处理吗?是什么实现的

  • 捕获异常的方法通过使用 try...catch
try {
    var a = 1;
    var b = a + c;
} catch (e) {
    // 捕获处理
    console.log(e); // ReferenceError: c is not defined
}

缺点:增加代码量和维护性,不适用于整个项目的异常捕获。

  • window.onerror 相比try catch来说window.onerror提供了全局监听异常的功能:
window.onerror = function(errorMessage, scriptURI, lineNo, columnNo, error) {
    console.log('errorMessage: ' + errorMessage); // 异常信息
    console.log('scriptURI: ' + scriptURI); // 异常文件路径
    console.log('lineNo: ' + lineNo); // 异常行号
    console.log('columnNo: ' + columnNo); // 异常列号
    console.log('error: ' + error); // 异常堆栈信息
};

console.log(a);

image.png

提交异常

window.onerror = function(errorMessage, scriptURI, lineNo, columnNo, error) {
    // 构建错误对象
    var errorObj = {
        errorMessage: errorMessage || null,
        scriptURI: scriptURI || null,
        lineNo: lineNo || null,
        columnNo: columnNo || null,
        stack: error && error.stack ? error.stack : null
    };

    if (XMLHttpRequest) {
        var xhr = new XMLHttpRequest();
        xhr.open('post', '/middleware/errorMsg', true); // 上报给node中间层处理
        xhr.setRequestHeader('Content-Type', 'application/json'); // 设置请求头
        xhr.send(JSON.stringify(errorObj)); // 发送参数
    }
}
  • Vue 的捕获异常 在MVVM框架中如果你一如既往的想使用window.onerror来捕获异常,那么很可能会竹篮打水一场空,或许根本捕获不到,因为你的异常信息被框架自身的异常机制捕获了。使用Vue.config.errorHandler这样的Vue全局配置,可以在Vue指定组件的渲染和观察期间未捕获错误的处理函数。这个处理函数被调用时,可获取错误信息和Vue 实例。
Vue.config.errorHandler = function (err, vm, info) {
  // handle error
  // `info` 是 Vue 特定的错误信息,比如错误所在的生命周期钩子
  // 只在 2.2.0+ 可用
}
  • React 的 异常处理 -- Error Boundary 同样的在react也提供了异常处理的方式,在 React 16.x 版本中引入了 Error Boundary
class ErrorBoundary extends React.Component {
    constructor(props) {
        super(props);
        this.state = { hasError: false };
    }

    componentDidCatch(error, info) {
        this.setState({ hasError: true });

        // 将异常信息上报给服务器
        logErrorToMyService(error, info); 
    }

    render() {
        if (this.state.hasError) {
            return '出错了';
        }

        return this.props.children;
    }
}

使用

<ErrorBoundary>
    <MyWidget />
</ErrorBoundary>

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

扫码关注云+社区

领取腾讯云代金券