整理前端知识点（面试）2021-04-06----02
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了整理前端知识点（面试）2021-04-06----02，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含9489字，纯文字阅读大概需要14分钟。
内容图文
文章目录
- 一、原型链理解
- 二、js如何实现继承
- 三、css选择器优先级排序
- 四、浏览器如何进行工作的---
- 五、浏览器缓存--
- 六、跨域问题--
- 七、HTTPS
- 八、http get请求和 post请求有什么区别
- 九、http2.0
- 十、h5适配
- 十一、跨站脚本工具XXS
- 十二、websocket协议
- 十三、DOM事件
- 十四、HTTP状态码
一、原型链理解
1、原型链
1）构造函数、原型和实例的关系
①构造函数都有一个属性prototype，这个属性是一个对象（Object的实例）
②原型对象prototype里面有一个constructor属性，该属性指向原型对象所属的构造函数
③实例对象都有一个_proto_属性，该属性也指向构造函数的原型对象，它是一个非标准属性，不可以用于编程，它是用于浏览器自己使用的
2）prototype与_proto_的关系
①prototype是构造函数的属性
②_proto_是实例对象的属性
——这两者都指向同一个对象
【总结】i）函数也是对象，对象不一定是函数；
ii）对象的本质：无序的键值对集合；键值对当中的值可以是任意数据类型的值
iii）对象就是一个容器，这个容器当中放的是（属性和方法）
3）属性搜索
①在访问对象的某个成员的时候会先在对象中找是否存在
②如果当前对象中没有就在构造函数的原型对象中找
③如果原型对象中没有找到就到原型对象的原型上找
④知道Object的原型对象的原型是null为止
2、Function
——所有函数都是Function的实例
①本地对象：独立于宿主环境（浏览器）的对象——包括Object、Array、Date、RegExp、Function、Error、Number、String、Boolean
②内置对象——包括Math、Global（window，在js中就是全局变量），使用的时候不需要new
③宿主对象——包括自定义对象、DOM、BOM
二、js如何实现继承
js继承有5种实现方式：
- 1、继承第一种方式：对象冒充闭包理解
- 2、继承第二种方式：call()方法方式
call方法是Function类中的方法
call方法的第一个参数的值赋值给类(即方法)中出现的this
call方法的第二个参数开始依次赋值给类(即方法)所接受的参数 - 3、继承的第三种方式：apply()方法方式
apply方法接受2个参数，
A、第一个参数与call方法的第一个参数一样，即赋值给类(即方法)中出现的this
B、第二个参数为数组类型，这个数组中的每个元素依次赋值给类(即方法)所接受的参数 - 4、继承的第四种方式：
原型链方式，即子类通过prototype将所有在父类中通过prototype追加的属性和方法都追加到Child，从而实现了继承 - 5、继承的第五种方式：混合方式
混合了call方式、原型链方式
三、css选择器优先级排序
优先级：由高到低(从上到下)
!important
内联(1,0,0,0)
id: (0,1,0,0)
类：(0,0,1,0)
伪类/属性
元素：(0,0,0,1)
通配符
四、浏览器如何进行工作的—
浏览器工作原理
详细分为以下几大模块：
1、DNS 解析
2、TCP 连接
3、HTTP 请求
4、构建 DOM 树
5、构建 CSSOM 树
6、生成渲染树
7、合成、绘制
五、浏览器缓存–
浏览器缓存
六、跨域问题–
跨域问题
JSONP跨域（本质是JS调用）
CORS（后台设置）
Nginx反向代理（运维配置）
跨域是浏览器做出的安全限制，必须同协议、同域名、同端口否则会被浏览器block
七、HTTPS
基于HTTP协议，通过SSL或TLS提供加密处理数据、验证对方身份以及数据完整性保护
通过抓包可以看到数据不是明文传输，而且HTTPS有如下特点：
内容加密：采用混合加密技术，中间者无法直接查看明文内容
验证身份：通过证书认证客户端访问的是自己的服务器
保护数据完整性：防止传输的内容被中间人冒充或者篡改
收方能够证实发送方的真实身份；
发送方事后不能否认所发送过的报文；
收方或非法者不能伪造、篡改报文。
八、http get请求和 post请求有什么区别
1.get是从服务器上获取数据，post是向服务器传送数据。
2.get是把参数数据队列加到提交表单的ACTION属性所指的URL中，值和表单内各个字段一一对应，在URL中可以看到。post是通过HTTPpost机制，将表单内各个字段与其内容放置在HTML HEADER内一起传送到ACTION属性所指的URL地址。用户看不到这个过程。
3.对于get方式，服务器端用Request.QueryString获取变量的值，对于post方式，服务器端用Request.Form获取提交的数据。
4.get传送的数据量较小，不能大于2KB。post传送的数据量较大，一般被默认为不受限制。但理论上，IIS4中最大量为80KB，IIS5中为100KB。
5.get安全性非常低，post安全性较高。
九、http2.0
十、h5适配
素自适应问题
文字rem问题
高清图问题
1像素问题
横竖屏显示问题
手机字体缩放问题
十一、跨站脚本工具XXS
XSS 又叫CSS（Cross site Scripting）跨站脚本工具，常见的WEB漏洞之一，再2013年度OWASP TOP 10 中排名第三
XSS 是指攻击者再网页中嵌入客户端脚本，通常是JS恶意代码，当用户使用浏览器访问被嵌入恶意代码网页时，就会再用户浏览
器上执行。
反射型，存储型，Dom型
十二、websocket协议
WebSocket 是基于TCP/IP协议，独立于HTTP协议的通信协议。
WebSocket 是双向通讯，有状态，客户端一（多）个与服务端一（多）双向实时响应（客户端 ? 服务端）。
WebSocket 是应用在浏览器的 Socket （是 Socket 模型接口的实现），Socket 是一个网络通信接口 （通信规范）。
十三、DOM事件
DOM事件
用户界面事件
当用户与页面的上的元素交互时发生，但不一定与用户操作有关的事件。
load事件：当页面加载完毕时在window上触发，当图像加载完毕时在ing元素上触发，等等，页面完全加载完毕（包括所有图像，js文件，css等外部文件资源）时触发，img只要设置了src就会下载
unload事件：当页面完全卸载时在window上触发，等等。当一个页面切换到另一个页面时就会触发，经常利用这个事件来清除引用，减少内存的泄露
error：当发生js错误时在window上触发，当图像无法加载时在img上触发
abort事件：当用户停止下载过程时，如果嵌入的内容没有加载完成，则在object元素上触发
select：当用户选择文本框（input或textarea）中的一或多个字符时触发
resize：当窗口或框架的大小发生改变时在window上触发
scroll：当用户滚动带滚动条的元素中的内容时，在该元素上触发
焦点事件
当元素获得焦点或失去焦点时触发
blur：失去焦点时触发，这个事件不会冒泡
focus：获得焦点时触发，不冒泡
focusin：在获得焦点时触发，但他冒泡，DOM3新增
focusout：在失去焦点时触发，冒泡
鼠标事件
当用户通过鼠标在页面上执行操作时触发
click：单击事件，用户单机鼠标按钮（一般是左键）或按下回车键时触发
dbclick：双击事件，当双击鼠标时触发（一般是左键）
mousedown：当用户在按下任意鼠标按钮时触发
mouseup：当用户释放鼠标按钮时触发
mouseenter：在鼠标光标从外部首次（是指每次进入元素，并不是只执行一次）时触发，而且这个事件不冒泡，而且在光标移到到后代元素上不会触发（从父区域进入子区域，再从子区域进入父区域是不会触发的，因为他认为子区域也是他的一部分）
mouseleave：鼠标离开和mouseenter：鼠标进入是一对，刚好相反
mousemove：当鼠标指针在元素内部移时重复的触发
mouseout：当鼠标指针位于一个元素上方，然后移到到另一个元素上方时触发，另一个元素可能是外部元素也可能是他的后代元素，因为他不认为后代元素所在的区域是他的一部分
mouseover：鼠标指针进入和mouseout 鼠标指针离开是一对，恰好相反
除了mouseleave和mouseenter之外都会冒泡
click事件只有触发了mousedown和mouseup之后才会触发，代表click只有触发两次clic才会触发，如果取消了之前的事件将会不触发
鼠标事件都是在浏览器视口中的特定位置发生的，可以通过事件的属性获取到。
坐标位置
视口区（客户区）坐标位置：clientX和clientY可以获取到位置信息。所有浏览器都支持这两个属性，是相对于浏览器的视口而不是页面而言的，不包括地址栏等
页面坐标位置：pageX和pageY，相对于页面而言，ie8及更早版本不支持这两个属性，不过我们可以计算出来
event.clientX+（document.body.scrollLeft + document.documentElement.scrollLeft）
event.clientY + （document.body.scrollTop + document.documentElement.scrollTop）
屏幕坐标位置：相对于整个电脑屏幕，screenX和screenY
滚轮事件
当使用鼠标滚轮（或类似事件）时触发
mousewheel：跟踪鼠标滚轮或笔记本触摸板
文本事件
当在文档中输入时触发
textinput：在文本显示给用户之前更容易拦截文本，是对keypress的补充
可编辑区输入字符键才可以出发
ie9才支持，firefox不支持
键盘事件：当用户通过键盘在页面上执行操作时触发
keydown：用户按下键盘上的任意键时触发，而且按住不放的话，会重复触发此事件
keypress：用户按下键盘上的字符键时触发，而且按住不放的话，会重复触发此事件，按下esc也会触发
keyup：用户释放键盘上的键时触发
所有元素都支持这三个事件
keydown-》keypress-》textinput-》keyup
keyup和keydown的event有个keycoe属性，代表键盘码，与ASCII相对应
移动端-小程序事件：
touchstart: 当手指触摸屏幕的时候出发
touchmove： 当手指在屏幕移动的时候
touchend： 手指离开屏幕的时候触发
touchcancel: 当被迫中止滑动的时候触发（弹消息，来电等等）；
tap：手指触摸后离开(点击)
longtap: 手指触摸后后，超过350ms离开
事件绑定的写法同组件的属性，以 key、value 的形式。
key 以bind或catch开头，然后跟上事件的类型，如bindtap, catchtouchstart
十四、HTTP状态码
状态码
状态码之（1**）
100: 客户端应当继续发送请求。
101: 服务器已经理解了客户端的请求,并将通过Upgrade 消息头通知客户端采用不同的协议来完成这个请求。
102: 由WebDAV（RFC 2518）扩展的状态码，代表处理将被继续执行。
状态码之（2**）
200: 请求已成功。
201: 请求已经被实现。
202: 服务器已接受请求，但尚未处理。
203: 服务器已成功处理了请求，但返回的实体头部元信息不是在原始服务器上有效的确定集合，而是来自本地或者第三方的拷贝。
204: 服务器成功处理了请求，但不需要返回任何实体内容，并且希望返回更新了的元信息。
205: 服务器成功处理了请求，且没有返回任何内容。
206: 服务器已经成功处理了部分 GET 请求。
207: 由 WebDAV(RFC 2518)扩展的状态码，代表之后的消息体将是一个XML消息，并且可能依照之前子请求数量的不同，包含一系列独立的响应代码。
状态码之（3** 和 4**）
301: 永久移动。被请求的资源已被永久移动位置。
302: 请求的资源现在临时从不同的 URI 响应请求。
305: 使用代理。被请求的资源必须通过指定的代理才能被访问。
307: 临时跳转。被请求的资源在临时从不同的URL响应请求。
400: 错误请求。
402: 需要付款。该状态码是为了将来可能的需求而预留的，用于一些数字货币或者是微支付。
403: —禁止访问。服务器已经理解请求，但是拒绝执行它。
404: 找不到对象。请求失败，资源不存在。
406: 不可接受的。请求的资源的内容特性无法满足请求头中的条件，因而无法生成响应实体。
状态码之（4** 和 5**）
408: 请求超时。
409: 冲突。由于和被请求的资源的当前状态之间存在冲突，请求无法完成。
410: 遗失的。被请求的资源在服务器上已经不再可用，而且没有任何已知的转发地址。
413: 响应实体太大。服务器拒绝处理当前请求，请求超过服务器所能处理和允许的最大值。
417: 期望失败。在请求头 Expect 中指定的预期内容无法被服务器满足。
418: 我是一个茶壶。超文本咖啡罐控制协议，但是并没有被实际的HTTP服务器实现；
420: 方法失效。
422: 不可处理的实体。请求格式正确，但是由于含有语义错误，无法响应。
500: 服务器内部错误。服务器遇到了一个未曾预料的状况，导致了它无法完成对请求的处理。
内容总结
以上是互联网集市为您收集整理的整理前端知识点（面试）2021-04-06----02全部内容，希望文章能够帮你解决整理前端知识点（面试）2021-04-06----02所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。
内容备注
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。
内容手机端
扫描二维码推送至手机访问。