网上学习资料一大堆,但如果学到的知识不成体系,遇到问题时只是浅尝辄止,不再深入研究,那么很难做到真正的技术提升。
一个人可以走的很快,但一群人才能走的更远!不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人,都欢迎加入我们的的圈子(技术交流、学习资源、职场吐槽、大厂内推、面试辅导),让我们一起学习成长!
今天继续学习前端面试题相关的知识!
感兴趣的小伙伴一起来看看吧~🤞
文章目录
- webpack 的作用
- 什么是按需加载
- 如何理解前端模块化
- 讲讲 JS 的语言特性
- get 请求传参长度的误区
- 补充 get 和 post 请求在缓存方面的区别
- 说一下闭包
- 图片的懒加载和预加载
- JS 实现跨域
- onmouseover 和 onmouseenter 的区别
- [=
=
==
==和
=
=
=
===
===、以及 Object.is 的区别](#_Objectis__70)
- 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 的长度。
为了明确这个 概念,我们必须再次强调下面几点:
- HTTP 协议未规定 GET 和 POST 的长度限制。
- GET 的最大长度显示是因为浏览器和 web 服务器限制了 URL 的长度。
- 不同的浏览器和WEB 服务器,限制的最大长度不一样。
- 要支持 IE,则最大长度为 2083byte,若只支持 Chrome,则最大长度 8182byte。
补充 get 和 post 请求在缓存方面的区别
- get 请求类似于
查找的过程
,用户获取数据,可以不用每次都与数据库连接,所以可以使用缓存
。- post 不同,post 做的一般是修改和删除的工作,所以必须与数据库交互,所以
不能使用缓存
。因此 get 请求适合于请求缓存。
说一下闭包
一句话可以概括:闭包就是指有权访问另外一个函数作用域中的变量的函数。或者子函数在外调用, 子函数所在的父函数的作用域不会被释放。
闭包就是函数的局部变量集合,只是这些局部变量在函数返回后会继续存在。闭包就是函数的“堆栈”在函数返回后并不释放,我们也可以理解为这些函数堆栈并不在栈上分配而是在堆上分配。
当在一个函数内定义另外一个函数就会产生闭包
。
图片的懒加载和预加载
预加载:
提前加载图片,当用户需要查看时可直接从本地缓存中渲染。懒加载:
懒加载的主要目的是作为服务器前端的优化,减少请求数或延迟请求数。两种技术的本质:
两者的行为是相反的,一个是提前加载,一个是迟缓甚至不加载。
懒加载对服务器前端有一定的缓解压力作用,预加载则会增加服务器前端压力。
JS 实现跨域
JSONP:
通过动态创建 script,再请求一个带参网址实现跨域通信。CORS:
服务端设置 Access-Control-Allow-Origin 即可,前端无须设置,若要带 cookie 请求,前后端都需要设置。代理跨域:
开启一个代理服务器,实现数据的转发。
可参考之前一篇文章详细讲解了跨域相关知识
onmouseover 和 onmouseenter 的区别
onmouseover:
当鼠标移入元素或其子元素都会触发事件,所以有一个重复触发冒泡的过程。对应的移出事件是onmouseout。onmouseenter:
当鼠标移入元素本身(不包含元素的子元素)会触发事件,也就是不会冒泡,对应的移出事件是onmouseleave。
=
=
==
==和
=
=
=
===
===、以及 Object.is 的区别
- == 主要存在:强制转换成 number,null==undefined
" "==0 //true
"0"==0 //true
" " !="0" //true
123=="123" //true
null==undefined //true
- Object.is()方法判断两个值是否是相同的值,主要的区别就是+0 != -0,而 NaN
=
=
==
==NaN
(相对比
=
=
=
===
===和
=
=
==
==的改进)
null == undefined 为什么
要比较相等性之前,不能将 null 和 undefined 转换成其他任何值,但 null == undefined 会返回 true 。ECMAScript 规范中是这样定义的。
this 的指向有哪几种
默认绑定:
全局环境中,this 默认绑定到 window。隐式绑定:
一般地,被直接对象所包含的函数调用时,也称为方法调用,this 隐式绑定到该直接对象。隐式丢失:
隐式丢失是指被隐式绑定的函数丢失绑定对象,从而默认绑定到 window。
既有适合小白学习的零基础资料,也有适合3年以上经验的小伙伴深入学习提升的进阶课程,涵盖了95%以上大数据知识点,真正体系化!
由于文件比较多,这里只是将部分目录截图出来,全套包含大厂面经、学习笔记、源码讲义、实战项目、大纲路线、讲解视频,并且后续会持续更新
5001583864)]
[外链图片转存中…(img-fjIZM7fn-1715001583864)]
[外链图片转存中…(img-g34I4AMP-1715001583864)]
既有适合小白学习的零基础资料,也有适合3年以上经验的小伙伴深入学习提升的进阶课程,涵盖了95%以上大数据知识点,真正体系化!
由于文件比较多,这里只是将部分目录截图出来,全套包含大厂面经、学习笔记、源码讲义、实战项目、大纲路线、讲解视频,并且后续会持续更新