【学姐面试宝典】前端基础篇Ⅳ（JavaScript）_前端javascript宝典(1)

用户33914928060
42 阅读6分钟

img img img

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，涵盖了95%以上大数据知识点，真正体系化！

由于文件比较多，这里只是将部分目录截图出来，全套包含大厂面经、学习笔记、源码讲义、实战项目、大纲路线、讲解视频，并且后续会持续更新

需要这份系统化资料的朋友，可以戳这里获取

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

  1. 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

今天的分享就到这里啦✨

\textcolor{red}{今天的分享就到这里啦✨}

今天的分享就到这里啦✨

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

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

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

🤞

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

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

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

⭐️

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

img img

网上学习资料一大堆，但如果学到的知识不成体系，遇到问题时只是浅尝辄止，不再深入研究，那么很难做到真正的技术提升。

需要这份系统化资料的朋友，可以戳这里获取

一个人可以走的很快，但一群人才能走的更远！不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！

avatar
文章
阅读
粉丝