html标签的语义化是什么意思
概念：让标签有自己的含义
优势
- 代码结构清晰，方便阅读，有利用团队开发
- 有利于搜索引擎优化
- 方便其它设备解析
b标签和strong标签的区别
- strong是加重语气标签，b是粗体标签
css3动画如何实现
-
transfrom
- transition： 用来设置样式的属性值从一种状态平滑过渡另外一种状态，有四个属性
- transition-duration 变化延续的时间
- transition-property 变换的属性
- transition-timing-function 变换的速率
- transition-delay 变换的延时
- transition： 用来设置样式的属性值从一种状态平滑过渡另外一种状态，有四个属性
-
animation： 是逐帧动画
@keyframes
JS继承
- 对象都有__proto__属性，只有函数对象独有prototype属性
- 对象的__proto__指向其构造函数的原型prototype，
JS原型链
- 对象访问其属性的时候，如果本身属性不存在，则通过__proto__一层一层向其原型查找而形成的原型链
JS原型
- 指的是构造函数的prototype，其上的属性和方法能让基于此构造函数创建的对象去使用
this指向场景
- 函数调用
- this在函数中指向的是一个全局对象
- 方法调用
- 在方法调用中，this是拥有整个方法的对象
- 构造函数
- 构造函数中的this指向新创建的对象
- 隐式调用
- this是第一个参数
TCP和UDP的区别
- UDP是一种无连接，提供不可靠的数据报服务
- UDP支持一对多，多对多，一对一服务
- TCP是面向连接的，可靠的，基于字节流的传输层通信协议，面向连接，保证顺序，可靠传输，提供拥塞控制
TCP三次握手
- 第一次握手：客户端向服务端发送连接请求报文，请求发送后，客户端便进入SYB-SENT状态
- 第二次握手：服务端收到连接请求的报文后，如果同意连接，则会发送一个应答，发送完之后便进入SYB-RECEIVED状态
- 第三次握手：当客户端收到连接同意的应答后，还要向服务端发送一个确认报文，客户端发送这个报文后便进入established状态，此时连接建立成功
- 三次握手原因：TCP要保证数据可靠传输，也要提供传输效率，保证数据有去有回
TCP断开连接
- 第一次挥手：客户端向服务端发送连接释放请求
- 第二次挥手：服务端收到客户端连接释放请求后，发送ACK包，并进入CLOSE-WAIT状态，此时服务端不再接受客户端发送的数据，但是此时服务端继续发送剩余的数据
- 第三次挥手：服务端向客户端发送连接释放请求，此后服务端便进入了LAST-ACK状态
- 第四次挥手：客户端收到释放请求后，向服务端发送确认应答，，此时客户端进入TIME-WAIT状态，客户端会持续TIME-WAIT状态2MSL，如果此时没有服务端的重发请求，就进入CLOSED状态
解释Promise
- promise就是将异步任务队列化，将多个异步任务按照顺序输出，同时用链式调用解决回调地狱的问题，有三种状态成功，失败，等待。 只能从等待变为成功 / 失败，单向的
let和var的区别
- let：变量不可提升，是块级作用域，不可重复声明，暂时性死区（为了减少运行时的错误，防止变量声明前就使用这个变量）
- var：变量可提升，是函数作用域
- const：声明之后必须马上赋值，否则会报错，简单类型一旦声明就不能再修改，指针指向的地址不能更改名单时内部数据可以更改
AJAX原理
- AJAX是一种异步请求数据的web开发技术，通过异步请求加载后台数据，
使用XMLHttpRequest构造函数创建Ajax核心对象XMLHttpRequest
向服务器发送请求 - open发送服务器连接，可以带参数
- send，端口
var xhr= new XMLHttpRequest()
xhr.onreadyStateChange = function(){
if(xhr.readyState == 4 && xhr.status == 200) {
}
}
xhr.open(method,url,async)
xhr.send(string))
GET和POST请求数据的区别
- GET在浏览器回退时是无害的，而POST会再次提交请求
- GET产生的URL可以被存储在历史记录，POST不会
- GET请求只会进行url编码，而POST支持多种编码方式
- GET请求参数会被完整保留在浏览器历史记录里，而POST中的参数不会被保留
- GET请求在URL中传送的参数是有长度限制的，而POST没有
- GET请求只接受ASCII字符，而POST没有限制
- GET比POST更不安全，因为参数直接暴露在URL上，所以不能用来传递敏感信息
- GET参数通过URL传递，POST放在Request body中
POST使用场景
- 请求的结果有持续性的副作用，例如：数据库内添加新的数据行，若使用GET方式，则表单收集的数据可能让URL过长
- 要传送的数据不是采用7位的ASCII编码
GET使用场景 - 请求是为了查找资源，HTML表单数据仅用来帮助搜索
- 请求结果没有持续性副作用
- 收集的数据及HTML表单内的输入字段名总长度不超过1024个字符
箭头函数
- this指向是箭头函数定义所在的对象
- 箭头函数定义比普通函数定义简洁，清晰的多
解决跨域
https://juejin.cn/post/6898572465527029767
- 使用JSONP的方式
- 使用反向代理
- 使用跨域资源共享
什么是跨域- 协议，域名，端口不一致导致的跨域
JSONP
- 协议，域名，端口不一致导致的跨域
- 没有兼容性问题，基本都可以使用，只能解决GET请求
- JSONP本质上是解决通过script标签上的src属性
function dealData(data) {
}
let scp = document.createElement('script')
scp.src=""
document.body.appendChild(scp)
反向代理
- 在目标服务器和浏览器中间架一层服务器，称为代理服务器，反向代理的方式就是把静态的资源文件部署到代理服务器上，
跨域资源共享CORS - 主要通过设置特许的响应头，来达到接触跨域限制的目的，跨域资源共享简称CORS，需要浏览器和服务器的同时支持
- CORS通信过程是由浏览器自己完成的，不需要用户参与
- 对于开发者来说CORS通信和同源的AJAX通信是一样的，代码也一样
- 在使用CORS通信的过程中，一旦发起了AJAX跨域请求
- 实现CORS的关键在于服务器，只要服务器是实现了，就可以进行CORS通信了
如何获取0-9的随机数
function getRandom(start,end) {
return Math.floor(Math.random() * (end - start + 1) + start)
}
单页面应用会出现什么问题？（f5之后会出现404，前端如何解决？）
- 报404是因为单页面模式开发模式造成的，单页面是由js框架会根据当前访问的url去路由到相应的子页面组件中，进行逻辑判断和页面渲染
解决： - 刷新时保证页面不变，就是不能用重定向去访问单页面的主页面，因为url会变，变了js框架就没法路由，不知道上次是哪个url了
- 服务器响应的内容一定要是index.html，因为index这里加载了js框架和初始化一些东西
总结：不改变url的情况下响应index.html资源
单页面优点：
- 用户体验好，快，内容改变不需要重新加载整个页面
- 没有页面之间的切换，就不会出现白屏现象
单页面缺点： - 首次加载耗时比较多
- 不利于SEO
- 不可以用导航实现前进后退效果
- 页面复杂度高
前端如何进行安全防范
- 攻击
- 将前端输出数据进行转义，
- CORF攻击
- CSRF是跨站请求伪造，访问网站的时候，黑客窃取数据
- 要合理使用post 和 get
px/em/rem的区别和应用
-
设备像素：设备屏幕实际拥有的像素点一般来说：宽度方向有1920个像素点，长度方向有1080个像素点
-
逻辑像素：css的像素单位，其尺寸大小是相对的，也称为独立像素
-
分辨率：屏长的设备像素 × 屏宽的设备像素
-
ppi：像素密度，表示沿对角线每英寸长度的像素数目
-
设备尺寸 × 像素密度 = 分辨率
-
px： 我们可以调整页面在移动端的缩放比例，这个值就是viewport，移动端浏览器会将viewport宽度设为980px，也就是说1px = 1/980
-
em：<meta name=“viewport” content: “width=device-width;initial-scale=1”>,需要改变body的font-size，其它的子元素宽度就能动态变化了，一般相对于父级元素的字体大小。一般默认下16px = 1em
-
**rem：**rem只相对于根目录，即HTML元素，有了rem这个单位，我们只需要调整根元素html的font-size就能达到所有元素的动态适配了
HTTP1.x为什么不能实现多路复用
- HTTP1.X为什么不能多路复用，，这是因为HTTP1.x是基于文本分割解析的协议，也没有序号，如果多路复用会导致顺序错乱，http2是采用帧的方式，等于切成一块一块的，每一块都有对应的序号，所以可以实现多路复用
OSI七层协议：物理层，数据链路层，网络层，传输层，会话层，表示层，
- 应用层
– 功能：针对特定应用的协议，接触的协议主要以HTTP为主，把浏览器看成一个应用，当用户发起请求时，通过HTTP协议获得数据以供浏览器使用，这就是应用层的用途，而请求时发生错误，对错误进行处理，这也就是应用层需要负责的
– 常见的协议有：HTTP,FTP,TELNET,SMTP - 表示层
– 设备固有数据格式和网络标准数据格式的转换，主要负责数据格式的转换，就是设置固有的数据格式转换成网络标准格式 - 会话层
– 功能：建立，管理和维护通信，管理传输层以下的分层
– 负责：建立和断开通信连接，以及数据的分割等数据传输相关的管理 - 传输层
– 功能：管理两个节点之间的数据传输，确保数据被可靠的传送到目标地址
– 协议： TCP UDP
– 作用：指定通信端口，指定传输的端口，才知道你想用的HTTP协议 - 网络层
– 功能：地址管理与路由选择
– 负责： 将数据传输到目标地址
– 协议：IP ICMP - 数据链路层
– 功能：互连设备之间传送和识别数据帧
– 负责：物理层面上的互联的节点之间的通信传输 - 物理层
– 功能：将数据的0，1转换为电压和脉冲，光传输给物理的传输介质
EventLoop是什么
- 事件循环，JS是单线程的，意味着任务需要排队执行，，EventLoop就是避免JS在执行过程中出现阻塞的机制
- 东西很多，面试必备，可以深挖一下
Vuex是干啥的
- vuex是一个专门为vue应用程序开发的状态管理模式，它采用集中式存储管理应用的所有组件的状态
H5新增的API
-
全屏显示：docuement.requestFullscreen()
-
关闭全屏显示：document.cancelFullScreen
-
判断是否是全屏显示：document.isFullscreen()
-
网络检测：online 当从断网到连网，会触发回调函数
-
offline 当从联网到断网，会触发回调函数
拖拽源对象
- ondragstart 当鼠标在拖拽元素上按下时触发
- ondrag 持续触发，当鼠标在拖拽元素上触发，不论鼠标有没有运动
- ondragend 当鼠标在拖拽元素上抬起时触发
拖拽目标元素 - ondragenter 当鼠标进入目标元素内部触发
- ondragover 当鼠标在目标元素上部移动时持续触发
- ondragleave 当鼠标离开目标元素时触发
HTML5新增标签
HTML语义化是什么
- 根据内容的结构化，选择合适的标签，便于开发者阅读和写出更优雅的代码的同时让浏览器的怕丑和机器很好的解析
为什么要语义化
- 为什么在没有css情况下，页面也能呈现出很好的内容结构，代码结构
- 有利于SEO：
- 方便其它设备解析
- 便于团队开发和维护，语义化具有可读性，是下一步网页的重要动向
进程和线程的区别，进程间如何通讯，线程间如何通信
- 线程：是进程中的指令执行流的最小单位，是CPU调度的基本单位
- 进程：是指一个具有一定独立功能的程序,在一个数据集合上的一次动态执行过程
进程间如何通信：
- 管道/匿名管道
- 有名管道
- 信号
- 消息队列
- 信号量
- 共享内存
线程间如何通信
- 互斥量
- 信号量
- 事件
JS事件循环机制 eventloop
- 同步任务：同步任务指的是，在主线程上排队执行的任务，只有前一个任务执行完毕，才能执行后一个任务
- 异步任务：不进入主线程，而进入任务队列中，只有任务队列通知主线程，某个异步任务可以执行了，该任务才会进入主线程执行
异步任务的运行机制如下：
- 所有同步任务都在主线程上执行，形成了一个执行栈
- 主线程外，还存在一个任务队列，只要异步任务有了运行结果，就在任务队列之中放置一个事件
- 一旦执行栈中的所有同步任务执行完毕，系统就会读取任务队列，看看里面有哪些事件，哪些1对应的异步任务，于是结束等待状态，进入进行栈，开始执行
- 主线程不断重复上面的第三步
箭头函数和普通函数的区别
- 语法更加简洁，清晰
- 箭头函数没有prototype原型，所以箭头函数本身没有this
- 箭头函数不会创建自己的this
- call/apply/bind无法改变箭头函数中的this的指向
- 箭头函数不能作为构造函数使用
- 箭头函数不绑定arguments，取而代之的是rest参数
Vue数据双向绑定是什么意思：
- 数据到模板的绑定，模板到数据的绑定
map和foreach的区别：
- foreach改变原数组的值，调用数组的每个元素
- map返回新数组，映射一个新数组，不会改变原数组的值
ajax的readyState五种状态值
- 0 未初始化，对象已经创建，但还没有调用open方法
- 1 载入，已经调用open方法，没有发送请求
- 2 载入完成 ，send 请求已经发送完成
- 3 交互， 可以接收到部分数据
- 4 完成， 已经接收全局数据，链接已经关闭
base64：文本文件，依赖编码，小图标解决方案
- base64编码后图片会膨胀为原文件的4/3
- 是一种基于64个字符可打印字符来表示二进制数据的表示方法
window.btoa(str) 转码
window.atob(str) 解码
有汉字的时候 window.beta(window.encodeURIComponent(str))转码
解码 window.decodeURIComponent(window.atob(str))
JPG： 有损压缩，不支持透明，体积小，加载快
- JPG使用场景：适用于呈现的丰富的图片，JPG图片经常作为大的背景图，轮播图出现，
PNG:无损压缩，体积大，质量高，支持透明
- PNG优点：无损压缩的高保真的图片格式，PNG图片比JPG更强的色彩表现力，对线条的处理更加细腻，对透明支持更高，唯一的缺点就是体积太大
- PNG使用场景：呈现线条细腻，颜色对比度高的LOGO或者背景图
SVG:文本文件，体积小，不失真，兼容性好，压缩性更强
- SVG是一种基于XML语法的图像格式，图片无限放大不失真，可编写
soure-map 源码映射，会单独生成一个soucemap文件出错了会标识当前报错的列和行，
CSS边距重叠问题，原因
- 概念：css边距重叠是指两个或者多个盒子重合在一起形成的一个单一边界
- 原因：空元素的边界重叠：假设有一个空元素，它有外边距，但是没有边框或者填充，在这种情况下，上外边距和下外边距就碰到了一起，就发生了合并
https://github.com/zuopf769/notebook/blob/master/fe/CSS%E5%A4%96%E8%BE%B9%E8%B7%9D(margin)%E9%87%8D%E5%8F%A0%E5%8F%8A%E9%98%B2%E6%AD%A2%E6%96%B9%E6%B3%95/README.md
外边距重叠计算方式：
- 全部都为正值，取最大值
- 不全是正值，都取绝对值，然后用正值的最大值减去绝对值的最小值
- 没有正值，则都取绝对值，然后用0减去最大值
解决方法：
- 底部元素设置为浮动 float：left
- 底部元素的position的值为absolute/fixed 脱离文档流
- 在设置margin-top/bottom值时统一设置上或下
- 元素和父元素margin值问题：父元素无border，padding，inline content时，子元素的margin-top/bottom会与父元素的margin产生重叠问题
扫一扫
1071
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
