0


【学姐面试宝典】前端基础篇Ⅳ(JavaScript)

前言

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

文章目录

在这里插入图片描述

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"//true123=="123"//truenull==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

varmyNewAjax=function(url){returnnewPromise(function(resolve, reject){var xhr =newXMLHttpRequest();
     xhr.open('get', url);
     xhr.send(data);
     xhr.onreadystatechange=function(){if(xhr.status ==200&& readyState ==4){var json =JSON.parse(xhr.responseText);resolve(json)}elseif(xhr.readyState ==4&& xhr.status !=200){reject('error');}}})}

性能优化

  • 减少 HTTP 请求
  • 使用内容发布网络(CDN)
  • 添加本地缓存
  • 压缩资源文件
  • 将 CSS 样式表放在顶部,把 javascript 放在底部(浏览器的运行机制决定)
  • 避免使用 CSS 表达式
  • 减少 DNS 查询
  • 使用外部 javascript 和 CSS
  • 避免重定向
  • 图片 lazyLoad
      今天的分享就到这里啦✨
     
    
   
   
    \textcolor{red}{今天的分享就到这里啦✨}
   
  
 今天的分享就到这里啦✨


 
  
   
    
     
      原创不易,还希望各位大佬支持一下
     
    
   
   
    \textcolor{blue}{原创不易,还希望各位大佬支持一下}
   
  
 原创不易,还希望各位大佬支持一下

🤞

      点赞,你的认可是我创作的动力!
     
    
   
   
    \textcolor{green}{点赞,你的认可是我创作的动力!}
   
  
 点赞,你的认可是我创作的动力!

⭐️

      收藏,你的青睐是我努力的方向!
     
    
   
   
    \textcolor{green}{收藏,你的青睐是我努力的方向!}
   
  
 收藏,你的青睐是我努力的方向!

✏️

      评论,你的意见是我进步的财富!
     
    
   
   
    \textcolor{green}{评论,你的意见是我进步的财富!}
   
  
 评论,你的意见是我进步的财富!

本文转载自: https://blog.csdn.net/xuxuii/article/details/127224939
版权归原作者 蜡笔雏田学前端 所有, 如有侵权,请联系我们删除。

“【学姐面试宝典】前端基础篇Ⅳ(JavaScript)”的评论:

还没有评论