程序诗人2

这个屌丝很懒，什么也没留下！

热门标签

2022最全前端面试题（持续更新）_前端题库

作者：程序诗人2 | 2024-02-06 11:48:28

踩

前端题库

css部分

如何水平垂直居中一个盒子？

已知高度可以使用 line-height 等于高度实现垂直居中；使用 text-align:center实现水平居中
display:flex; align-items:center;justify-content:center;
绝对定位的话，给父元素设置定位属性 relative，子元素设置 absolute，然后设置子元素 top:0;left:0;right:0;bottom:0;margin:auto；

px、rem、em、vw的区别？

px是相对于显示器屏幕分辨率而言的，固定的一种单位。
em是相对于父元素的字体大小而言的，譬如父元素字体大小为16px，那么1em=16px，2em=32px。
rem是相对于根元素（html）字体大小而言的，浏览器默认的字体大小都是16px，那么1rem=16px，2rem=32px，可以根据设备的宽度，结合媒体查询（@media）来进行自适应的布局。
vw是窗口的实际宽度，1vw=1% 窗口的实际宽度。
对于只需要适配少部分手机设备，且分辨率对页面影响不大的，使用px即可。
对于需要适配各种移动设备，使用rem，例如只需要适配iPhone和iPad等分辨率差别比较挺大的设备。
为什么给font-size设置为62.5%：方便换算！

1. 因为绝大多数浏览器的默认字体大小为 16px ，而将font-size设置为 62.5% 则等价于字体大小的font-size:10px;
2. 随之在其他的换算单位，如 rem 的字体换算时，则可以表示为 1rem = 10px，整数值对于单位的换算会比较方便

3. 但是在Chrome（谷歌浏览器）中，支持最小字体的大小为 12px ，解决办法就是将html根字体设置为 font-size: 625%; 意：1rem = 100px ，以此单位换算

CSS中的定位方式？

绝对定位，参照离自己的最近的，有定位属性的父元素定位。
相对定位，参照自己本身的位置进行定位。
固定定位，基于浏览器窗口定位。
默认定位，，由左到右，从上往下流式布局。

都有哪些方式实现回到顶部功能?

1. 使用锚点，页面顶部放置一个锚点链接，然后在页面下方放置一个返回到该锚点的链接，用户点击该链接即可返回到该锚点所在的顶部位置。

//锚点方式
<body style="height:2000px;">
<div id="topAnchor"></div>
<a href="#topAnchor" style="position:fixed;right:0;bottom:0">回到顶部</a>
</body>

2. 监听浏览器的scollTop事件,当用户滚动到页面底部时，出现回到顶部按钮，点击之后重置浏览器滚动条的高度.

//兼容性获取并监听浏览器滚动条
var osTop=document.documentElement.scrollTop|| document.body.scrollTop;
document.documentElement.scrollTop=document.body.scrollTop = 0;

3.第三方插件，例如jquery中:

$('html,body').animate({srollTop:0},500);

flex布局

flex布局即为弹性布局，也就是弹性盒模型，给元素开启弹性盒之后，子元素的float、clear、 vertical-align等失效

flex-direction:决定主轴方向

row(默认值)：主轴为水平，起点在左端
row-reverse：主轴为水平，起点在右端
column：主轴为垂直方向，起点在上沿
column-reverse：起点在下沿

flex-wrap:是否换行

nowrap(默认) 不换行
wrap 换行首行在上
wrap-reverse 换行首行在下

justify-content:子元素在主轴上的对齐方式

flex-start(默认):左对齐
flex-end：右对齐
center：居中
space-between：两端对齐，子元素之间的间隔都相等
space-around：两端对齐(但子元素不与父元素边框贴合)，子元素两侧的间隔相等;故子元素之间的间隔比子元素与父元素边框的间隔大一倍

align-item:子元素在交叉轴上对齐方式

flex-start:交叉轴的起点对齐
flex-end:交叉轴的终点对齐
center:中点对齐
baseline:子元素的第一行
stretch(默认):若项目为设置高度或设置为auto，将占满整个父元素

设置在子元素的属性

order:定义子元素的排列顺序，数值越小，排列越靠前，默认为0
flex-grow:定义子元素的放大比例，默认为0，即如果存在剩余空间，也不放大；如果所有子元素的flex-grow属性为1，则它们将等分剩余空间
flex-shrink:定义子元素的缩小比例，默认为1，如果空间不足，该子元素将缩小；如果所有子元素的flex-shrink属性都为1，当空间不足时，都将等比例缩小
flex-basis：定义了在分配多余空间之前，子元素占据的主轴空间，默认值为auto
flex:前三者的缩写，默认值为 0 1 auto。

flex：1代表着什么？

flex：1 是 flex-grow、flex-shrink、flex-basis三个属性的缩写，一般默认为flex：1 1 auto（存在剩余空间就放大，空间不足就缩小）；
flex-grow：元素的放大比例，默认为1，即使存在剩余空间，也不会放大；
flex-shrink：元素的缩小比例，默认为1，即如果空间不足，该元素将缩小;
flex-basis:项目占据的主轴空间,默认为auto，即项目原本的大小。

http三次握手以及常见的状态码？

第一次握手是客户端给服务端发送请求，请求建立连接。
第二次握手是服务端给客户端发送请求，表示已经收到客户端的请求，并且同意建立连接。
第三次握手是客户端向服务端发送请求，表示确认收到服务端发送的信息。
三次握手的原因是为了确认客户端和服务端都有收发信息的能力，少一次确认不了，多一次浪费资源。

常见状态码：

200：服务器已经成功处理了请求。
3XX：表示重定向。
401：未授权，服务器请求身份验证。
404：服务器找不到请求的网页。
500：服务器内部错误，无法完成请求。
503：服务器目前无法使用。

简述四次挥手

什么是四次挥手：
由于TCP连接是全双工的,断开一个TCP连接,需要客户端与服务器发送四个包来确认连接的断开

简述四次挥手的过程:

因为TCP是全双工的,因此,每个方向都要单独关闭当一方完成数据发送任务后,发送一个FIN来终止这一方向的连接,收到一个FIN只是意味着一方向不会再收到数据了,但是这个TCP连接上仍然能够发送数据,直到这一方也发送了FIN.首先进行关闭的一方执行主动关闭,另一方执行被动关闭.第一个关闭的最后等待2MSL

第一次挥手:
- Client将FIN置为1,序号seq=M,发送给Server,进入FIN_WAIT_1状态

第二次挥手
- Server收到后,将ACK置为1,ack=M+1,响应给Client,进入CLOSE_WAIT状态
- Client收到响应后,进入FIN_WAIT_2状态

第三次挥手
- Server在结束所有数据传输后,将Fin置为1,seq=N+1,发送给Client,进入
- LAST_ACK状态

第四次挥手
- Client收到后,将ACK置为1,ack=N+1,响应给Server,进入TIME_WAIT状态,等待2MSL后,进入CLOSED状态
- Server收到后,进入CLOSED状态

如何实现页面自适应？

使用rem单位
使用媒体查询
使用flex结合百分比布局

CSS常见的布局方式？

流式布局，盒子自上而下排列。
弹性布局，flex弹性盒。
grid网格布局。
自适应（响应式布局），使用rem单位。

自适应布局 @media

通过判断当前窗口的大小，来决定使用什么样的布局

<meta name="viewport" content="width=device-width, initial-scale=1" />

@media screen (max-width: 1000px){} //窗口超过1000px时

注：使用自适应布局，不能使用绝对单位如 px

标准盒模型和怪异）盒模型：

W3C 标准盒模型：属性width,height只包含内容content，不包含border和padding。
IE （怪异）盒模型：属性width,height包含border和padding，指的是content+padding+border。

html中元素的margin是否会叠加（合并）？如何解决？

/* 会叠加   */
问题详解1： flex布局对子元素的影响
    1.子元素的float、clear和vertical-align属性将会失效
    2.解决了margin传递、重叠（叠加）问题

问题详解2：flex布局的margin传递叠加问题主要有以下两种
    1.父子间的margin，会由子级传递到父级
    —— 解决方法： margin传递的产生的原因是父级的高度没有被自动撑开，所以在父级父级增加属性：overflow: auto 即可解决
    2.兄弟间的margin值会重复叠加
    —— 解决方法：浏览器为了保证列表的整齐，上下margin产生了叠加，不能直接解决。只能通过减少一个margin的方式。如只定义margin-top:100px; margin-bottom:0px。的方式解决。

什么叫做优雅降级和渐进增强？

渐进增强 progressive enhancement：
    1. 针对低版本浏览器进行构建页面，保证最基本的功能，然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。
    2. 渐进增强观点则认为应关注于内容本身。内容是我们建立网站的诱因。有的网站展示它，有的则收集它，有的寻求，有的操作，还有的网站甚至会包含以上的种种，但相同点是它们全都涉及到内容。这使得“渐进增强”成为一种更为合理的设计范例。这也是它立即被 Yahoo! 所采纳并用以构建其“分级式浏览器支持 (Graded Browser Support)”策略的原因所在。

优雅降级 graceful degradation：
    1. 一开始就构建完整的功能，然后再针对低版本浏览器进行兼容。
    2. 优雅降级观点认为应该针对那些最高级、最完善的浏览器来设计网站。而将那些被认为“过时”或有功能缺失的浏览器下的测试工作安排在开发周期的最后阶段，并把测试对象限定为主流浏览器（如 IE、Mozilla 等）的前一个版本。

区别：
    1. 优雅降级是从复杂的现状开始，并试图减少用户体验的供给
    2. 渐进增强则是从一个非常基础的，能够起作用的版本开始，并不断扩充，以适应未来环境的需要
    3. 降级（功能衰减）意味着往回看；而渐进增强则意味着朝前看，同时保证其根基处于安全地带

CSS清除浮动的方法

1. 在标签尾部添加空块级标签，设置样式属性为：clear：both；缺点：如果页面浮动布局多，就要增加很多空div，不利于页面的优化。
2. 父级定义伪类after和zoom，.box:after{display:block; clear:both; content:""; visibility:hidden; height:0;} .box{ zoom: 1 }
3. 简单粗暴，父级设置overflow:hidden，缺点是不能和position配合使用
4. 直接给父元素单独设置高度（height）；缺点：只适合高度固定的布局，要给出精确的高度，如果高度和父级div不一样时，会产生问题。对于响应式布局会有很大影响。

移动端1px问题

原因：Retine屏的分辨率始终是普通屏幕的2倍，1px的边框在devicePixelRatio=2的retina屏下会显示成2px，在手机上缩小呈现时，导致边框太粗的效果

解决方式： .scale-1px{ position: relative; border:none; }
.scale-1px:after{ content: ''; position: absolute; bottom: 0; background: #000; width: 100%; height: 1px; -webkit-transform: scaleY(0.5); transform: scaleY(0.5); -webkit-transform-origin: 0 0; transform-origin: 0 0; }

BFC 原理怎么清除怎么创建bfc

BFC是块级格式化上下文；

原理：个人感觉只需要回答：BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会穿透去影响到外面的元素；属于同一个BFC的两个相邻Box的margin会发生重叠

注：1）内部的Box会在垂直方向，一个接一个地放置。 2）Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠 3）每个元素的margin box的左边，与包含块border box的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此。 4）BFC的区域不会与float box重叠。 5）BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。 6）计算BFC的高度时，浮动元素也参与计算）

清除： 1）在父元素中添加一个属性：overflow:hidden 2）在浮动的盒子之下再放一个标签，在这个标签中使用clear:both

创建一个BFC： 1）根元素 2）float属性不为none 3）position不为static和relative 4）overflow不为visible 5）display为inline-block, table-cell, table-caption, flex, inline-flex

http请求的完全过程

浏览器根据域名解析IP地址
浏览器于web服务器建立一个TCP连接
浏览器给web服务器发送一个http请求（请求行、请求方法、get post url 协议版本）
服务器端响应HTTP请求，浏览器得到html代码 (状态行、响应头部、响应数据)
浏览器解析HTML代码并请求 HTML代码中的资源
关闭TCP连接，浏览器对页面进行渲染呈现给用户

http协议和https协议

超文本传输协议，是一个基于请求与响应，无状态的，应用层的协议，常基于TCP/IP协议传输数据，互联网上应用最为广泛的一种网络协议

基于HTTP协议，通过SSL或TLS提供加密处理数据、验证对方身份以及数据完整性保护

CSS优化主要是4个方面

1、加载性能

css压缩：将写好的css进行打包，可以减少很多的体积。
css单一样式：在需要下边距和左边距的时候，很多时候选择：margin:top 0 bottom 0,但是margin-bottom:bot tom;margin-left:left;执行效率更高。
减少@import,而建议使用link,因为后者在页面加载时一起加载，前者是等待页面加载完成之后再进行加载。

2、选择器性能

关键选择器：选择器的最后面的部分为关键选择器。css选择器是从右向左进行匹配的。当使用后代选择器的时候，浏览器会遍历所有子元素来确定是否是指定的元素等等。
如果规则拥有ID选择器作为其关键选择器，则不要为规则增加标签。过滤掉无关的规则。
避免使用通配符规则，如果*{}，计算次数惊人，只对需要用到的元素进行选择。
尽量少的区队标签进行选择，而使用class。
了解哪些属性是可以通过继承而来的，然后避免对这些属性重复指定规则。

3、渲染性能

慎重使用高性能属性：浮动，定位。
尽量减少页面的重排和重绘。
去除控规则，{}。空规则的产生的原因一般来说是为了预留样式。去除这些空规则则无疑能减少css文档体积。
属性值为0时，不加单位。
属性值为浮动小数0.，可以省略小数点之前的0。
标准化各种浏览器前缀，带浏览器前缀的在前。标准属性在后。
不使用@import前缀，它会影响css的加载速度。
选择器优先嵌套，尽量避免层级过深。
css雪碧图：同一页面相近部分的小图标，方便使用，减少页面的请求次数，但是同时图片本身不变大，使用时，优劣考虑清楚使用。
正确使用display的属性，由于display的作用，某一些样式组合会无效，徒增样式体积的同时也影响性能。

4、可维护性和健壮性

将具有相同内容的样式抽离出来，整合并通过class在页面中进行使用，提高css的可维护性。
样式和内容分离，将css代码定义到外部css中。

html5的新增特性.

语义标签 header nav footer section main

视频和音频 video audio

canvas 绘图

SVG绘图

新增表单元素：

progress //进度条

meter //刻度值

新增input输入特性：

color：选取颜色

date：选取日期

datetime：选取日期

month：选取月份

week 选取年

但其不支持ie8及ie8以下版本的浏览器

Js部分

js中数据类型

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/程序诗人2/article/detail/62581