2023年最新前端面试题汇总大全（含答案超详细，HTML,JS,CSS汇总篇）-- 持续更新 2

26. 浏览器存储技术 ?

Cookie：是客户端与服务器进行会话使用的一个能够在浏览器本地存储的技术，能存放4kb数据，目的是辨别用户身份

LocalStorage ： 在HTML5中新增用来作为本地存储来使用的，解决了cookie存储空间不足的问题(cookie中每条cookie的存储空间为4k)

SessionStorage ： sessionStorage与localStorage的唯一一点区别就是localStorage属于永久性存储，而sessionStorage属于当会话结束的时候，sessionStorage中的键值对就会被清空。

27.CSS定位方式？

static：元素框正常生成。块级元素生成一个矩形框，作为文档流的一部分，行内元素则会创建一个或多个行框，置于其父元素中。

relative：元素框偏移某个距离。元素仍保持其未定位前的形状，它原本所占的空间仍保留。

absolute：元素框从文档流完全删除，并相对于其包含块定位。包含块可能是文档中的另一个元素或者是初始包含块。元素原先在正常文档流中所占的空间会关闭，就好像元素原来不存在一样。元素定位后生成一个块级框，而不论原来它在正常流中生成何种类型的框。

fixed：元素框的表现类似于将 position 设置为 absolute，不过其包含块是视窗本身。

28.尽可能多的写出浏览器兼容性问题？解决

不同浏览器的标签默认的margin和padding不同

在CSS文件开头，加*{margin: 0; padding: 0;}，把所有标签的margin和padding设置为0

块属性标签float后，又有横行的margin情况下，在IE6显示margin比设置的大

可以将块级元素display设置为inline

设置较小高度标签（一般小于10px），在IE6，IE7， 实际的高度会超出设置的高度，这是因为浏览器给标签设置了一个默认的最小高度

设置{overflow: hidden;}，或者设置line-height小于你设置的高度。

在某些浏览器中，图片有默认的间距(所有有文字属性的标签都会有边距，除非两个标签连在一起没有隔开)；

使用float为img布局，因为所有标签设置float之后都会变成块级元素，块级元素浮动时会紧挨在一起，没有边距

IE9以下浏览器不能使用opacity；

{opacity: 0.5;filter: alpha(opacity = 50);filter: progid:DXImageTransform.Microsoft.Alpha(style = 0, opacity = 50);}。

29.HTML全局属性(global attribute)有哪些

class:为元素设置类标识

data-*: 为元素增加自定义属性

draggable: 设置元素是否可拖拽

id: 元素id，文档内唯一

lang: 元素内容的的语言

style: 行内css样式

title: 元素相关的建议信息

30.网页验证码是干嘛的，是为了解决什么安全问题

区分用户是计算机还是人的公共全自动程序。可以防止恶意破解密码、刷票、论坛灌水

有效防止黑客对某一个特定注册用户用特定程序暴力破解方式进行不断的登陆尝试

31.为什么利用多个域名来存储网站资源会更有效？

CDN缓存更方便

突破浏览器并发限制

节约cookie带宽

节约主域名的连接数，优化页面响应速度

防止不必要的安全问题

32.一个页面上有大量的图片（大型电商网站），加载很慢，你有哪些方法优化这些图片的加载，给用户更好的体验。

图片懒加载，在页面上的未可视区域可以添加一个滚动事件，判断图片位置与浏览器顶端的距离与页面的距离，如果前者小于后者，优先加载。

如果为幻灯片、相册等，可以使用图片预加载技术，将当前展示图片的前一张和后一张优先下载。

如果图片为css图片，可以使用CSSsprite，SVGsprite，Iconfont、Base64等技术。

如果图片过大，可以使用特殊编码的图片，加载时会先加载一张压缩的特别厉害的缩略图，以提高用户体验。

如果图片展示区域小于图片的真实大小，则因在服务器端根据业务需要先行进行图片压缩，图片压缩后大小与展示一致。

33.web开发中会话跟踪的方法有哪些

cookie

session

url重写

隐藏input

ip地址

34.title与h1的区别、b与strong的区别、i与em的区别

title属性没有明确意义只表示是个标题，H1则表示层次明确的标题，对页面信息的抓取也有很大的影响

strong是标明重点内容，有语气加强的含义，使用阅读设备阅读网络时：会重读，而是展示强调内容

i内容展示为斜体，em表示强调的文本

35.浏览器的内核有哪些？分别有什么代表的浏览器？

IE: trident内核

Firefox：gecko内核

Safari:webkit内核

Opera:以前是presto内核，Opera现已改用Google - Chrome的Blink内核

Chrome:Blink(基于webkit，Google与Opera Software共同开发)

36.浏览器是如何渲染页面的？

1.解析文档构建DOM树

HTML/XHTML/SVG：解析这三种文件后，会生成DOM树（DOM Tree）

CSS：解析样式表，生成CSS规则树（CSS Rule Tree）

JavaScript：解析脚本，通过DOM API和CSSOM API操作DOM Tree和CSS Rule Tree，与用户进行交互。

2.构建渲染树

解析文档完成后，浏览器引擎会将 CSS Rule Tree 附着到DOM Tree 上，并根据DOM Tree 和 CSS Rule Tree构造 Rendering Tree（渲染树）

3.布局与绘制渲染树

解析position, overflow, z-index等等属性，计算每一个渲染树节点的位置和大小，此过程被称为reflow。最后调用操作系统的Native GUI API完成绘制（repain）。

37.TCP为什么需要三次握手和四次挥手

三次握手是为了建立可靠的数据传输通道，四次挥手则是为了保证等数据完成的被接收完再关闭连接。

38.TCP三次握手

当有客户端需要建立连接的时候就会发送一个确定连接的报文，此报文是同步报文SYN = 1，并且会生成一个随机的序号 seq = x，这是第一次握手

当服务端接收到请求连接报文的时候，会发送一个同步报文确认报文，此报文 SYN = 1，并且 ACK = 1，同时服务端也会随机生成一个 seq = y，并将 ack 设置成 x + 1，回传给客户端，这是第二次握手

当客户端接收到服务端的 ACK 报文后，会回复一个 ACK 确认报文，用于确认确认报文已经收到，此报文 ACK = 1，seq = x + 1, ack = y + 1，这是第三次握手；

这里有个点说明一下：大写的 ACK 表示报文的类型是确认报文，小写的 ack 是报文里面的确认号，这个确认号是上一次握手对方的 seq 值加 1 得到

39.TCP四次挥手

客户端发起 FIN 断开连接的报文，携带随机生成的 seq 值 u，发送给服务端，并且自己处于 FIN-WSIT 状态，这是第一次挥手；

服务端接收到 FIN 报文后，回复一个确认报文，其中 ACK = 1，随机生成一个 seq，以及 ack = u + 1，这是第二次挥手；

当服务端数据发送完了过后，再发送一个 FIN 报文给客户端，通知客户端，服务端准备关闭连接了，此报文 FIN = 1，ACK = 1，ack = u + 1，seq = w，这是第三次挥手；

当客户端收到 FIN 确认报文时再发送一个FIN 的确认报文，其中 ACK = 1，seq = u + 1，ack = w + 1，并进入 TIME-WAIT 状态，当等待 2MSL 后关闭连接，这是第四次挥手。

40.data-属性的作用？

data-为H5新增的为前端开发者提供自定义的属性，

这些属性集可以通过对象的 dataset 属性获取，

不支持该属性的浏览器可以通过 getAttribute 方法获取 :

需要注意的是：data-之后的以连字符分割的多个单词组成的属性，获取的时候使用驼峰风格。 所有主流浏览器都支持 data-* 属性。

即：当没有合适的属性和元素时，自定义的 data 属性是能够存储页面或 App 的私有的自定义数据

41.HTML5新特性？

1.语义化标签

header：定义文档的页眉（ 头部）

nav: 定义导航链接的部分

footer: 定义文档或节的页脚 (底部)

article: 定义文章内容

section: 定义文档中的节 (section、区段)

aside: 定义其所处内容之外的内容 (侧边)

2.媒体标签

audio：音频

属性：

src音频链接

controls控制面板

autoplay自动播放

loop='true’循环播放

video：视频

属性：

poster: 指定视频还没有完全下载完毕，或者用户还没有点击播放前显示的封面。默认显示当前视频文件的第一针画面，当然通过poster也可以自己指定

controls：控制面板

width，height

source标签：因为浏览器对视频格式支持程度不一样，为了能够兼容不同的浏览器，可以通过source来指定视频源。

3.表单

表单类型:

email:能够验证当前输入的邮箱地址是否合法

url :验证URL

number: 只能输入数字，其他输入不了，而且自带上下增大减小箭头,max属性可以设置为最大值，min可以设置为最小值，value为默认值。

search : 输入框后面会给提供一个小叉，可以删除输入的内容，更加人性化。

range : 可以提供给一个范围，其中可以设置max和min以及value，其中

value属性可以设置为默认值

color : 提供了一个颜色拾取器

time : 时分秒

date : 日期选择年月日

datatime: 时间和日期(目前只有Safari支持)

datatime-local: 日期时间控件

week : 周控件

month: 月控件

表单属性：

placeholder: 提示信息

autofocus : 自动获取焦点

autocomplete=“on” 或者 autocomplete=“off”使用这个属性需要有两个前提:

表单必须提交过

必须有name属性

required: 要求输入框不能为空，必须有值才能够提交

pattern=””里面写入想要的正则模式

multiple: 可以选择多个文件或者多个邮箱

form=form表单的ID!

表单事件：

oninput 每当input里的输入框内容发生变化都会触发此事件。

oninvalid 当验证不通过时触发此事件。

4.进度条，度量器

progress标签:用来表示任务的进度 (IE、Safari不支持) ，max用来表示任务的进度，value表示已完成多少

meter属性: 用来显示剩余容量或剩余库存 (IE、Safari不支持)

high/low:规定被视作高/低的范围

max/min: 规定最大/小值

value: 规定当前度量值

5.DOM查询操作

document.querySelector()

document.querySelectorAll()

6.Web存储

localStorage和sessionStorage

7.其他

拖放：拖放是一种常见的特性，即抓取对象以后拖到另一个位置。设置元素可拖放

canvas和svg

websocket，webwork

地理定位

data-自定义属性

42.web worker的理解？如何创建？

在 HTML 页面中，如果在执行脚本时，页面的状态是不可相应的，直到脚本执行完成后，页面才变成可相应。web worker 是运行在后台的 js，独立于其他脚本，不会影响页面的性能。 并且通过 postMessage 将结果回传到主线程。这样在进行复杂操作的时候，就不会阻塞主线程了。

创建：

检测浏览器对于 web worker 的支持性

创建 web worker 文件 (js，回传函数等)

创建 web worker 对象

43.说下HTML5 drag API

dragstart：事件主体是被拖放元素，在开始拖放被拖放元素时触发。

darg：事件主体是被拖放元素，在正在拖放被拖放元素时触发。

dragenter：事件主体是目标元素，在被拖放元素进入某元素时触发。

dragover：事件主体是目标元素，在被拖放在某元素内移动时触发。

dragleave：事件主体是目标元素，在被拖放元素移出目标元素是触发。

drop：事件主体是目标元素，在目标元素完全接受被拖放元素时触发。

dragend：事件主体是被拖放元素，在整个拖放操作结束时触发。

44.Http 短轮询、长轮询

轮询：是由由客户端每隔一段时间(如每隔5s) 向服务器发出HTTP请求，服务端接收到请求后向客户端返回最新的数据。

客户端轮循：短轮询，长轮询

短轮询：一般是由客户端每隔一段时间(如每隔5s) 向服务器发起一次普通 HTTP 请求 。服务端查询当前接口是否有数据更新，若有数据更新则向客户端返回最新数据，若无则提示客户端无数据更新

长轮询： 一般是由客户端向服务端发出一个设置较长网络超时时间的 HTTP 请求，并在Http连接超时前，不主动断开连接；待客户端超时或有数据返回后，再次建立一个同样的Http请求，重复以上过程

45.canvas绘图基础(直线，三角形，矩形，圆形)

<canvas id=“myCanvas” width=200 height=100 ></canvas>

id 是canvas元素的标识；

height,width规定画布大小

直线：

beginPath()方法，指示开始绘图路径： ctx.beginPath();

moveTo()方法将坐标移至直线起点： ctx.moveTo(x,y);

lineTo()方法绘制直线： ctx.lineTo(x,y);

stroke()方法，绘制图形的边界轮廓： ctx.stroke();

closePath()方法，指示闭合绘图路径: ctx.closePath()

    var mycanvas=document.getElementById("canvas");
    var ctx=mycanvas.getContext("2d");
  ctx.beginPath();
  ctx.moveTo(100,100);//移动到绘制点
  ctx.lineTo(200,200);
  ctx.strokeStyle="#000000"; //指定描边颜色
  ctx.stroke();

三角形：

  var mycanvas=document.getElementById("canvas");
    var ctx=mycanvas.getContext("2d");
  ctx.beginPath();
  ctx.moveTo(100,200);
  ctx.lineTo(400,200);
  ctx.lineTo(250,400);
  ctx.closePath();//闭合绘图
  ctx.strokeStyle="#000000";
  ctx.stroke();

矩形：

绘制矩形：rect(x,y,width,height)；

绘制矩形边框：strokeRect(x, y, width, height);

绘制填充矩形：fillRect(x, y, width, height);

擦除指定矩形区域：clearRect(x, y, width, height);

  var mycanvas=document.getElementById("canvas");
  var ctx=mycanvas.getContext("2d");
  //rect()函数调用
  ctx.beginPath();
  ctx.rect(20,20,100,50);
  ctx.stroke();

圆形：arc(centerx,centery,radius,startAngle,endAngle,antiClockwise);

centerx,centery 圆弧中心点坐标

Radius 半径

startAngle 起始弧度

endAngle 终止弧度

antiClockwise 是否按逆时针方向绘图， 是一个可选参数，默认为false（即顺时针方向绘图）

弧度 = 角度* ( Math.PI / 180 )

  var mycanvas=document.getElementById("canvas");
  var ctx=mycanvas.getContext("2d");
  //arc()函数调用
  ctx.beginPath();
  ctx.arc(100,150,70,0,90*Math.PI/180,true);
  ctx.stroke();

46.TCP和HTTP区别？

TCP对应于传输层，HTTP对应于应用层，从本质上来说，二者没有可比性。

Http协议是建立在TCP协议基础之上的，当浏览器需要从服务器获取网页数据的时候，会发出一次Http请求。Http会通过TCP建立起一个到服务器的连接通道，当本次请求需要的数据完毕后，Http会立即将TCP连接断开，这个过程是很短的。所以Http连接是一种短连接，是一种无状态的连接

TCP是底层协议，定义的是数据传输和连接方式的规范。

HTTP是应用层协议，定义的是传输数据的内容的规范。

HTTP协议中的数据是利用TCP协议传输的，所以支持HTTP就一定支持TCP