【学姐面试宝典】前端基础篇Ⅳ（JavaScript）

前言

博主主页👉🏻蜡笔雏田学代码
专栏链接👉🏻【前端面试专栏】
今天继续学习前端面试题相关的知识！
感兴趣的小伙伴一起来看看吧~🤞

文章目录

• webpack 的作用
• 什么是按需加载
• 如何理解前端模块化
• 讲讲 JS 的语言特性
• get 请求传参长度的误区
• 补充 get 和 post 请求在缓存方面的区别
• 说一下闭包
• 图片的懒加载和预加载
• JS 实现跨域
• onmouseover 和 onmouseenter 的区别
• $==$和$===$、以及 Object.is 的区别
• null == undefined 为什么
• this 的指向有哪几种
• 写一个函数，第一秒打印 1，第二秒打印 2
• JS 的各种位置，比如 clientHeight、scrollHeight、offsetHeight、以及 scrollTop、clientTop的区别
• 将原生的 ajax 封装成 promise
• 性能优化

webpack 的作用

webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当webpack 处理应用程序时，它会递归地构建一个依赖关系图(dependency graph)，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个 bundle。

什么是按需加载

当用户触发了动作时才加载对应的功能。触发的动作，是要看具体的业务场景而言，包括但不限于以下几个情况：鼠标点击、输入文字、拉动滚动条、鼠标移动、窗口大小更改等。加载的文件，可以是 JS、图片、CSS、HTML 等。

如何理解前端模块化

前端模块化就是复杂的文件编程一个一个独立的模块，比如 JS 文件等等，分成独立的模块有利于重用（复用性）和维护（版本迭代），这样会引来模块之间相互依赖的问题，所以有了 commonJS 规范，AMD，CMD 规范等等，以及用于 JS 打包（编译等处理）的工具 webpack。

讲讲 JS 的语言特性

• 运行在客户端浏览器上
• 不用预编译，直接解析执行代码
• 是弱类型语言，较为灵活
• 与操作系统无关，跨平台的语言
• 脚本语言、解释性语言

get 请求传参长度的误区

误区：我们经常说 get 请求参数的大小存在限制，而 post 请求的参数大小是无限制的。 实际上 HTTP 协议从未规定 GET/POST 的请求长度限制是多少。对 get 请求参数的限制是来源于浏览器或 web 服务器，浏览器或 web 服务器限制了 url 的长度。
为了明确这个 概念，我们必须再次强调下面几点：

1. HTTP 协议未规定 GET 和 POST 的长度限制。
2. GET 的最大长度显示是因为浏览器和 web 服务器限制了 URL 的长度。
3. 不同的浏览器和WEB 服务器，限制的最大长度不一样。
4. 要支持 IE，则最大长度为 2083byte，若只支持 Chrome，则最大长度 8182byte。

补充 get 和 post 请求在缓存方面的区别

• get 请求类似于查找的过程，用户获取数据，可以不用每次都与数据库连接，所以可以使用缓存。
• post 不同，post 做的一般是修改和删除的工作，所以必须与数据库交互，所以不能使用缓存。因此 get 请求适合于请求缓存。

说一下闭包

一句话可以概括：闭包就是指有权访问另外一个函数作用域中的变量的函数。或者子函数在外调用， 子函数所在的父函数的作用域不会被释放。

闭包就是函数的局部变量集合，只是这些局部变量在函数返回后会继续存在。闭包就是函数的“堆栈”在函数返回后并不释放，我们也可以理解为这些函数堆栈并不在栈上分配而是在堆上分配。当在一个函数内定义另外一个函数就会产生闭包。

图片的懒加载和预加载

• 预加载：提前加载图片，当用户需要查看时可直接从本地缓存中渲染。
• 懒加载：懒加载的主要目的是作为服务器前端的优化，减少请求数或延迟请求数。
• 两种技术的本质：两者的行为是相反的，一个是提前加载，一个是迟缓甚至不加载。
  懒加载对服务器前端有一定的缓解压力作用，预加载则会增加服务器前端压力。

JS 实现跨域

1. JSONP：通过动态创建 script，再请求一个带参网址实现跨域通信。
2. CORS：服务端设置 Access-Control-Allow-Origin 即可，前端无须设置，若要带 cookie 请求，前后端都需要设置。
3. 代理跨域：开启一个代理服务器，实现数据的转发。
   可参考之前一篇文章详细讲解了跨域相关知识

onmouseover 和 onmouseenter 的区别

• onmouseover：当鼠标移入元素或其子元素都会触发事件，所以有一个重复触发冒泡的过程。对应的移出事件是onmouseout。
• onmouseenter：当鼠标移入元素本身（不包含元素的子元素）会触发事件，也就是不会冒泡，对应的移出事件是onmouseleave。

$==$和$===$、以及 Object.is 的区别

1. == 主要存在：强制转换成 number，null==undefined

   " "==0 //true
   "0"==0 //true
   " " !="0" //true
   123=="123" //true
   null==undefined //true
   

2. Object.is（）方法判断两个值是否是相同的值，主要的区别就是+0 != -0，而 NaN$==$NaN
   (相对比$===$和$==$的改进)

null == undefined 为什么

要比较相等性之前，不能将 null 和 undefined 转换成其他任何值，但 null == undefined 会返回 true 。ECMAScript 规范中是这样定义的。

this 的指向有哪几种

1. 默认绑定：全局环境中，this 默认绑定到 window。
2. 隐式绑定：一般地，被直接对象所包含的函数调用时，也称为方法调用，this 隐式绑定到该直接对象。
3. 隐式丢失：隐式丢失是指被隐式绑定的函数丢失绑定对象，从而默认绑定到 window。
4. 显式绑定：通过 call()、apply()、bind()方法把对象绑定到 this 上，叫做显式绑定。
5. new 绑定：如果函数或者方法调用之前带有关键字new，它就构成构造函数调用。对于 this 绑定来说，称为 new 绑定。

写一个函数，第一秒打印 1，第二秒打印 2

//方法一：用 let 块级作用域
for (let i = 1; i < 6; i++) {
      setTimeout(() => {
        console.log(i)
      }, 1000 * i)
    }
//方法二：闭包
for (var i = 1; i < 6; i++) {
      (function (i) {
        setTimeout(function () {
          console.log(i)
        }, 1000 * i)
      })(i)
    }

JS 的各种位置，比如 clientHeight、scrollHeight、offsetHeight、以及 scrollTop、clientTop的区别

• clientHeight：表示可视区域的高度，不包含 border 和滚动条。
• offsetHeight：表示可视区域的高度，包含了 border 和滚动条。
• scrollHeight：表示了所有区域的高度，包含了因为滚动被隐藏的部分。
• clientTop：表示边框 border 的厚度，在未指定的情况下一般为 0。
• scrollTop：滚动后被隐藏的高度，获取对象相对于由 offsetParent 属性指定的父坐标(css定位的元素或 body 元素)距离顶端的高度。

将原生的 ajax 封装成 promise

var myNewAjax = function (url) {
   return new Promise(function (resolve, reject) {
     var xhr = new XMLHttpRequest();
     xhr.open('get', url);
     xhr.send(data);
     xhr.onreadystatechange = function () {
       if (xhr.status == 200 && readyState == 4) {
         var json = JSON.parse(xhr.responseText);
         resolve(json)
       } else if (xhr.readyState == 4 && xhr.status != 200) {
         reject('error');
       }
     }
   })
}

性能优化

• 减少 HTTP 请求
• 使用内容发布网络（CDN）
• 添加本地缓存
• 压缩资源文件
• 将 CSS 样式表放在顶部，把 javascript 放在底部（浏览器的运行机制决定）
• 避免使用 CSS 表达式
• 减少 DNS 查询
• 使用外部 javascript 和 CSS
• 避免重定向
• 图片 lazyLoad

$今天的分享就到这里啦✨$

$原创不易，还希望各位大佬支持一下$

🤞 $点赞，你的认可是我创作的动力！$

⭐️ $收藏，你的青睐是我努力的方向！$

✏️ $评论，你的意见是我进步的财富！$