前端基础 -T
文章平均质量分 83
【前端基础系列】 本系列是按照知识吸收的难度排列的,结合思维导图、代码分析、面试真题,帮你一次性建立前端基础知识体系。为未来的进阶打好坚实的基础。 10篇万字干货外加面试真题总结,包裹基本类型、作用域、函数执行、原型原型链等等,涵盖了前端知识体系的所有基础知识
码上游
日拱一卒,热爱可抵岁月漫长。
间歇性喜欢,间歇式成长。
人活经历,不活年纪。
展开
-
【浏览器系列】【附带面试题与题解】浏览器渲染过程与性能优化
本文我们通过 8 道面试题来聊聊浏览器渲染过程与性能优化。我们首先带着这 8 个问题,来了解浏览器渲染过程,后面会给出题解~为什么 Javascript 要是单线程的?为什么 JS 阻塞页面加载?css 加载会造成阻塞吗?DOMContentLoaded 与 load 的区别?什么是 CRP,即关键渲染路径(Critical Rendering Path)?如何优化?defer 和 async 的区别?谈谈浏览器的回流与重绘?什么是渲染层合并 (Composite)?原创 2022-10-29 10:21:04 · 451 阅读 · 0 评论 -
【浏览器系列】Chrome为什么打开1个页面,会有4个进程?
因为打开1个页面:至少需要1个网络进程,1个浏览器进程,1个GPU进程以及1个渲染进程。最新的 Chrome 浏览器包括:1 个浏览器(Browser)主进程、1 个 GPU 进程、1 个网络(NetWork)进程、多个渲染进程和多个插件进程。1、浏览器进程。主要负责界面显示、用户交互、子进程管理,同时提供存储等功能。2、渲染进程。核心任务是将 HTML、CSS 和 JavaScript 转换为用户可以与之交互的网页,排版引擎 Blink 和 JavaScript 引擎 V8 都是运行在该原创 2022-10-28 16:20:17 · 1449 阅读 · 0 评论 -
【DOM系列】你真的理解事件委托(事件代理)吗?
使用事件代理的好处不仅在于将多个事件处理函数减为一个,而且对于不同的元素可以有不同的处理方法。假如上述列表元素当中添加了其他的元素节点(如:a、span等),我们不必再一次循环给每一个元素绑定事件,直接修改事件代理的事件处理函数即可。原创 2022-10-28 15:08:28 · 1816 阅读 · 0 评论 -
JavaScript如何实现继承?
由于通过原型链层层遍历可能带来性能问题,当试图访问不存在的属性时,会遍历整个原型链。在原型链上查找比较耗时,对性能有副作用,这在性能要求苛刻的情况下很重要。因此,我们在设计对象的时候,要注意原型链的长度。除了通过原型链的方式实现JavaScript的继承,JavaScript中实现继承的方式还有:其中,原型链继承方式中引用类型的属性被所有实例共享,无法做到实例私有;经典继承方式可以实现实例属性私有,但要求类型只能通过构造函数来定义虽然继承的方式有很多种,但实际上都离不开原型对象与原型链的内容。原创 2022-10-03 20:25:15 · 1389 阅读 · 0 评论 -
【浏览器系列】【万字详解】实现前后端跨域通信的几种方式
前言:1. 同源策略的概念和具体限制1.1 同源策略是什么?1.2 为什么要用同源策略?1.3 同源策略的限制范围?1.4 总结2. 前后端如何通信知识拓展:为什么Ajax跨域访问被禁止?3. 如何创建AJax发送 Ajax 请求的五个步骤(XMLHttpRequest的工作原理)发送get、post请求onreadystatechange 事件事件的触发条件事件的触发顺序实际开发中用的 原生Ajax请求4. 跨域通信的几种方式1、JSONP原创 2022-10-26 10:47:19 · 406 阅读 · 0 评论 -
【浏览器系列】从输入网址(URL)到页面加载的全过程
1.首先在浏览器中输入URL2.缓存解析:3.DNS域名解析:4.建立TCP连接:5.发起HTTP请求:6.服务器响应请求并返回结果:7.关闭TCP连接:8.浏览器渲染:9.JS引擎解析过程:原创 2022-10-14 18:02:22 · 4293 阅读 · 0 评论 -
【DOM系列】DOM操作方法汇总
DOM操作方法分为七类:创建节点、通过节点关系获取节点、节点操作、节点选择、属性操作、DOM事件、元素样式尺寸。原创 2022-10-25 20:07:59 · 3553 阅读 · 0 评论 -
【JavaScript复习】【一篇就够】常用内置对象全汇总,全到位总结(所以好文章总是被埋没对吗)
本篇文章是JavaScript复习系列第八部分,也是最后一部分。 一直觉得我的JavaScript知识体系中总是有一部分遗漏,之前做题的时候遇到过不懂的方法就去搜;其实是内置对象这块知识一直也没进行系统的总结过,今天做个了断。原创 2022-10-24 20:29:40 · 258 阅读 · 0 评论 -
【JavaScript复习】【一篇就够】从原型到原型链(详细解读,图文并茂)
JavaScript复习系列已经总结到第七部分了,本系列大概有八部分。目录1. 构造函数1.1 什么是构造函数?1.2 constructor属性1.3 都有哪些数据类型或者函数拥有constructor呢?1.4 模拟实现一个new2. 原型2.1 显式原型(prototype)2.2 隐式原型(proto)2.3 constructor三、实例与原型4. 原型的原型5. 原型链6.原型继承7. 补充7.1 constructor7.2 proto7.3 真的是继承吗?7.4 原型链继承问题8.写在最后原创 2022-10-23 12:57:22 · 696 阅读 · 0 评论 -
【JavaScript复习】【一篇就够】JavaScript中的执行上下文,确定不看看这篇图文并茂的文章吗?
作为JavaScript 开发者,我们必须知道 JavaScript 程序内部的执行机制。执行上下文和执行栈是JavaScript中关键概念之一,是JavaScript难点之一。 理解执行上下文和执行栈同样有助于理解其他的 JavaScript 概念如提升机制、作用域和闭包等。原创 2022-10-23 09:50:47 · 478 阅读 · 0 评论 -
【JavaScript复习】【一篇就够】看透闭包本质
本篇文章结合上篇作用域内容,进行闭包的复习。总结:1.当函数可以记住并访问所在的词法作用域时,就产生了闭包,即使函数是在当前词法作用域之外执行。 2.闭包是嵌套的内部函数,包含被引用变量(函数)的对象。可以在内部函数访问到外部函数作用域。 3.为什么不被垃圾回收清除?闭包所包含的整个作用域链所引用的变量对象(一些作用域中的变量的集合,包括局部变量对象和全局变量对象。)中的值不会被清除。 4.闭包问题的优化:可以使用自执行函数或者匿名函数来优化闭包。原创 2022-10-22 16:25:09 · 584 阅读 · 0 评论 -
【JavaScript复习】【一篇就够】作用域
本文复习作用域相关的全面内容,包括作用域的理解,作用域在js工作原理中充当的角色;还有js的词法作用域,并由此引出作用域的嵌套以及作用域链的出现;了解完之后学习js中作用域的应用场景,函数作用域的隐藏内部实现功能中一些不理想的问题,让我们明白函数作用域中匿名函数表达式和立即执行函数表达式存在的意义;还有块作用域将代码从在函数中隐藏信息扩展为在块中隐藏信息的含义。最后,学习了解函数提升和变量提升,从而以此为基础,为之后闭包的充分理解做铺垫。原创 2022-10-22 12:16:12 · 534 阅读 · 1 评论 -
【JavaScript复习】【一篇就够】JavaScript事件循环知识题目全汇总
js事件循环机制题目头痛?不懂同步任务异步任务执行顺序?异步任务中的宏任务微任务搞不明白?这篇博客带你进行所有需要的知识储备还有不同难度的题目进行知识学习储备后的训练。如果你认真看下去并且理解了,js事件循环基本就没有问题了,可以说90%掌握吧原创 2022-10-21 11:38:49 · 981 阅读 · 1 评论 -
【JavaScript复习】【两篇就够】异步相关(一)
1. promise 和 async await区别概念 Promise 是异步编程的一种解决方案,比传统的解决方案--回调函数和事件--更合理更强大,简单地说,Promise好比容器,里面存在着一些未来才会执行完毕(异步)的事件和结果,而这些结果一旦生成是无法改变的。 async await 也是异步编程的一种解决方案,他遵循的是Generator 函数的语法糖,他拥有内置执行器,不需要额外的调用直2.defer和async区别3. 同步和异步4. 实现异步的方法原创 2022-10-20 20:58:29 · 346 阅读 · 0 评论 -
【JavaScript复习】【两篇就够】异步相关(二)
昨天从promise和async await的概念和区别开始,到文档解析的时候defer和async区别的总结;然后简单介绍了同步异步的概念,最后到实现异步的方法。实现异步的方法中异步编程进化史:callback->promise->generator->async+await,今天就重点回顾一下实现异步的方法和promise相关的介绍与使用。原创 2022-10-21 16:34:31 · 384 阅读 · 0 评论 -
【JavaScript复习】【一篇就够】浅析this--this绑定规则及优先级
科学的尽头是神学,this关键字是JS中最复杂的机制之一。它是一个很特别的关键字,往往被自动定义到所有函数的作用域中。使用恰当,往往会使得一段代码更加精短且强大,但往往会出现许多意外事件,使得它不稳定。实际上,this关键字并没有那么神秘,但是在缺乏清晰的认识下,this就像是一个魔法。今天,就让我们来揭开它那神秘的面纱。现在先声明一下,this是在运行时绑定的,它绑定哪个对象,完全依赖于它在声明时候的调用!this的绑定和声明位置并没有任何关系,只取决于它的调用位置。原创 2022-09-26 11:00:21 · 462 阅读 · 0 评论 -
【详解】如何手写实现call、apply、bind
前言:面试的时候如果遇到需要手写代码,手写实现apply,call,bind也是问的比较多的,今天好好学习一下,怎么手写实现。用法:1.apply原创 2022-09-30 14:23:39 · 2503 阅读 · 0 评论 -
JavaScript知识点复习--思维导图(全)
把尚硅谷JS高级的视频二刷整理出来的思维导图,算是又把知识过了一遍;快开学了,事情有点多,而且还想着以后+web安全,思路还没理清;另外,最近要准备数模,事情多,效率低,web前端的复习以及学习先搁置,等到开学考完试继续。...原创 2022-08-10 14:07:50 · 1119 阅读 · 0 评论 -
JavaScript知识点复习--(二)函数高级
函数高级分为四部分:原型与原型链、执行上下文与执行上下文栈、作用域与作用域链、闭包: 如何产生闭包、闭包到底是什么、产生闭包的条件、常见的闭包、闭包的作用、闭包的生命周期、闭包的应用、闭包的缺点及解决。原型、显式原型与隐式原型、原型链(隐式原型链)理解、分类、作用、作用域与执行上下文、作用域链。变量提升与函数提升、执行上下文、执行上下文栈。......原创 2022-08-04 11:07:40 · 146 阅读 · 0 评论 -
JavaScript知识点复习--(一)基础总结
拼凑断开的知识点,复习之前匆匆学过的js,我打算用思维导图的方式进行复习;我觉得这样对我来说可以把好多复杂的知识、混乱的关系理清,也方便之后进行复习回忆了。但其实感觉好多好多知识点,有点迷。先把之前记的一些笔记加上,然后再网上冲浪,对思维导图进行不断的完善吧。JS高级分为四块基础总结、函数高级、面向对象高级、线程机制与事件机制。...原创 2022-08-01 15:53:30 · 177 阅读 · 0 评论 -
【一篇就够】CSS隐藏页面元素方式
实现方法综合:1.display: none2.visibility: hidden3.opacity: 04.设置height、width模型属性为05.position: absolute总结下来,最常用的还是方法一和方法二,其他的方式只能算是一种小妙招,比较偏关于方法一二三的区别如下表。原创 2022-09-21 10:38:43 · 464 阅读 · 0 评论 -
【前端面试】-- 必知必会的promise题
Promise 想必大家都十分熟悉,想想就那么几个 api,可是你真的了解 Promise 吗?请迎接测试:以下 promise 均指代 Promise 实例,环境是 Node.js。原创 2022-09-21 11:30:11 · 287 阅读 · 0 评论