0
点赞
收藏
分享

微信扫一扫

2022-前端基础知识总结扩展-逐步更新

時小白 2022-04-13 阅读 90

以下内容本人自行整理,供自己学习复习使用。
常用的浏览器内核?
常见的浏览器内核可以分为四种:Trident、Gecko、Blink、Webkit。
行内元素和块元素的区别?
块元素默认独占一行,自上而下排列,可以自定义宽度和高度,一般作为其他元素的容器。
行内元素只占据它对应标签的边框所包含的空间。
区别:
内容上:行内元素只能包含数据和其他行内元素,而块级元素可以包含行内元素和其他块级元素。而这种结构上的包含继承区别可以使得块级元素创建比行内元素更大型的结构。
格式上:行内元素不会以新行开始,块级元素会新起一行,行内元素只占据放置其中内容的宽度,块元素忽视内容占据全行。
属性上:行内元素width和height属性不起作用。垂直方向上的内外边距以及边框会被应用,但是不会把其他inline状态的盒子推开。
扩展:HTML 代码中的所有连续的空格或空行(换行)都会被显示为一个空格,不管是内容还是标签之间。当我们想让它们在同一行连续显示时,就让所有的代码之间没有空格,也不要换行。
相互转换:display:block display:inline
** 清除浮动的方法?**
前景提要:
浮动:float:xx,即浮动元素脱离正常的文档布局流并吸附到其父容器的xx边。
特例:三列浮动,在浮动方向相同的情况下,按照源代码顺序优先浮动。
在三列浮动下添加标签会在最长列旁边浮动,则需用clear属性运用到元素上。可以取三个值,left,right,both。
浮动问题
防抖的节流
防抖是延迟执行(使用场景:频繁触发、输入框搜索等。)
节流是间隔执行(使用场景:使用场景:频繁触发、onrize,onscroll滚动条,抢购按钮高频点击。)
防抖动是将多次执行变为最后一次执行,节流是将多次执行变成每隔一段时间执行。
函数节流即每隔一段时间就执行一次,实现原理为 设置一个定时器,约定XX毫秒后执行事件,如果时间到了,那么执行函数并重置定时器,和防抖的区别在于,防抖每次触发事件都重置定时器,而节流在定时器到时间后再清空定时器。
怎么判断数据类型
typeof
instanceof
px,em,rem的区别
px
1.相对长度单位。相对于显示器屏幕分辨率而言。
2.存在浏览器不兼容问题。
em
1.相对长度单位。相对于当前对象内文本字体尺寸。
2.em值并不是固定的,em会继承父级元素的大小.
rem
1.相对长度单位。相对于根节点html字体大小来计算。任意浏览器默认字体高都是16px.
scss和less与css的区别
Less (Leaner Style Sheets 的缩写) 是一门向后兼容的 CSS 扩展语言
如何理解Javascript中的this?
当前执行上下文的一个属性,在非严格情况下,总是指向一个对象,严格模式下可以是任意值。
this永远指向最后一个调用它的那个对象。
this
原始类型和引用类型?
值的类型不同
复制原始类型和引用类型的不同
前者按值传递,后者按址传递。
原始类型的值存储在内存的栈stack中,由系统分配空间,存储在变量中的是值本身。
引用类型的值,存储在内存的堆heap中,由程序员分配空间,存储在变量中的是个指针,指向存储在内存中的数据。
深度克隆一个对象?
深度克隆指把对象中的属性和方法全部找到,并且在另一个对象中开辟相应的空间,一个个存储到其中。
方法1:用ES6中的stringify将js值(通常为数组或函数),转化为JSON字符串。然后再把字符串赋值给一个中间值,最后把字符串用JSON.parse()方法将数据解析成js对象。
参考
数组去除重复元素的方法
参考
1.双重循环法:能去重,但不能反映原数组中的元素出现顺序,不稳定。
2.使用for嵌套for循环,利用splice去重;
使用ES6的set方法去重;
使用indexOf去重;
使用sort()去重;
利用对象的属性不能相同的特点进行去重;
利用includes去重。
同步与异步的区别
同步异步使用场景,看需要请求的数据是否是程序继续执行必须依赖的数据。
== 和 ===的区别
==是非严格意义上的相等
值相等就相等
===是严格意义上的相等,会比较两边的数据类型和值大小
值和引用地址都相等才相等
项目性能优化
减少 HTTP 请求数
减少 DNS 查询
使用 CDN
避免重定向
图片懒加载
减少 DOM 元素数量
减少 DOM 操作
使用外部 JavaScript 和 CSS
压缩 JavaScript、CSS、字体、图片等
优化 CSS Sprite
使用 iconfont
多域名分发划分内容到不同域名
尽量减少 iframe 使用
避免图片 src 为空
把样式表放在 link 中
把 JavaScript 放在页面底部
原文链接
this.$ nextTick
// 当数据被修改后使用这个方法,会回调获取更新后的dom再渲染出来
// 在下次 DOM 更新循环结束之后执行延迟回调
同源策略
同源指的是域名、协议、端口号相同
get请求和post请求的区别
gei请求的数据会暴露在地址栏中,而post请求则不会。
get请求传输数据量小,post请求传输数据量大
跨域请求有哪些方案
JSONP、跨域资源共享CORS。
参考
参考
vue响应式的理解
当我修改Vue实例中的数据式,视图就会重新渲染,出现新的内容。这就是Vue的数据响应式。就是通过数据驱动应用,数据变化,视图更新。
Vue一套用于构建用户界面的渐进式(Vue可以自底向上逐层的应用)js框架.
Vue特点:
组件化模式,提高代码复用率、让代码更容易维护。
声明式编码,更直观便捷
虚拟DOM和Diff算法,尽量复用DOM节点。相同的不动。
组件通信方式
props和$ emit(常用):父组件向子组件传递数据是通过prop传递的,子组件传递数据给父组件是通过$ emit触发事件来做到的.
eventBus可以在全局定义,实现全项目通讯,使用方法也很简单。
Vuex
浏览器为什么要设置同源
在浏览器中的cookie等其他数据可以任意读取,不同域下的DOM任意操作,ajax任意请求其他网站的数据,包括隐私数据。
同源策略都可以阻挡哪些恶意代码
「跨站请求伪造」,是一种劫持受信任用户向服务器发送非预期请求的攻击方式。跨域指的是请求来源于其他网站,伪造指的是非用户自身的意愿。CSRF攻击【利用用户的登录专改发起恶意请求】CSRF 危害,用户的登录态被盗用,冒充用户完成操作或修改数据
简介CORS?实际做项目遇到过跨域请求吗,怎么配的跨域?
跨域资源共享,是一种允许当前域(domain)的资源(比如html/js/web service)被其他域(domain)的脚本请求访问的机制,通常由于同域安全策略(the same-origin security policy)浏览器会禁止这种跨域请求。
axios中 配置代理可解决使用Axios不能直接进行跨域的问题。vue-cli的proxyTable vue-cli的proxyTable该中间件本质上是在本地开了一个服务器dev-server,所有的请求都通过这里转发出去,即把浏览器的发送请求代理转发到代理服务器上,再由代理服务器发送请求给目标服务器,从而解决跨域问题。参考
bug:(node中间件代理)从源“http://localhost:1322”访问“http://api.com/index”处的 XMLHttpRequest 已被 CORS 策略阻止。

this.$api({
      method: 'post',
      url: '/category'
    }).then((res) => {
      this.allData = res.data

    }).catch((error) => {
      console.log(error)
    })

Access to XMLHttpRequest at ‘http://aaa.com/category’ from origin ‘http://localhost:1322’ has been blocked by CORS policy: Response to preflight request doesn’t pass access control check: Redirect is not allowed for a preflight request.
可以看到浏览器拦截了我们的请求,因为我们跨域了,下面解决跨域问题。
开发环境跨域配置:
1.配置BaseUrl:api.defaults.baseURL = ‘http://api.com’;关键代码是:Axios.defaults.baseURL = ‘/api’,这样每次发送请求都会带一个/api的前缀
2.配置代理:
配好跨域,HTTP下向HTTPS发请求,请求能成功吗?如果反过来呢?
几个经典的this使用场景
作为对象方法调用、作为函数调用、作为构造函数调用

网络层:
1、计算机在同一局域网 ≠ 计算机连接到了同一路由器;

2、同一局域网内的各个计算机的子网掩码是相同的;

3、路由器下当然会存在多个子网段。
传输层:
主要提供进程间的通信。
最重要的两个协议TCP面向连接,可靠,不提供广播和多播,而且时间延迟比较大,适用于大文件传输。UDP无连接,收到的报也不确认,但时间延迟小,适用于小文件。
端口号有什么用:
端口号可以用来标识同一个主机上通信的不同应用程序(就是哪个应用程序在使用这个端口)。
UDP协议:
是参考模型中一种无连接的传输层协议,提供面向事务的简单不可靠信息传送服务。UDP首部较小,只有8字节,而TCP有20字节。这也是减少网络传输开销的一方面。
TCP协议简单来说是一种位于传输层的,面向连接的、可靠的、基于字节流的传输层通信协议
TCP协议的特点:
每一条TCP连接只能有两个端点,每一条TCP连接是点对点的。也就是说TCP是不同计算机之间的进程的通信。
TCP提供可靠交付的服务,无差错,不丢失,不重复,按序到达。总结一下就是,可靠有序,不丢不重。
在这里插入图片描述
在这里插入图片描述
TCP如何实现可靠传输:
校验和: TCP 将保持它首部和数据的检验和。这是一个端到端的检验和,目的是检测数据在传输过程中的任何变化。如果收到段的检验和有差错,TCP 将丢弃这个报文段和不确认收到此报文段。
流量控制: TCP 连接的每一方都有固定大小的缓冲空间,TCP的接收端只允许发送端发送接收端缓冲区能接纳的数据。当接收方来不及处理发送方的数据,能提示发送方降低发送的速率,防止包丢失。TCP 使用的流量控制协议是可变大小的滑动窗口协议。 (TCP 利用滑动窗口实现流量控制)
TCP 主要通过四个算法来进行拥塞控制:慢开始、拥塞避免、快重传、快恢复。
应用层:

举报

相关推荐

0 条评论