- 博客(267)
- 收藏
- 关注
RSS订阅原创 2023我的前端面试小结
加载文件资源，如 字体 / 图片 等，具有移动/复制/命名等功能；url-loader: 通常用于加载图片，可以将小图片直接转换为 Date Url，减少请求；: 加载 js / jsx 文件， 将 ES6 / ES7 代码转换成 ES5，抹平兼容性问题；ts-loader: 加载 ts / tsx 文件，编译 TypeScript；: 将 css 代码以标签的形式插入到 html 中；css-loader: 分析@import和url()，引用 css 文件与对应的资源；
2023-05-19 12:36:22
270
1
原创 js事件循环与macroµ任务队列-前端面试进阶
macrotask 即宏任务，宏任务队列等同于我们常说的任务队列，macrotask是由宿主环境分发的异步任务，事件轮询的时候总是一个一个任务队列去查看执行的，"任务队列"是一个先进先出的数据结构，排在前面的事件，优先被主线程读取。指的是，不进入主线程、而进入"任务队列"（task queue）的任务，等待同步任务执行完毕之后，轮询执行异步任务队列中的任务。指的是，在主线程上排队执行的任务，只有前一个任务执行完毕，才能执行后一个任务；会被添加到当前任务队列中的末尾，在下一轮任务开始执行之前执行。
2023-05-19 12:35:43
209
原创 前端常考面试题（必备）
上面几种方式都是存储少量数据的时候的存储方式，当需要在本地存储大量数据的时候，我们可以使用浏览器的 indexDB 这是浏览器提供的一种本地的数据库存储机制。CNAME（意为：别名）：在域名解析中，实际上解析出来的指定域名对应的IP地址，或者该域名的一个CNAME，然后再根据这个CNAME来查找对应的IP地址。是浏览器在后台独立于网页运行的脚本，它打开了通向不需要网页或用户交互的功能的大门。对于如何优化动画，我们知道，一般情况下，动画需要频繁的操作DOM，就就会导致页面的性能问题，我们可以将动画的。
2023-05-19 12:34:20
223
原创 js异步编程面试题你能答上来几道
在上一节中我们了解了常见的es6语法的一些知识点。这一章节我们将会学习异步编程这一块内容，鉴于异步编程是js中至关重要的内容，所以我们将会用三个章节来学习异步编程涉及到的重点和难点，同时这一块内容也是面试常考范围。
2023-05-19 12:33:29
147
原创 80%的前端开发都答不上来的js异步面试题
至此、面试题就已经讲解完成了，内容比较长，但是也比较细，各位碰到类似题目时，可以按照我的方法去做一下，基本不会再出错了。
2023-03-13 15:38:15
92
原创 腾讯前端一面常考面试题
1）Promise基本特性1、Promise有三种状态：pending(进行中)、fulfilled(已成功)、rejected(已失败)2、Promise对象接受一个回调函数作为参数, 该回调函数接受两个参数，分别是成功时的回调resolve和失败时的回调reject；另外resolve的参数除了正常值以外， 还可能是一个Promise对象的实例；reject的参数通常是一个Error对象的实例。
2023-03-13 15:38:03
430
原创 2023我的前端面试小结
JavaScript中的对象是引用类型的数据，当多个实例引用同一个对象时，只要一个实例对这个对象进行操作，其他实例中的数据也会发生变化。而在Vue中，我们更多的是想要复用组件，那就需要每个组件都有自己的数据，这样组件之间才不会相互干扰。所以组件的数据不能写成对象的形式，而是要写成函数的形式。数据以函数返回值的形式定义，这样当我们每次复用组件的时候，就会返回一个新的data，也就是说每个组件都有自己的私有数据空间，它们各自维护自己的数据，不会干扰其他组件的正常运行。参考前端进阶面试题详细解答。
2023-03-13 15:36:37
148
原创 JS模块化—CJS&AMD&CMD&ES6-前端面试知识点查漏补缺
三种加载普通加载：解析到立即阻塞，立刻下载执行当前scriptdefer加载：解析到标签开始异步加载，在后台下载加载js，解析完成之后才会去加载执行js中的内容，不阻塞渲染async加载：（立即执行）解析到标签开始异步加载，下载完成后开始执行并阻塞渲染，执行完成后继续渲染兼容性：> IE9问题可能被引导到 => 1. 浏览器的渲染原理 2.同步异步原理 3.模块化加载原理出现的问题污染全局作用域。
2023-03-13 15:34:49
83
原创 前端经典面试题（有答案）
输出结果：10 10我么知道，箭头函数时不绑定this的，它的this来自原其父级所处的上下文，所以首先会打印全局中的 a 的值10。后面虽然让say方法指向了另外一个对象，但是仍不能改变箭头函数的特性，它的this仍然是指向全局的，所以依旧会输出10。但是，如果是普通函数，那么就会有完全不一样的结果：输出结果：20 30这时，say方法中的this就会指向他所在的对象，输出其中的a的值。也叫组合式API，是Vue3.x的新特性。通俗的讲：没有之前vue相关业务的代码需要配置到option的特定的区域，中
2023-02-28 20:17:15
851
转载 一文带你梳理React面试题（2023年版本）
jsx通过babel转义时，调用了React.createElement函数，它接收三个参数，分别是type元素类型，props元素属性，children子元素。如下图所示，从jsx到真实DOM需要经历jsx->虚拟DOM->真实DOM。如果组件首字母为小写，它会被当成字符串进行传递，在创建虚拟DOM的时候，就会把它当成一个html标签，而html没有app这个标签，就会报错。组件首字母为大写，它会当成一个变量进行传递，React知道它是个自定义组件就不会报错了。
2023-02-27 20:32:48
316
原创 高级前端必会面试题（边面边更）
CSRF 攻击指的是跨站请求伪造攻击，攻击者诱导用户进入一个第三方网站，然后该网站向被攻击网站发送跨站请求。如果用户在被攻击网站中保存了登录状态，那么攻击者就可以利用这个登录状态，绕过后台的用户验证，冒充用户向服务器执行一些操作。CSRF 攻击的本质是利用 cookie 会在同源请求中携带发送给服务器的特点，以此来实现用户的冒充。
2023-02-27 09:21:40
388
原创 谈谈前端性能优化-面试版
当我们去面试的时候，很大概率会被面试官问这么一个问题：你有尝试过对项目做性能优化吗？或者你了解哪些性能优化的方法？听到这个问题的你可能是这样的：似曾相识但又说不清楚，往往只能零散地说出那么几点，难以做到有条理的回答。那么，本文就带你简单了解前端性能优化的几个主要方面，旨在抛砖引玉。css的解析和js的执行是互斥的（互相排斥），css解析的时候js停止执行，js执行的时候css停止解析；无论css阻塞，还是js阻塞，都不会阻塞浏览器加载外部资源（图片、视频、样式、脚本等）；
2023-02-27 09:20:45
568
原创 前端必会面试题指南
给上述的例子中每个列表项都绑定事件，在很多时候，需要通过 AJAX 或者用户操作动态的增加或者去除列表项元素，那么在每一次改变的时候都需要重新给新增的元素绑定事件，给即将删去的元素解绑事件；如果用了事件委托就没有这种麻烦了，因为事件是绑定在父层的，和目标元素的增减是没有关系的，执行到目标元素是在真正响应执行事件函数的过程中去匹配的，所以使用事件在动态绑定事件的情况下是可以减少很多重复工作的。我么知道，箭头函数时不绑定this的，它的this来自原其父级所处的上下文，所以首先会打印全局中的 a 的值10。
2023-02-27 09:20:25
306
原创 这些js原型及原型链面试题你能做对几道
console . log('我爱唱歌');//我爱唱歌 stu2 . sing();//我爱唱歌 console . log(stu1 . sing === stu2 . sing);//false很明显，stu1 和 stu2 指向的不是一个地方。所以 在构造函数上通过this来添加方法的方式来生成实例，每次生成实例，都是新开辟一个内存空间存方法。这样会导致内存的极大浪费，从而影响性能。公共属性定义到构造函数里面，公共方法我们放到原型对象身上。
2023-02-27 09:19:15
259
原创 _hand-1
防抖动和节流本质是不一样的。防抖动是将多次执行变为，节流是将多次执行变成手写简化版:适用场景：----------@----------手写简版使用时间戳的节流函数会在第一次触发事件时立即执行，以后每过 wait 秒之后才执行一次，并且最后一次触发事件不会被执行时间戳方式：定时器方式：适用场景：总结----------@----------思路：----------@----------new操作符做了这些事：----------@----------call做了什么:----------@
2023-02-26 13:43:57
416
原创 _improve-3
第一个参数是必填，传入的是似HTML标签名称，eg: ul, li第二个参数是选填，表示的是属性，eg: className第三个参数是选填, 子节点，eg: 要显示的文本内容----------@--------------------@----------事务 (Transaction)异步与同步: setState并不是单纯的异步或同步，这其实与调用时的环境相关:注意事项:总结 这是一道经常会出现的 React setState 笔试题：下面的代码输出什么呢？我们可以进行如下的分
2023-02-26 13:38:01
753
原创 _improve-2
----------@--------------------@--------------------@----------animation / keyframestransformtransition关键帧动画animationanimation 属性可以拆分为用css3动画使一个图片旋转----------@--------------------@----------transition和animation的区别----------@----------单进程浏览器时代多进程浏览器时代--
2023-02-26 13:09:11
2768
原创 _improve-1
1. JS内置类型JavaScript 的数据类型有下图所示JavaScript 中的数据是如何存储在内存中的？在 JavaScript 的执行过程中， 主要有三种类型内存空间，分别是、、。其中的代码空间主要是存储可执行代码的，原始类型()的数据值都是直接保存在“栈”中的，引用类型(Object)的值是存放在“堆”中的。因此在栈空间中(执行上下文)，原始类型存储的是变量的值，而引用类型存储的是其在"堆空间"中的地址，当 JavaScript 需要访问该数据的时候，是通过栈中的引用地址来访问的，相当于多了一道
2023-02-26 12:59:13
518
原创 imporve-3
JSX的本质是React.createElement()函数的写法如下实际开发中不会使用来创建的，一般都是使用JSX的形式开发。在程序中打印一下为什么 React 使用 JSXBabel 插件如何实现 JSX 到 JS 的编译？ 在 React 面试中，这个问题很容易被追问，也经常被要求手写。它的实现原理是这样的。Babel 读取代码并解析，生成 AST，再将 AST 传入插件层进行转换，在转换时就可以将 JSX 的结构转换为 的函数。如下代码所示：React.createElement源码分析入
2023-02-26 11:26:10
555
原创 improve-2
触发条件:规则:应用:----------@----------触发条件层叠等级：层叠上下文在z轴上的排序----------@--------------------@--------------------@----------同一级别：后写的会覆盖先写的----------@----------给父元素添加 或者 样式，触发使用伪元素，也是在元素末尾添加一个点并带有 属性的元素实现的。----------@--------------------@---------
2023-02-26 11:12:52
5151
原创 improve-1
1. JS内置类型JavaScript 的数据类型有下图所示JavaScript 中的数据是如何存储在内存中的？在 JavaScript 的执行过程中， 主要有三种类型内存空间，分别是、、。其中的代码空间主要是存储可执行代码的，原始类型()的数据值都是直接保存在“栈”中的，引用类型(Object)的值是存放在“堆”中的。因此在栈空间中(执行上下文)，原始类型存储的是变量的值，而引用类型存储的是其在"堆空间"中的地址，当 JavaScript 需要访问该数据的时候，是通过栈中的引用地址来访问的，相当于多了一道
2023-02-26 10:52:39
138
原创 handwrite-1
----------@----------防抖动和节流本质是不一样的。防抖动是将多次执行变为，节流是将多次执行变成手写简化版:适用场景：----------@----------手写简版使用时间戳的节流函数会在第一次触发事件时立即执行，以后每过 wait 秒之后才执行一次，并且最后一次触发事件不会被执行时间戳方式：定时器方式：适用场景：总结----------@----------思路：----------@----------new操作符做了这些事：----------@----------c
2023-02-26 10:05:16
125
原创 handwrite-2
缓存算法是一个非常经典的算法，在很多面试中经常问道，不仅仅包括前端面试通俗的解释：上图就很好的解释了 算法在干嘛了，其实非常简单，无非就是我们往内存里面添加或者删除元素的时候，遵循最近最少使用原则使用场景 算法使用的场景非常多，这里简单举几个例子即可：梳理实现 LRU 思路具体实现：往 里面添加新数据，如果添加的数据存在了，则先删除该条数据，然后再添加。如果添加数据后超长了，则需要删除最久远的一条数据。 便是获取最后一条数据的意思。：首先从 对象中拿出该条数据，然后删除该条数据，最后再重新插入该
2023-02-26 10:04:22
294
原创 7-vue-2
----------@----------1、设计目标不以解决实际业务痛点的更新都是耍流氓，下面我们来列举一下之前我们或许会面临的问题而 经过长达两三年时间的筹备，做了哪些事情？我们从结果反推一句话概述，就是更小更快更友好了更小更快主要体现在编译方面：更友好在兼顾的的同时还推出了，大大增加了代码的逻辑组织和代码复用能力这里代码简单演示下：存在一个获取鼠标位置的函数我们只需要调用这个函数，即可获取、的坐标，完全不用关注实现过程试想一下，如果很多类似的第三方库，我们只需要调用即可，不必关注实现过程，开发效率
2023-02-26 09:51:54
607
原创 7-vue-1
为什么要有这些模式，目的：职责划分、分层（将层、层进行分类）借鉴后端思想，对于前端而已，就是如何将数据同步到页面上MVC模式 代表： + + MVVM模式 映射关系的简化，隐藏了总结 ： 模式简化了界面与业务的依赖，解决了数据频繁更新。 在使用当中，利用双向绑定技术，使得 变化时， 会自动更新，而 变化时， 也会自动变化。我们以下通过一个 实例来说明 的具体实现----------@----------优点：缺点：单页应用与多页应用的区别实现一个SPAhistory模式 ： 模式核心借用
2023-02-25 20:54:51
838
原创 前端面试题整理6-react
抹平浏览器差异，实现更好的跨平台。避免垃圾回收，React 引入事件池，在事件池中获取或释放事件对象，避免频繁地去创建和销毁。方便事件统一管理和事务机制。为了解决跨浏览器兼容性问题，React会将浏览器原生事件（）封装为合成事件（）传入设置的事件处理器中。这里的合成事件提供了与原生事件相同的接口，不过它们屏蔽了底层浏览器的细节差异，保证了行为的一致性。另外有意思的是，React并没有直接将事件附着到子元素上，而是以单一事件监听器的方式将所有的事件发送到顶层进行处理。这样React在更新DOM。
2023-02-25 16:20:53
417
原创 社招前端二面面试题总结
CSRF 攻击指的是跨站请求伪造攻击，攻击者诱导用户进入一个第三方网站，然后该网站向被攻击网站发送跨站请求。如果用户在被攻击网站中保存了登录状态，那么攻击者就可以利用这个登录状态，绕过后台的用户验证，冒充用户向服务器执行一些操作。CSRF 攻击的本质是利用 cookie 会在同源请求中携带发送给服务器的特点，以此来实现用户的冒充。
2023-02-23 17:09:20
485
原创 经常会采坑的javascript原型应试题
原型和原型链算是js里的一座大山，比较偏概念性，在面试时是经常出现的，所以闲时可以多拿出来琢磨。鄙人写的也略有浅显，希望能帮到查阅的小伙伴呀。
2023-02-23 17:07:19
294
原创 前端面试前端性能优化篇
不论是什么样的前端面试，总会问到的一个问题：前端性能优化。相信如果这个问题没有答好，在面试中会很被动。于是，趁着这个天天宅的时期，好好的整理了一番。Start~
2023-02-21 08:39:11
379
原创 社招中级前端笔试面试题总结
跨域问题其实就是浏览器的同源策略造成的。同源策略限制了从同一个源加载的文档或脚本如何与另一个源的资源进行交互。这是浏览器的一个用于隔离潜在恶意文件的重要的安全机制。协议端口号域名必须一致。同源策略：protocol（协议）、domain（域名）、port（端口）三者必须一致。当前域下的 js 脚本不能够访问其他域下的 cookie、localStorage 和 indexDB。当前域下的 js 脚本不能够操作访问操作其他域下的 DOM。当前域下 ajax 无法发送跨域请求。
2023-02-21 08:36:21
251
原创 前端面试指南之JS面试题总结
变量或函数的执行上下文，决定了它们的行为以及可以访问哪些数据。每个上下文都有一个关联的变量对象，而这个上下文中定义的所有变量和函数都存在于这个对象上(如DOM中全局上下文关联的便是window对象)。每个函数调用都有自己的上下文。当代码执行流进入函数时，函数的上下文被推到一个执行栈中。在函数执行完之后，执行栈会弹出该函数上下文，在其上的所有变量和函数都会被销毁，并将控制权返还给之前的执行上下文。JS的执行流就是通过这个执行栈进行控制的。作用域可以理解为一个独立的地盘，可以理解为标识符所能生效的范围。
2023-02-21 08:36:17
208
原创 令人头秃的js隐式转换面试题，你能做对吗
你有没有在面试中遇到特别奇葩的js隐形转换的面试题，第一反应是怎么会是这样呢？难以自信，js到底是怎么去计算得到结果，你是否有深入去了解其原理呢？下面将深入讲解其实现原理。其实这篇文章初稿三个月前就写好了，在我读一些源码库时，遇到了这些基础知识，想归档整理下，就有了这篇文章。由于一直忙没时间整理，最近看到了这个比较热的题，决定把这篇文章整理下。网上给出了很多不错的解析过程，读了下面内容，你将更深入的了解其执行过程。
2023-02-20 10:56:05
283
原创 腾讯前端必会面试题（必备）
XSS 攻击指的是跨站脚本攻击，是一种代码注入攻击。攻击者通过在网站注入恶意脚本，使之在用户的浏览器上运行，从而盗取用户的信息如 cookie 等。XSS 的本质是因为网站没有对恶意代码进行过滤，与正常的代码混合在一起了，浏览器没有办法分辨哪些脚本是可信的，从而导致了恶意代码的执行。获取页面的数据，如DOM、cookie、localStorage；DOS攻击，发送合理请求，占用服务器资源，从而使用户无法访问服务器；破坏页面结构；流量劫持（将链接指向某网站）；
2023-02-20 10:55:42
541
原创 假如面试官问你Babel的原理该怎么回答
简单地说，Babel 能够转译 ECMAScript 2015+ 的代码，使它在旧的浏览器或者环境中也能够运行。// es2015 的 const 和 arrow function// Babel 转译后Babel 的功能很纯粹。我们传递一段源代码给 Babel，然后它返回一串新的代码给我们。就是这么简单，它不会运行我们的代码，也不会去打包我们的代码。它只是一个编译器。大名鼎鼎的 Taro 也是利用 Babel 将 React 语法转化成小程序模板。
2023-02-20 10:55:13
354
原创 从输入URL到渲染的过程中到底发生了什么？
通过阅读本文，相信小伙伴们对从输入URL到页面渲染的过程有了一个大概的理解。其实整个过程是很复杂也比较繁琐的，不是一篇文章或者几张图就可以囊括的，在这有很多细节不便展开，有兴趣的小伙伴可以对这个过程中的一些细节深入研究研究哦！文章中肯定会有些说的不是很清楚的地方，恳请各位大佬不吝赐教，一起成长！
2023-02-19 09:25:31
434
1
原创 那些高级前端是如何回答面试题的
可以把执行栈认为是一个存储函数调用的栈结构，遵循先进后出的原则。当开始执行 JS 代码时，根据先进后出的原则，后执行的函数会先弹出栈，可以看到，foo函数后执行，当执行完毕后就从栈中弹出了。可以看到报错在foo函数，foo函数又是在bar函数中调用的。当使用递归时，因为栈可存放的函数是有限制的，一旦存放了过多的函数且没有得到释放的话，就会出现爆栈的问题。
2023-02-19 09:25:00
371
原创 从这两道题重新理解，JS的this、作用域、闭包、对象
因为personB调用了personA的show4，使得返回函数func的作用域的this绑定为personB，进而调用func时，箭头函数通过作用域找到的第一个明确的this为personB。箭头函数的this，因为没有自身的this，所以this只能根据作用域链往上层查找，直到找到一个绑定了this的函数作用域（即最靠近箭头函数的普通函数作用域，或者全局环境），并指向调用该普通函数的对象。如果说是外层函数作用域中的this，实际上并没有外层函数了，外层就是全局环境了，这个说法也不严谨。
2023-02-19 09:23:24
353
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人