前端开发面试题及答案(vue前端面试题)

今天给各位分享前端开发面试题及答案的知识，其中也会对vue前端面试题进行解释，如果能碰巧解决你现在面临的问题，别忘了关注本站，现在开始吧！

常见的web前端面试题及答案分享

1、说下行内元素和块级元素的区别?行内块元素的兼容性使用?(IE8以下)

答：行内元素：会在水平方向排列，不能包含块级元素，设置width无效，height无效(可以设置line-height)，margin上下无效，padding上下无效。块级元素：各占据一行，垂直方向排列。从新行开始结束接着一个断行。兼容性：display:inline-block;*display:inline;*zoom:1。

2、box-sizing常用的属性有哪些?分别有什么作用?

答：box-sizing: content-box|border-box|inherit。content-box:宽度和高度分别应用到元素的内容框。在宽度和高度之外绘制元素的内边距和边框(元素默认效果)。

border-box:元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制。通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度。

3、Doctype作用?标准模式与兼容模式各有什么区别?

答：告知浏览器的解析器用什么文档标准解析这个文档。DOCTYPE不存在或格式不正确会导致文档以兼容模式呈现。

标准模式的排版和JS运作模式都是以该浏览器支持的最高标准运行。在兼容模式中，页面以宽松的向后兼容的方式显示,模拟老式浏览器的行为以防止站点无法工作。

4、html5有哪些新特性?如何处理HTML5新标签的浏览器兼容问题?如何区分 HTML和 HTML5?

答：HTML5现在已经不是 SGML的子集，主要是关于图像，位置，存储，多任务等功能的增加。

(1)绘画 canvas;

(2)用于媒介回放的 video和 audio元素;

(3)本地离线存储 localStorage长期存储数据，浏览器关闭后数据不丢失;

(4)sessionStorage的数据在浏览器关闭后自动删除;

(5)语意化更好的内容元素，比如 article、footer、header、nav、section;

(6)表单控件，calendar、date、time、email、url、search;

(7)新的技术webworker, websocket, Geolocation;

IE8/IE7/IE6支持通过document.createElement方法产生的标签，可以利用这一特性让这些浏览器支持HTML5新标签，浏览器支持新标签后，还需要添加标签默认的样式。当然也可以直接使用成熟的框架、比如html5shim。

以上就是环球青藤小编关于web前端面试题的相关分享，希望对大家有所帮助，想要了解更多相关内容，请及时关注本平台并进行查看!

2020年Web前端面试题汇总(一)

今天小编要跟大家分享的文章是关于2020年Web前端面试题汇总。由于内容较多小编分开为大家介绍，今天首先来和小编一起看一看第一部分的内容，希望这些面试题能够对正准备找Web前端相关工作的小伙伴们有所帮助。

1.说几条写JavaScript的基本规范?

1)不要在同一行声明多个变量;

2)请使用===/!==来比较true/false或者数值;

3)使用对象字面量替代newObject这种形式;

4)减少使用全局函数,全局变量;

5)switch语句必须带有default分支;

6)if语句必须使用大括号;

7)for-in循环中的变量;

应该使用var关键字明确限定作用域;

从而避免作用域全局污染。

2.说说平衡二叉树?

平衡二叉搜索树(Self-balancingbinarysearchtree)

又被称为AVL树。

具有以下性质：

1)它是一棵空树或它的左右两个子树

的高度差的绝对值不超过1，

并且左右两个子树都是一棵平衡二叉树。

2)平衡二叉树必定是二叉搜索树，反之则不一定。

3)平衡二叉树的常用实现方法有红黑树、AVL、

替罪羊树、Treap、伸展树等。

最小二叉平衡树的节点的公式如下：

F(n)=F(n-1)+F(n-2)+1备注：1是根节点，

F(n-1)是左子树的节点数量，

F(n-2)是右子树的节点数量。

3.清除浮动和解决垂直外边距重叠的解决方案?

问题描述:

1)父元素没有设置宽高，尺寸由子元素撑起;

子元素一旦浮动，父元素高度会发生塌陷。

2)子元素设置margin-top会作用的父元素的margin-top;

此时会造成垂直外边距重叠。

.clearfix::after,.clearfix::before{

content:'';

display:table;

clear:both;

}

4.sessionStorage、localStorage和cookie?

相同点:

都用于浏览器端存储的缓存数据;

不同点:

1)存储内容是否发送到服务器端

当设置了Cookie后，数据会发送到服务器端，

造成一定的宽带浪费;xxxstorage则会将数据保存

到本地，不会造成宽带浪费;

2)数据存储大小不同

Cookie数据不能超过4K，适用于会话标识;

xxxstorage数据存储可以达到5M;

3)数据存储的有效期限不同

cookie只在设置了Cookid过期时间

之前一直有效，即使关闭窗口或者浏览器;

sessionStorage,仅在关闭浏览器之前有效;

localStorage,数据存储永久有效;

4)作用域不同

cookie和localStorage是在同源同窗口中

都是共享的;

sessionStorage不在不同的浏览器窗口

中共享，即使是同一个页面;

5.判断一个单词是否是回文?

回文是指把相同的词汇或句子，

在下文中调换位置或颠倒过来，

产生首尾回环的情景，

叫做回文，也叫回环。

比如cacac，redivider。

letcheckPalindrom=(str)=>{

returnstr===

str.split('').reverse().join('');

}

6.不借助临时变量，进行两个整数的交换?

输入a=3,b=1,

输出a=1,b=3

letswap=(a,b)=>{

b=b-a;

a=a+b;

b=a-b;

return[a,b];

}

7.请写出至少5个html5新增的标签，并说明其语义和应用场景?

section：定义文档中的一个章节;

nav：定义只包含导航链接的章节;

header：定义页面或章节的头部;

它经常包含logo、页面标题和导航性的目录。

footer：定义页面或章节的尾部;

它经常包含版权信息、法律信息链接和反馈建议用的地址。

aside：定义和页面内容关联度较低的内容，

如果被删除，剩下的内容仍然很合理。

8.get和post请求在缓存方面的区别?

get请求类似于查找的过程，用户获取数据，

可以不用每次都与数据库连接，所以可以使用缓存。

post不同，post做的一般是修改和删除的工作，

所以必须与数据库交互，所以不能使用缓存。

因此get请求适合于请求缓存。

9.如何解决异步回调地狱?

promise、generator、async/await

10.图片的懒加载和预加载?

预加载：提前加载图片，

当用户需要查看时可直接

从本地缓存中渲染。

懒加载：懒加载的主要目的

是作为服务器前端的优化，

减少请求数或延迟请求数。

两种技术的本质：

两者的行为是相反的，

一个是提前加载，

一个是迟缓甚至不加载。

懒加载对服务器前端有一定

的缓解压力作用，

预加载则会增加服务器前端压力。

11.bind，apply，call的区别?

通过apply和call改变函数的this指向，

这两个函数的第一个参数都是一样的，

表示要改变指向的那个对象，

第二个参数，apply是数组，

而call则是arg1,arg2...这种形式。

通过bind改变this作用域

会返回一个新的函数，

这个函数不会马上执行。

12.js怎么控制一次加载一张图片，加载完后再加载下一张?

方法一:

varobj=newImage();

obj.src="#/21.jpg";

obj.onload=function(){

document.getElementById("pic")

.innnerHTML="";

}

加载中

web前端大厂10道经典面试题汇总(含答案详解)

整理的面试题目也源于牛客网，此平台汇集了前端大厂的面试题，更新全面且贴近现实，对正在寻找前端岗位的求职者来说，多去上面刷题会大有裨益，同时还有面试经验分享，观看也颇有益处。

1、编写一个JS函数，将数字每三位插入逗号，例如输入100000，输出为100,000（不考虑负数和小数）。

解析此题主要考察数据类型与字符串操作，可采用js内置方法或自定义逻辑实现。实现时，将数字转为字符串后，利用循环或递归从后向前取三位字符存入数组，直至不足三位。最后反转数组，使用join方法插入逗号。

2、给定一个字符串，找出其中无重复字符的最长子字符串长度。

解决此题的关键在于理解无重复字符的含义，即每个小分割内字符不重复。采用顺序循环，使用对象记录当前分割片段的字符，比较下一个字符是否重复，更新最大长度。

3、实现超出整数存储范围的两个大正整数相加。

针对大数字运算，使用数组存储位数不同的大整数，通过逆序相加并处理进位，得到结果后反转数组返回。

4、任意二维数组的全排列组合。

此题采用递归方式，将多项数组逐步相乘，实现全排列组合。简单明了，将复杂问题简化。

5、公司根据产品售价决定利润最大化。每个客户出价，确保公平，每个不低于售价的客户购买产品，最大化公司利润。

解题核心在于理解固定售价与出价规则，通过排序和遍历客户出价，筛选可购买的客户，计算利润。

6、找出字符串中出现次数最多的字符及其出现次数。

使用过滤和索引方法去重，分割字符串后比较得出结果。先去重，再遍历计算字符出现次数。

7、“123456789876543212345678987654321...”的第n位数字。

解决此题需找到最小循环节，通过模运算找到第n位数字。利用数学方法求解。

8、编写一个JavaScript函数parseQueryString，将URL参数解析为对象。

解析URL参数主要涉及字符串分割，首先分离问号和参数，按&分割，最后按=分割，创建对象存储解析结果。

9、判断给定字符串是否为回文，忽略标点、大小写和空格。

去除字符串中的非字母数字字符，转化为小写，比较正反读是否一致，得出回文结论。

10、确保字符串中每个单词首字母大写，其余部分小写。

简单处理字符串，利用正则或循环逐字符检查和修改单词，实现首字母大写其余小写。

如果你还想了解更多这方面的信息，记得收藏关注本站。