2023年前端面试大全.docx

《2023年前端面试大全.docx》由会员分享，可在线阅读，更多相关《2023年前端面试大全.docx（31页珍藏版）》请在优知文库上搜索。

1、2023年前端面试大全一、HTML/CSS篇1、什么是Websql?【仅供参考】WebSql是一个在浏览器客户端的结构关系数据库，是浏览器内的本地RDBMS（关系型数据库管理系统），可以使用SQL查询。2、如何显示我们自己画的一个弹框？【仅供参考】可以用一个简单的方法，在页面上单击一个按钮，弹出一个弹框，而弹框也是自己写的一个div。单击前，先把弹框隐藏，OnCIiCk事件发生之后就会显示出来3、canvas和svg的区别【仅供参考】canvas是html5提供的新元素,而svg存在的历史要比canvas久远，己经有十几年了。svg并不是html5专有的标签，最初svg是用xml技术（超文本扩

2、展语言，可以自定义标签或属性）描述二维图形的语言。在H5中看似canvas与svg很像，但是，他们有巨大的差别。canvas可以看做是一个画布其绘制出来的图形为标量图，因此，可以在canvas中引入jpg或png这类格式的图片，在实际开发中，大型的网络游戏都是用canvas画布做出来的，并且canvas的技术现在已经相当的成熟。另外，我们喜欢用canvas来做一些统计用的图表，如柱状图曲线图或饼状图等。而svg,所绘制的图形为矢量图，所以其用法上受到了限制。因为只能绘制矢量图，所以svg中不能引入普通的图片，因为矢量图的不会失真的效果，在项目中我们会用来做小图标。但是由于其本质为矢量图，可以被

3、无限放大而不会失真，这很适合被用来做地图，而百度地图就是用svg技术做出来的。4、如何进行网站性能优化【仅供参考】content方面1、减少HnP请求：合并文件、CSS精灵、inlineImage2、减少DNS查询：DNS缓存、将资源分布到恰当数量的主机名3、减少DOM元素数量Server方面1、使用CDN2、配置ETag3、对组件使用GZiP压缩Cookie方面1、减小COOkie大小css方面1、将样式表放到页面顶部2、不使用CSS表达式3、使用Qink不使用QimPOrtJavascript方面1、将脚本放到页面底部2、将javascript和CSS从外部引入3、压缩javascript

4、和css4、删除不需要的脚本5、减少DoM访问图片方面1、优化图片：根据实际颜色需要选择色深、压缩2、优化css精灵3、不要在HTML中拉伸图片5、什么是文档的预解析？（浏览器解析过程）【仅供参考】Webkit和Firefox都做了这个优化，当执行JavaScript脚本时，另一个线程解析剩下的文档，并加载后面需要通过网络加载的资源。这种方式可以使资源并行加载从而使整体速度更快。需要注意的是，预解析并不改变DOM树，它将这个工作留给主解析过程，自己只解析外部资源的引用，比如外部脚本、样式表及图片。6、标签上title与alt属性的区别是什么？【仅供参考】alt是给搜索引擎识别，在图像无法显示时

5、的替代文本；title是关于元素的注释信息，主要是给用户解读。当鼠标放到文字或是图片上时有title文字显示。（因为IE不标准）在IE浏览器中alt起到了title的作用，变成文字提示。在定义img对象时，将alt和title属性写全，可以保证在各种浏览器中都能正常使用。7、什么是HTML5?【仅供参考】HTML5是最新的HTML标准，它的主要目标是提供所有内容，而不需要任何Flash、SiIVerLight等的额外插件，这些内容来自动画、视频、富GUl等HTML5是万维网联盟（W3C）和网络超文本应用技术工作组（WHATWG）合作输出的。8、请描述一下cookies,SessionStora

6、ge和IoCalStorage的区别？【仅供参考】cookie其实最开始是服务器端用于记录用户状态的一种方式，由服务器设置，在客户端存储，然后每次发起同源请求时，发送给服务器端。cookie最多能存储4k数据，它的生存时间由expires属性指定，并且cookie只能被同源的页面访问共享。SessionStorage是html5提供的一种浏览器本地存储的方法，它借鉴了服务器端session的概念，代表的是一次会话中所保存的数据。它一般能够存储5M或者更大的数据，它在当前窗口关闭后就失效了，并且SessionStorage只能被同一个窗口的同源页面所访问共享。IocalStorage也是html

7、5提供的一种浏览器本地存储的方法，它一般也能够存储5M或者更大的数据。它和SessionStorage不同的是，除非手动删除它，否则它不会失效，并且IOCalStorage也只能被同源页面所访问共享。相关资料：SessionStorage,LocalStorage,Cookie这三者都可以被用来在浏览器端存储数据，而且都是字符串类型的键值对。区别在于前两者属于HTML5WebStorage,创建它们的目的便于客户端存储数据。而cookie是网站为了标示用户身份而储存在用户本地终端上的数据（通常经过加密）。Cookie数据始终在同源（协议、主机、端口相同）的http请求中携带（即使不需要），会在

8、浏览器和服务器间来回传递。存储大小：1、cookie数据大小不能超过4k。2、SessionStorage和IOCalStOrage虽然也有存储大小的限制，但比cookie大得多，可以达到5M或更大。有期时间：kIocalStorage存储持久数据，浏览器关闭后数据不丢失除非主动删除数据。2、SessionStorage数据在页面会话结束时会被清除。页面会话在浏览器打开期间一直保持，并且重新加载或恢复页面仍会保持原来的页面会话。在新标签或窗口打开一个页面时会在顶级浏览上下文中初始化一个新的会话。3、cookie设置的cookie过期时间之前一直有效，即使窗口或浏览器关闭。作用域：1、Sessi

9、onStorage只在同源的同窗口（或标签页）中共享数据，也就是只在当前会话中共享。2IocalStorage在所有同源窗口中都是共享的。3、cookie在所有同源窗口中都是共享的。9、与HTML4比较，HTML5废弃了哪些元素？【仅供参考】废弃的元素包括frame、frameset、noframeapplet、big、centerbasefonto10、请描述一下SeSSionStorage和IoCalStorage的区别。【仅供参考】SessionStorage用于在本地存储一个会话中的数据，这些数据只有同一个会话中的页面才能访问，当会话结束后，数据也随之销毁。因此SessionStora

10、ge不是一种持久化的本地存储，仅仅是会话级别的存储。而1。CalStorage用于持久化本地存储，除非主动删除数据，否则数据是永远不会过期的。11、Doctype作用？标准模式与兼容模式各有什么区别？【仅供参考】DOCTYPE是用来声明文档类型和DTD规范的。!DOCTYPEhtml声明位于HTML文档中的第一行，不是一个HTML标签，处于html标签之前。告知浏览器的解析器用什么文档标准解析这个文档。DOCTYPE不存在或格式不正确会导致文档以兼容模式呈现。标准模式的排版和JS运作模式都是以该浏览器支持的最高标准运行。在兼容模式中，页面以宽松的向后兼容的方式显示,模拟老式浏览器的行为以防止站

11、点无法工作。12、POSition的值，relative和absolute分别是相对于谁进行定位的？【仅供参考】relative:相对定位，相对于自己本身在正常文档流中的位置进行定位。absolute:生成绝对定位，相对于最近一级定位不为static的父元素进行定位。fixed:(老版本IE不支持)生成绝对定位，相对于浏览器窗口或者frame进行定位。StatiC:默认值，没有定位，元素出现在正常的文档流中。StiCky:生成粘性定位的元素，容器的位置根据正常文档流计算得出。13、如何实现6px字体【仅供参考】.fontfont-size:12px;transform:scale(.5);)1

12、4、解释浮动及其工作原理。【仅供参考】浮动的元素可以向左或向右移动，直到它的外边缘碰到包含元素(父元素)或另一个浮动元素的边框为止。要想使元素浮动，必须为元素设置一个宽度(width)0虽然浮动元素己不在文档流中，但是它浮动后所处的位置依然在浮动之前的水平方向上。因为浮动元素不在文档流中，所以文档流中的块元素表现得就像浮动元素不存在一样，下面的元素会填补原来的位置。有些元素会在浮动元素的下方，但是这些元素的内容并不一定会被浮动的元素遮盖。当定位内联元素时，要考虑浮动元素的边界，围绕浮动元素放置内联元素。也可以把浮动元素想象成被块元素忽略的元素，而内联元素会关注的元素。15、伪元素和伪类的区别和

13、作用？【仅供参考】伪元素:在内容元素的前后插入额外的元素或样式类似before,:after,:!first-letter,但是这些元素实际上并不在文档中生成。它们只在外部显示可见，但不会在文档的源代码中找到它们，因此，称为“伪”元素伪类：将特殊的效果添加到特定选择器上类似:hover,:first-child。它是己有元素上添加类别的，不会产生新的元素。16、rgba和OPaCity的透明效果有什么不同？【仅供参考】rgba()和OPaCity都能实现透明效果，但它们最大的不同是OPaCity作用于元素，并且可以设置元素内所有内容的透明度；而rgba()只作用于元素的颜色或其背景色(设置rg

14、ba透明的元素的子元素不会继承透明效果)。17、如何用CSS做一个勾号和一个三角形？【仅供参考】勾号：左边框和下边框，然后配合旋转三角形：宽度为0,三边透明，一边着色18、移动端IPX边框怎么设置【仅供参考】/*方法1*/.borderwidth:100%;height:Ipx;background:red;*方法2*/.borderborder-image:url(border,png)*方法3*/.borderbox-shadow:000Ipx#000;19、精灵图和base64如何选择？【仅供参考】精灵图：优点：将多个图像加载请求合并为一个请求;弊端：难以维护和更新；增加内存消耗；bas

15、e64:优点：将多个图像加载请求合并为一个CSS文件请求；轻松更新生成文件；弊端：base64编码比原始二进制表示大约大25%;IE6或IE7不支持；20、哪些CSS属性可以继承？【仅供参考】答案：可继承：text-alignfontcolor、Iine-height、letter-spacingsword-spacingstext-indent不可继承：borderpaddingmarginwidthheight;二、JSES6TS篇1、JaVaSCriPt原型，原型链？有什么特点？【仅供参考】任何对象都有proto隐式原型，等于构造函数的prototypeconstobj=obj._proto_=Object,prototype/true任何函数都有prototype显示原型等于原型对象(就是一个普通对象包含公共属性)*(通过Function,prototype.bind方法构造出来的函数是个例外，它没有prototype属性)functionPerson()Person,prototype