前端面试-必会


1. http 与 https 的区别?

http协议传输的数据是未加密的(明文的),传输隐私信息不安全。

https是由SSL+HTTP协议构建的可进行加密传输、身份认证,比较安全


2. vue 和 react 的区别?

共同点:

都是组件化开发---(在UI层,将页面功能组件化--(方便复用),嵌套形成网页)

都是数据驱动视图---(解决了频繁操作DOM来实现页面效果交互的问题;只需要关注数据变化即可)

都使用虚拟DOM---(通过 JS 的 Object 对象模拟 DOM 中的节点,然后再通过特定的 render 方法将其渲染成真实的 DOM 节点。)

不同点:

我认为二者最大的不同在于生态环境的不同,

vue 框架简单通俗易理解,上手难度小,但是相对 react 来说生态环境较差,比如 vue2 和 vue3 两版本的区别差异就很大,从 vue2 到 vue3 就需要重新的学习;

而 react 的生态环境相对来说比较好,有着更多的插件、依赖来支撑。


react 生命周期函数:

1.constructor()

创建和初始化对象时调用;

当中 super(props) 是用来给 props 实例化的 (this.props = props)

2.render()

渲染--第一次挂在和更新(类组件中必须实现的方法--是一个存函数)

3.componentWillMount()

在第一次组件渲染之前执行-render()之前执行--且只会执行一次

4.componentDidMount()

组件挂载完成时触发--在第一次渲染之后立即执行

5.shouldComponentUpdate()

每当进行数据更新或页面重新渲染时会触发,当函数返回值为 true 时页面可以更新,当返回值为 false 时页面不会更新而会保持原有状态。

注意:--shouldComponentUpdate() 函数可以做性能优化使用,在函数内部判断修改的数据是否跟原数据一致,如不一致则修改,一致则保持原有状态。

6.componentWillUpdate()

组件每次更新前调用此函数--由于安全性问题后改名为 UNSAFE_componentWillUpdate()

7.componentDidUpdate()

组件每次更新完毕后立即执行

8.componentWillUnmount()

将要卸载函数,在将要卸载函数组件前调用

9.componentWillReceiveProps()

父组件中改变了 props传值时触发的函数


3. Ajax 的实现原理

实现过程:

首先,有客户端事件触发Ajax事件。

然后,创建 xmlHttpRequest 对象,根据浏览器不同,创建的 xmlHttpRequest 对象不同。调用open方法,用 send 发送请求给Ajax引擎。

最后,执行完毕后,把结果返回给客户端。

好处:

不用页面刷新,并且在等待页面传输数据的同时可以进行其他操作。

readyState属性有五个状态值。

0:是uninitialized,未初始化。已经创建了XMLHttpRequest对象但是未初始化。

1:是loading,send for request but not called .已经开始准备好要发送了。

2:是loaded, send called,headers and status are available。已经发送,但是还没有收到响应。

3:是interactive,downloading response,but responseText only partial set.正在接受响应,但是还不完整。

4:是completed,finish downloading.接受响应完毕。

responseText:服务器返回的响应文本。只有当readyState>=3的时候才有值,根据readyState的状态值,可以知道,当readyState=3,返回的响应文本不完整,只有readyState=4,完全返回,才能接受全部的响应文本。


4. 三次握手 四次挥手

ps:客户端想要与服务器建立连接,必须经过三次握手;

三次握手过程:

第一次:建立连接,客户端发请求包到服务器,并等待服务器确认;

第二次:服务器收到请求包并且确认后再向客户端发送确认包;

第三次:客户端收到来自服务器的确认包后,再向服务器端发送确认包,完成建立连接。

ps:---释放连接,需要四次挥手。

四次挥手过程:

(主机1--主机2---可以是客户端也可以是服务器端)

第一次:主机1向主机2发送一个关闭请求;

第二次:主机2收到主机1发来的请求后回复主机1同意关闭请求;

第三次:主机2再向主机1发送报文,请求关闭连接;

第四次:主机1收到主机2发来的请求后再向主机2发送同意,主机2收到后关闭连接。


5. HTML 语义化

代码结构清晰,方便阅读,有利于团队合作开发。

方便其他设备解析(如屏幕阅读器、盲人阅读器、移动设备)以语义的方式来渲染网页。

有利于搜索引擎优化(SEO)。

便于团队开发和维护,语义化更具可读性,遵循W3C标准的团队都遵循这个标准,可以减少差异化。


6. 网页加载 HTML CSS JS 的过程

网页加载流程:

浏览器发送请求,拿到 HTML 资源,并开始解析,解析过程中如遇到 <Link> 标签,浏览器会发出对 CSS 文件的请求,

继续向下解析,遇到 <body> 标签,并且 CSS 文件已经下载完成,就可以开始渲染页面,当浏览器遇到 <script>

标签,阻止页面的解析以及其他资源的下载,直到 JS 文件加载执行完毕,这样浏览器就完成了解析 HTML 页面。


7. 闭包的原理 带来的影响

说起闭包就要从变量的作用域开始说起了,变量分为全局变量和局部变量,JS 语言的特点是在函数内部可以直接读取全局变量,但是在函数外部无法读取函数内的局部变量;

想要从外部读取到函数内部的局部变量,就要在函数内部再定义一个函数;

闭包就是能够读取其他函数内部变量的函数,这就是所谓的闭包

影响:

由于闭包的使用会使得函数中的变量被保存在内存中,内存消耗大,如果滥用闭包的化,会造成像IE内存泄漏等问题;

解决方法:

在退出函数之前,将不使用的局部变量全部删除。


8. JS作用域链

各个作用域的嵌套关系组成一条作用域链;

作用域链主要是进行标识符(变量和函数)的查询,标识符解析就是沿着作用域链一级一级的搜索标识符的过程,而作用域链就是保证对变量和函数的有序访问。

ps:自身作用域未声明的变量,沿着作用域链逐渐向上查找。


9. 跨域的产生与解决方案

产生:

当一个网络请求url时,协议、域名、端口三者之间任意一个与当前页面不同即为跨域

解决方案:

1.通过W3C标准的 cors 跨域资源共享的方式解决;(通过配置文件的请求头的方式解决)

2.通过设置代理服务器的方式解决;

3.通过 nginx 代理的方式解决跨域原理与 cors 一样

4.通过 JSONP 解决;(jsonp的原理就是利用 JS 标签没有跨域限制,通过 JS 标签 src 属性,发送带有 callback 参数的 GET 请求,服务端将接口返回数据拼凑到 callback 函数中,返回给浏览器,浏览器解析执行,从而前端拿到 callback 函数返回的数据。)


10. JS 预加载如何处理?

JS 预加载--浏览器载入 JS 代码时会扫描定义的全部变量设置为 undefined 然后再从上到下执行 JS 代码,遇到赋值情况则替换掉该值;

ps:

var a,b;

a='新值';

预加载时,首先会设置 变量 a,b 的值为 undefined ,然后向下执行给a赋值为新值,b 还是undefined。


11. CSS : 盒子模型  浮动  清除浮动  定位(分别有哪几种)

盒子模型:

盒子即容器--由元素的内容、内边距(padding)、边框(border)和外边距(margin)组成。

浮动:

float:none ; 不浮动(默认值)

float:left ; 左浮动

float:right ; 右浮动

解决方法:

父级添加overflow: hidden

添加伪类 ::after

定位:

1.静态定位 (static)---一般的标签元素不加任何定位属性都属于静态定位;

2.绝对定位 (absolute--position: absolute;)---绝对定位元素可层叠,层叠顺序可通过 z-index 属性控制,z-index值为无单位的整数,大的在上面,可以有负值。

3.相对行为 (relative--position: relative;)---相对定位元素不可层叠,依据left、right、top、bottom等属性在正常文档流中偏移自身位置。同样可以用z-index分层设计

4.固定定位 (fixed)---固定定位与绝对定位类似,但它是相对于浏览器窗口定位,并且不会随着滚动条进行滚动。


12. 选择器  权重

CSS 选择器:行内、ID、class;

权重(!important>style(行内)>id>class)---ps:权重是可以叠加的

  • 2
    点赞
  • 9
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值