前端面试知识整理(持续更新)个人文章

flex-direction//决定主轴的方向(即项目的排列方向)。flex-wrap//如果一条轴线排不下,如何换行。flex-flow//是flex-direction属性和flex-wrap属性的简写形式,默认值为rownowrap。justify-content//定义了项目在主轴上的对齐方式。align-items//属性定义项目在交叉轴上如何对齐。align-content//属性定义了多根轴线的对齐方式。如果项目只有一根轴线,该属性不起作用。元素属性

order//属性定义项目的排列顺序。数值越小,排列越靠前,默认为0。flex-grow//属性定义项目的放大比例,默认为0,即如果存在剩余空间,也不放大。flex-shrink//属性定义了项目的缩小比例,默认为1,即如果空间不足,该项目将缩小flex-basis//属性定义了在分配多余空间之前,项目占据的主轴空间(mainsize)flex//flex-grow,flex-shrink和flex-basis的简写,默认值为01autoalign-self//align-self属性允许单个项目有与其他项目不一样的对齐方式,可覆盖align-items属性。6.nodeType二、JavaScript1.原型与继承原型:prototype函数的对象属性,包含一个constructor属性,指向函数自身:Fun.prototype.constructor===Fun。

原型链由原型对象构成,是js对象继承的机制。每个对像都有[[prototype]]属性,主流浏览器以__proto__暴露给用户。__proto__指向对象的构造函数的原型属性(prototype)。prototype的__proto__又指向它prototype对象(注意,这个prototype是一个对象结构)的构造函数的原型;通过__proto__属性,形成一个引用链。在访问对象的属性时,如果对象本身不存在,就会沿着这条[[prototype]]链式结构一层层的访问。

可以通过new来新建一个对象的函数。

函数拥有原型(prototype);而对象可以通过原型链关系([[prototype]])实现继承。函数是一种特殊对象,也拥有__proto__,即函数也会继承。函数的原型链是:函数静态方法—>原生函数类型的原型(拥有函数原生方法)—>原生对象原型(拥有对象原生方法)—>nullclassA{};classBextendsA{};

B.__proto__=A.prototype;B.prototype.__proto__=A.prototype;

类型:标记引用(无法解决循环引用问题);标记清除(现在主流回收算法)。标记清除算法的核型概念是:从根部(在JS中就是全局对象)出发定时扫描内存中的对象。凡是能从根部到达的对象,都是还需要使用的。那些无法由根部出发触及到的对象被标记为不再使用,稍后进行回收。

对于不再用到的内存,没有及时释放,就叫做内存泄漏(memoryleak)。常见内存泄漏:

事件循环是指:执行一个宏任务,然后执行清空微任务列表,循环再执行宏任务,再清微任务列表。

异步任务分为宏任务(macrotask)与微任务(microtask),不同的API注册的任务会依次进入自身对应的队列中,然后等待EventLoop将它们依次压入执行栈中执行。

-微任务microtask(jobs):promise/ajax/Object.observe(该方法已废弃)-宏任务macrotask(task):setTimout/script/IO/UIRendering

每次事件循环:

requestAnimationFrame(cb)与setTimeout(cb,0)同时注册时,可能在setTimeout之前执行,也可能在它之后执行。因为只有在一轮浏览器渲染结束时才回去调用raf。

执行环境定义了变量或函数有权访问的其他数据,决定了它们各自的行为。每个执行环境斗鱼一个与之关联的变量对象,环境中定义的所有变量和函数都保存在这个对象中。全局执行环境是最外围的执行环境,在web浏览器中,全局执行环境被认为是window对象,因此所有全局变量和函数都是作为window对象的属性和方法被创建的。某个执行环境中的所有代码执行完毕后,该环境被销毁,保存在其中的所有变量和函数定义也随之销毁。(全局执行环境直到应用程序推出时才会被销毁)。

当代码在一个环境中执行时,会创建变量对象的一个作用域链,保证对执行环境有权访问的所有变量和函数的有序访问。作用域链的前端,始终都是当前执行的代码所在环境的变量对象。如果这个环境是函数,则将其活动对象作为变量对象,其在最开始的时候只包含一个变量:arguments。作用域链的下一个变量来自包含环境,而再下一个变量对象则来自下一个包含环境一直延续到全局执行环境。作用域链在创建的时候就会被生成,保存在内部的[[scope]]属性当中。其本质是一个指向变量对象的指针列表,它指引用但不实际包含变量对象。

函数创建过程中,会创建一个预先包含外部活动对象的作用域链,并始终包含全局环境的变量对象。这个作用域链被保存在内部的[[scope]]属性中,当函数执行时,会通过复制该属性中的对象构建起执行环境的作用域链。

执行上下文是指当前Javascript代码被解析和执行时所在环境的抽象概念,JavaScript任何代码的运行都是在执行上下文中。

执行上下文分为两个过程:

主要做了三件事

变量赋值,语句执行等。

闭包是指有权访问另一个函数作用域中的变量的函数。其本质是函数的作用域链中保存着外部函数变量对象的引用。可以通过[[scope]]属性查看。因此,即使外部函数被销毁,但是由于外部环境中定义的变量在闭包的scope中还保持着引用,所以这些变量暂时不会被垃圾回收机制回收,因此依然可以在闭包函数中正常访问。注意:同一个函数内部的闭包函数共享同一个外部闭包环境。从下图可以看出,即使返回的闭包里面没有引用c,d变量,但是由于内部函数closure1中引用链,所以即使closure1未调用,闭包作用域中依然保存这些变量的引用。

拷贝一层,内部如果是对象,则只是单纯的复制指针地址。

比如let[a,b,c]=[1,2,3];let{foo}={foo:'bar'};

lets=Symbol();typeofs//"symbol"Symbol.for(),Symbol.keyFor()Set,MapSet结构类似数组,成员唯一。

consts=newSet();[2,3,5,4,5,2,2].forEach(x=>s.add(x));for(letiofs){console.log(i);}//2354操作方法:

WeakSet结构与Set类似,也是不重复的值的集合。但是,它与Set有两个区别。首先,WeakSet的成员只能是对象,而不能是其他类型的值。

constws=newWeakSet();ws.add(1)//TypeError:Invalidvalueusedinweaksetws.add(Symbol())//TypeError:invalidvalueusedinweakset其次,WeakSet中的对象都是弱引用,即垃圾回收机制不考虑WeakSet对该对象的引用,也就是说,如果其他对象都不再引用该对象,那么垃圾回收机制会自动回收该对象所占用的内存,不考虑该对象还存在于WeakSet之中。

类似于对象,也是键值对的集合,但是“键”的范围不限于字符串,各种类型的值(包括对象)都可以当作键。也就是说,Object结构提供了“字符串—值”的对应,Map结构提供了“值—值”的对应,是一种更完善的Hash结构实现。如果你需要“键值对”的数据结构,Map比Object更合适。

constm=newMap();consto={p:'HelloWorld'};m.set(o,'content')m.get(o)//"content"m.has(o)//truem.delete(o)//truem.has(o)//falseWeakMapWeakMap与Map的区别有两点。

首先,WeakMap只接受对象作为键名(null除外),不接受其他类型的值作为键名。

其次,WeakMap的键名所指向的对象,不计入垃圾回收机制。

Proxy可以理解成,在目标对象之前架设一层“拦截”,外界对该对象的访问,都必须先通过这层拦截,因此提供了一种机制,可以对外界的访问进行过滤和改写ES6原生提供Proxy构造函数,用来生成Proxy实例。

varproxy=newProxy(target,handler);Promise实现一个简单的Promise

抓住两点即可:假设A为父类,B为子类那么

B.__proto__=A;//子类的__proto__属性,表示构造函数的继承,总是指向父类。B.prototype.__proto__=A.prototype;//子类prototype属性的__proto__属性,表示方法(实例)的继承,总是指向父类的prototype属性。Modulees6模块与CommonJS模块的差异8.函数柯里化在一个函数中,首先填充几个参数,然后再返回一个新的函数的技术,称为函数的柯里化。通常可用于在不侵入函数的前提下,为函数预置通用参数,供多次重复调用。

constadd=functionadd(x){returnfunction(y){returnx+y}}constadd1=add(1)add1(2)===3add1(20)===219.正则表达式匹配模式匹配位置锚字符:^//匹配开头$//匹配结尾\b//匹配单词边界\B//匹配非单词边界(=p)//正向先行断言其中p是一个子模式,即p前面的位置。(!p)//负向先行断言其中p是一个子模式,即不是p的前面的位置实例分析:数字的千位分隔符表示法:比如把"12345678",变成"12,345,678"。constreg=/\B(=(\d{3})+\b)/g这个正则的意思是匹配1到多组3个相连的数字前面的位置|123//123前面的|代表这个位置且这些数字的右侧是单词的边界,比如123|`123|.456,左侧是非单词边界,即数字前还是单词比如9|123`。

浏览器下载html文件并进行编译,转化成类似下面的结构

如果script标签设置了async或者defer标签,下载过程不会阻塞文档解析。defer执行将会放到html解析完成之后,dcl事件之前。async则是下载完就执行,并且阻塞解析。

DOM构建的意思是,将文档中的所有DOM元素构建成一个树型结构。

将文档中的所有css资源合并。生成cssruletree

将DOM树和CSS合并成一棵渲染树,render树在合适的时机会被渲染到页面中。(比如遇到script时,该script还没有下载到本地时)。

如下图:

由于html页面通过相应的标签从不同的域名下加载静态资源文件是被浏览器允许的,所以可以通过动态创建script标签的方式,来实现跨域通信,缺点是只支持get请求

正向代理(forward)是一个位于客户端【用户A】和原始服务器(originserver)【服务器B】之间的服务器【代理服务器Z】,为了从原始服务器取得内容,用户A向代理服务器Z发送一个请求并指定目标(服务器B),然后代理服务器Z向服务器B转交请求并将获得的内容返回给客户端。客户端必须要进行一些特别的设置才能使用正向代理。

对于客户端而言代理服务器就像是原始服务器,并且客户端不需要进行任何特别的设置。客户端向反向代理的命名空间(name-space)中的内容发送普通请求,接着反向代理将判断向何处(原始服务器)转交请求,并将获得的内容返回给客户端。

Nginx是一个高性能的HTTP和反向代理服务器,同时也是一个IMAP/POP3/SMTP代理服务器。

当元素的尺寸、结构或触发某些属性时,浏览器会重新渲染页面,称为回流。此时,浏览器需要重新经过计算,计算后还需要重新页面布局,因此是较重的操作。

当元素样式的改变不影响布局时,浏览器将使用重绘对元素进行更新,此时由于只需要UI层面的重新像素绘制,因此损耗较少。

从以上图中对比可以看出,重绘的过程比回流要少做一步操作,即layout

vm.$nextTick([callback])

附上源代码,不感兴趣可以直接跳过代码,没关系。

由于数据修改是同步的操作,而视图更新是异步的,所以我们两次打印data.nextTickText都是修改后的值,而视图更新是异步的,由于第一个nexttick回调在视图更新回调函数fulshSchedulerQueue之前添加,所以此时读取到的是视图更新之前的值。我们通过断电跟踪也可以看出此轮事件回调里面保存的三个函数最终会分别执行printNextTick、flushSchedulerQueue、printNextTick

以前面试的时候,别人问我nextTick的原理,我答完之后,别人接着问我那v-on呢?我当时一脸懵逼,v-on不就是事件绑定吗?你想表达什么?(黑人问号脸.png)

THE END
1.CSS实战技巧:构建精致网页布局指南在编写CSS之前,我们需要先确定网页的基本结构,包括页眉、导航栏、主要内容区、侧边栏和页脚等部分。通过合理的布局设计,可以使网页看起来更加整洁、有序。我们可以使用HTML标签来定义这些部分,并为它们设置合适的类名或ID,以便后续应用CSS样式。 三、设置全局样式 https://www.0515zz.com/html/jiaocheng/2024-12-19/304390.html
2.如何用html建设网站?网站的建设流程HTML(超文本标记语言)是构建网站的基础语言,它为网页提供了结构和内容。通过HTML,您可以创建页面元素,如文本、图片、链接、表单等。虽然HTML本身并不涉及设计和互动效果,但它是网站建设的根基。在这篇文章中,我们将探索如何用HTML建设一个简单的静态网站,并介绍HTML的基础知识、结构、标签使用以及如何与CSS、JavaScripthttps://www.qizeweb.com/7362.html
3.100个鲜为人知的CSS技巧汇总整理合集2024年马上就要结束了,2025年马上来临了,在过去的很长一段时间里,我花了很多时间将之前的一些基础知识做了整理,希望这些内容能够帮助你在学习前端技能的时候,稍微顺利一些。今天,我将整理好的这 100 个 CSS 知识技巧分享给你,希望你会觉得它对你有用。 https://mp.weixin.qq.com/s?__biz=MjM5MDA2MTI1MA==&mid=2649142740&idx=2&sn=d203dd51ee24e51ff13630341f296c35&chksm=bfc60df21f0cd16e00a89f60e196d70fe6ce6b7f4a2cecade150a56f6457b3ffae572d1e2e22&scene=27
4.HTML+CSS+JavaScript传统文化大学生网页设计期末作业HTML+CSS+JS【传统文化】网页设计期末课程大作业 web前端开发技术 web课程设计 网页规划与设计 文章目录 一、 网站题目 二、 网站描述 三、 网站介绍 四、 网站效果 五、? 网站代码 六、 如何学习进步 七、? 更多干货 https://blog.csdn.net/qq_58648235/article/details/135222128
5.HTML&CSS设计与构建网站([美]达科特)PDF原版[102MB]电子书下载HTML & CSS设计与构建网站 ([美]达科特) PDF原版[102MB] 使用鲁大师安全下载 电信安全下载 网通安全下载 移动安全下载 联通安全下载 普通下载地址: 巨牛网络电信下载 华晨网络电信下载 数掘网络电信下载 中国电信网络下载 中国移动网络下载 中国联通网络下载 https://www.jb51.net/books/481096.html
6.HTML5入门教程:一步步构建你的第一个网页HTML5通过新的标签和属性,提供了更丰富的多媒体支持和更强的交互性,使得网页构建更加语义化和结构化。HTML5规范得到了广泛支持,能够更好地兼容不同设备和平台,并且应用范围非常广泛,包括静态网站、博客、社交网络等。 HTML5简介 HTML5是超文本标记语言(Hypertext Markup Language)的第五个重大版本,它在HTML4的基础https://www.imooc.com/article/359119
7.HTML&CSS设计与构建网站(豆瓣)不管您设计和建立新网站,还是想更好地控制现有网站,都可以在《HTML & CSS 设计与构建网站》一书的指导下创建出用户友好、令用户赏心悦目的Web内容。我们知道,编码是一项令人望而生畏的工作,而本书却采用有别于许多传统编程书籍的新颖编排方式,将使您收到事半功倍的学习效果。https://book.douban.com/subject/21338365/
8.2021必修CSS架构系统精讲mob64ca12d06991的技术博客首先,作为一名新入行的开发者,掌握 CSS 架构的基本步骤是非常重要的。以下是实现“2021必修 CSS架构系统精讲”的整体流程: 1. 理解 CSS 架构的基本概念 CSS 架构的基本概念涉及模块化、可复用性和可维护性。建立良好的架构将帮助你更好地管理与协作。 https://blog.51cto.com/u_16213300/12872635
9.HTML&CSS设计与构建网站中文版HTML&CSS 设计与构建网站 完整版par3,有中英文两种,由于英文版是高清版,所以比较大,分为三个压缩文件,需要的朋友自取。 上传者:u013204337时间:2016-12-17 HTML&CSS;设计与构建网站.zip HTML&CSS;设计与构建网站,包含完整书籍,还有书籍中案例的源码。 https://www.iteye.com/resource/a976134036-9844675
10.Web设计与前端开发秘籍:HTML&CSS设计与构建网站+JavaScript&通过将编程理论与用来演示JavaScript和jQuery如何被应用于流行站点之上的示例相结合,《JavaScript & jQuery交互式Web前端开发》将教会您如何让网站更具交互性、吸引性、可用性。很快,您就能够像一名程序员那样去思考和编写代码了。 《HTML & CSS 设计与构建网站》 欢迎您选择一种更高效的学习HTML和CSS的方式。不管您http://m.dangdang.com/product.php?pid=26437708&ac=content
11.htmlcss设计与构建网站pdf网站备案号是工业和信息化部关于网站备案管理系统颁发的网络信息许可证号码。ICP经营许可证全称是《中华人民共和国电信与信息服务业务经营许可证》,是通过互联网向上网用户提供有偿信息、网上广告、代制作网页、电子商务及其它网上应用服… 标签: 网站备案号 网站备案 免费商城与免费小程序商城 2023-11-12 免费商城是http://www.ytdns.net/tags/?q=html+css%E8%AE%BE%E8%AE%A1%E4%B8%8E%E6%9E%84%E5%BB%BA%E7%BD%91%E7%AB%99+pdf
12.HTML+CSS网页设计与制作在当今数字化时代,网页设计与制作成为了一项至关重要的技能。HTML(超文本标记语言)和 CSS(层叠样式表)是构建网页的基础技术,它们相互协作,能够创造出令人惊艳的网页效果。本文将深入探讨 HTML + CSS 网页设计与制作的过程、技巧和最佳实践。 一、HTML:网页的结构基石 https://www.yunbuluo.net/xueyuan/19208.html
13.HTML#38;CSS设计与构建网站.pdfHTML#38;CSS设计与构建网站.pdf,护理学经营创新管理学资料中医养生内科咨询培训物流与供应链https://m.book118.com/html/2020/0327/7023066042002125.shtm
14.《HTML5CSS3从入门到精通》《HTML5 CSS3从入门到精通》(清华社“视频大讲堂”大系)通过基础知识 中小实例 综合案例的方式,讲述了用HTML5 CSS3设计构建网站的必备知识,相对于权威指南、高级程序设计、开发指南同类图书,本书是一本适合快速入手的自学教程。内容有:创建HTML5文档,实战HTML5表单,实战HTML5绘画,HTML5音频与视频,Web存储,离线应用http://www.zhuzi.me/blog/211140.html
15.HTML5和CSS3WEB技术开发腾讯云开发者社区HTML5和CSS3 WEB技术开发_ide_03 2.WWW 2.1 www来源 WWW是环球信息网的缩写,(亦作“Web”、“WWW”、“‘W3’”,英文全称为“World Wide Web”),中文名字为“万维网”,"环球网"等,常简称为Web。 分为Web客户端和Web服务器程序。 WWW可以让Web客户端(常用浏览器)访问浏览Web服务器上的页面。 是一个由https://cloud.tencent.com/developer/article/2476684
16.2023Web前端开发八股文&面试题(万字系列)——这篇就够了!分别是:HTML、CSS、JavaScript 作用:HTML实现页面结构,CSS完成页面的表现与风格,JavaScript实现一些客户端的功能与业务。 1.12 网页制作会用到的图片格式有哪些? Webp:WebP格式,谷歌(google)开发的一种旨在加快图片加载速度的图片格式。并能节省大量的服务器带宽资源和数据空间。Facebook Ebay等知名网站已经开始测试并使用https://developer.aliyun.com/article/1353677
17.网页设计论文层叠样式表CSS示国际W3C标准化组织制定的一套完整的扩展样式标准,主要是为了在HTML的样式编排上对其功能进行补充,更好地完成网页设计的需要而制定的设计标准。CSS层叠样式表对HTML的标记属性的设定进行了扩充,可以使用Script程序功能来对其进行很好的控制,从而对网络的外观设计和整体的布局设计进行非常有效的控制,让网页在https://www.ruiwen.com/lunwen/6161857.html
18.《Web前端开发HTML/CSS》教学大纲4、利用QQ、微信等网络平台,及时沟通互动,给学生课后答疑。 五、考核方式 综合大作业 六、成绩评定方法 综合大作业成绩70%,平时成绩30% 七、教学参考书 1.《HTML5与CSS3基础教程》 [美] Elizabeth,Castro,Bruce,Hyslop 著;望以文 译 2.《Web设计与前端开发秘籍:HTML & CSS 设计与构建网站 》 [美] 达科特https://jwc.hqu.edu.cn/info/1109/7804.htm