前端面试必备(持续更新)

最新推荐文章于 2022-08-31 10:55:21 发布

置顶 ERRFTF

最新推荐文章于 2022-08-31 10:55:21 发布

阅读量404

点赞数 3

分类专栏：笔记文章标签：面试前端 http

本文链接：https://blog.csdn.net/qq_45402495/article/details/109491706

版权

笔记专栏收录该内容

4 篇文章 0 订阅

订阅专栏

前端面试必备（面试题及知识点混杂）

1. 画一条0.5px的直线(运用CSS)

height:1px; Transfrom:scale(0.5)

2.import 与 link之间的区别

1.link为html标签没有兼容性问题 link加载的话页面会重新加载，link的样式权重高于import 的样式权重
2.import 是由CSS提供的会有兼容性问题只有当CSS文件加载之后才会加载

3.rem em vh px 之间有什么区别

rem是根据html中的font-size大小进行设定的，em是根据父元素字体大小进行设定的
vh/vw(viewHeight和viewWidth的缩写) 视窗的高度和宽度，相当于屏幕高度或宽度的1%
px 像素相对长度单位像素是就屏幕分辨率所言

4. websocket 与 ajax轮询

websocket 是h5新增的特性用于服务端和客户端之间的通信只要建立一次就可以尽享不间断的通信，节省宽带和服务端的压力
ajax会隔一段时间发送一次请求，每次都要建立http连接，即使传输的数据量很少，浪费宽带

5. get 和 post 缓存方面的区别

get 一般向后端获取查询的数据，不会对数据进行修改会进行缓存
post 一般会对数据进行修改很少缓存

6. react生命周期以及其作用

1.constructor进行react数据的初始化
2.componentWillMount 使用的较少在初始化完成之后dom未渲染之前
3. componentDidMount dom渲染挂载完成可在此处进行接口请求
4. componentWillReceiveProps 一般用于监听数据或者路由一旦发生变化时会进行数据重新渲染（componentWillReceiveProps是比较前后两个props 如果不同再将state更新上面去会破坏单一的数据源，由此出现了getDerivedStateFromProps来取代，getDerivedStateFromProps有两个参数nextProps和preStateq强制开发者对两者进行比较，会根据当前的props更新数据，避免混乱）
5. shouldComponentUpdate此方法用来判断组件是否需要更新（众所周知，父组件更新，子组件也会更新，为了避免不必要的渲染可以阻止子组件的更新 return false ）可在子组件的生命周期中进行判断
6.componentWillUpdate组件更新之前
7.componentDidUpdate组件更新之后
8.componentWillDestory组件销毁之前
9.componentDidDestoryed 组件销毁完成

7.Get 和 Post 之间的区别

1.get 重点从服务器获取数据 post向服务器发送数据
2.get 传输通过url，用户是可见的，post数据传输是通过HtTP的post机制，将字段与对应的值封装传输给服务端这个使用户不可见的
3.get的传输量比较小，但是效率高，post可以传输大量的数据所以上传文件时使用post
4.get 是可见的安全性比较低，post 安全性比较高
5.get只支持ASCALL 码， post可以直接向后端传递中文字符

8.常见的HTTP状态码有

200 请求被正常处理
204 请求被受理但是没有资源返回
206 客户端只是请求资源的一部分服务端只对请求的一部分执行资源的GET 方法，相应报文中通过Content-Range范围制定资源范围。
301 永久性重定向
302 临时重定向
303 与状态码302有相似功能知识他希望客户在请求一个地址的时候，能通过GET方法重定向到另一个网址（URL）上。
304发送附带条件的请求时，条件不满足时返回，与重定向无关。
307 临时重定向与302类似只是强制使用POST方法。
400 请求报文语法有错，浏览器无法识别。
401 请求需认证
403 请求的资源禁止被访问
404 服务器无法找到对应的资源
500 服务器内部错误
503 服务器正忙

9.position四个值

Static 静态定位默认值。出现在正常流中
Relative 相对定位根据元素本身的位置进行定位（占据原来的位置）
fixed 固定定位参照浏览器窗口的位置（不会占位）
absolute 绝对定位根据父元素进行定位（不会占位）

10.HTTP缺点与HTTPS

通信明文不加密，内容可能会被窃听
不验证通信方身份可能会遭伪装
无法验证报文的完整性可能被篡改
HtTPS 就是加密处理+认证+完整性保护
HTTP优化负载均衡

11.ES6 新增

模版字符串
箭头函数
Set 方法（可用于去重）
展开运算符
变量声明let 常量声明const
…

12. 隐藏元素的方法

transform:scale(0)
disply:none
visibility:hidden
opacity:0
position:absolute
欢迎补充

13. Promise promise面试必备

14. let const var 三者之间的区别

let 局部作用域块声明变量const局部作用域块声明常量(const 声明完之后要直接赋值不然会报错)两者都不能重复声明没有变量提升，会存在暂时性死区的问题，不会挂载到顶层对象的下面(window) ， var变量提升可以重复声明，const简单类型一旦声明不能更改复杂类型指针指向不能更改数据可以更改
tips: node环境下的顶级对象是global ，浏览器环境下的顶级对象是window

15. 获取子节点的方式（这个问题比较小众但是还真的被问到过）

1.可以获取父节点

var a  = document.getElementById("test").getElementByTagName("div")
//获取父节点
var b = document.getElementById("test").parentNode
var c = document.getElementById("test").parentElement

2.可以获取子节点

var b = document.getElementById("test").childNodes
//获取兄弟节点的方式
//通过父元素获取
var p2 = document.getElementById("test").parentNode.children[1]
//获取上一个兄弟节点
var brother1 = document.getElementById("test").previousElementSibling
var brother2 = document.getElementById("test").previousSibliing
//获取下一个兄弟节点
var brother3 = document.getElementById("test").nextElementSibling
var brother4 = document.getElementById("test").nestSibling

16. 深拷贝与浅拷贝

深拷贝浅拷贝超详细讲解

JS面试总结

vue项目总结

17. react中keys的重要性

keys是react中用于追踪元素是否被添加被修改被移除的辅助标志
在开发过程中需要保证每一个元素唯一性借助元素来判断减少不必要的重新渲染

18. 虚拟dom为什么能够提高性能

虚拟dom相当于在js和真实dom之间添加了一个缓存利用dom diff的算法避免了没有必要的dom操作从而提高性能
js对象结构为一个dom树结构用这个树构建一个真正的dom树插到文档中记录差异
，把虚拟dom的差异更新到真实的dom上面去更新差异部分不会所有的重新渲染节省能耗
选择性子渲染在componentShouldUpdate中可以阻止或继续渲染提高性能1

19. 浮动的工作原理？清除浮动的技巧

浮动元素是脱离文档流，不占据空间。

清除浮动 1.使用空标签清除浮动。这种方法是在所有浮动标签后面添加一个空标签，定义css clear:both，弊端就是增加了无意义的标签。
2.使用overflow。给包含浮动元素的父标签添加css属性 overflow:hidden;zoom:1
3.使用伪对象清除浮动

#parent:after{
    content:".";
    height:0;
    visibility:hidden;
    display:block;
    clear:both;
}

4.给父元素添加高度

20. h5有哪些新增特性

拖拽释放(Drag and drop) API
语义化更好的内容标签（header,nav,footer,aside,article,section）
音频、视频API(audio,video)
画布(Canvas) API
地理(Geolocation) API
本地离线存储 localStorage 长期存储数据，浏览器关闭后数据不丢失；
sessionStorage 的数据在浏览器关闭后自动删除
表单控件，calendar、date、time、email、url、search
新的技术webworker, websocket, Geolocation

2020年12月10日更

写出0-9的随机排序

function order(){
  return Math.random()>0.5?-1:1
}
let arr = [0,1,2,3,4,5,6,7,8,9]
arr.sort(order)

console.log(true+1) // 2    题中为加号会发生显示转换布尔值转换成数字

http请求有哪几部分组成

请求行
方法字段、URL字段和HTTP协议版本 GET /index.html HTTP/1.1

请求头
User-Agent：产生请求的浏览器类型。
Accept：客户端可识别的内容类型列表。
Host：主机地址
Authorization：授权信息，通常出现在对服务器发送的WWW-Authenticate头的应答中。
Accept-Language：浏览器所希望的语言种类，当服务器能够提供一种以上的语言版本时要用到。
Cookie：设置cookie,这是最重要的请求头信息之一

请求体
post方法中，会把数据以key value形式发送请求

ERRFTF

关注

3
点赞
踩
9

收藏

觉得还不错? 一键收藏
1
评论
前端面试必备(持续更新)

前端面试必备（面试题及知识点混杂）1. 画一条0.5px的直线(运用CSS)height:1px; Transfrom:scale(0.5)2.import 与 link之间的区别1.link为html标签没有兼容性问题 link加载的话页面会重新加载，link的样式权重高于import 的样式权重2.import 是由CSS提供的会有兼容性问题只有当CSS文件加载之后才会加载3.rem em vh px 之间有什么区别rem是根据html中的font-size大小进行设定的，em是
复制链接

扫一扫