Yangmanyue-CSDN博客

原创 offsetHeight、scrollHeight、clientHeight、scrollTop、offsetTop

offsetHeight/offsetWidth: 包括元素的边框、内边距和元素的滚动条（如果存在且渲染的话），不包含:before或:after等伪类元素的高度。这个属性值会被四舍五入为整数值，如果你需要一个浮点数值，请用 element.getBoundingClientRect().clientHeight/clientWidth:是元素内部的高度/宽度(单位像素)，包含内边距，但不包括滚动条、边框和外边距。scrollWidth/scrollHeight：表示一个元素内容区域的实.

2021-02-05 10:55:05 291

原创 chrome下 http 资源地址被转为 https

现象在以 https 协议页面，以 <img src="http://ip:port/image.png"> 方式请求资源时，http 协议的资源地址被转为 https 的。该问题仅在 chrome 下存在，使用 IE 无此问题原因chrome 浏览器会把 http 开头的 url 给重定向到 https 开头的资源 url 上去，若你的资源服务器没有做443端口转发，那就导致了资源无法加载的问题。解决方案临时解决地址栏中输入 chrome://net-internals/#h

2020-12-22 14:40:44 2518

原创遍历的几种方式

遍历数组通常用for循环ES5的话也可以使用forEach，ES5具有遍历数组功能的还有map、filter、some、every、reduce、reduceRight等，只不过他们的返回结果不一样。但是使用 forEach 遍历数组的话，使用 break 不能中断循环，使用 return 也不能返回到外层函数。for in使用for in会遍历数组所有的可枚举属性，包括原型。所以for in更适合遍历对象。for (var key in myObject) {　　if（myObject.hasO

2020-12-18 10:16:15 4150 1

原创 HTTPS相关

HTTP缺点：通信使用明文，可能被窃听不验证通信方的身份，可能遭遇伪装无法证明报文的完整性，有可能遭遇篡改HTTPSHTTP+加密+认证+完整性保护 = HTTPSHTTP协议采用明文传输信息，存在信息窃听、信息篡改和信息劫持的风险，而协议 SSL/TLS 具有身份验证、信息加密和完整性校验的功能，可以避免此类问题发生。从 HTTP 协议栈层面来看，我们可以在 TCP 和 HTTP 之间插入一个安全层，所有经过安全层的数据都会被加密或者解密，你可以参考下图：HTTPS 所有的安全

2020-10-30 10:18:43 224 1

原创 HTTP 相关

HTTP/0.9需求就是用来传输体积很小的 HTML 文件特点：只有一个请求行，没有请求头和请求体服务器也没有响应头信息返回的文件内容是以 ASCII 字符流来传输HTTP/1.0特点：任何格式的内容都可以发送，这使得互联网不仅可以传输文字，还能传输图像、视频、二进制等文件。提供 Cache 机制，使用 header 中的 If-Modified-Since 和 Expires 作为缓存失效的标准。引入状态码除了GET命令，还引入了POST命令和HEAD命令。http请求和

2020-10-28 22:51:29 150

原创浏览器安全之XSS、CSRF

同源策略同源策略可以隔离各站点之间的 DOM 交互、页面数据和网络通信严格的同源策略会带来更多的安全，但是也束缚了WEB这就需要在安全与自由之间找到一个平衡点于是默认页面中可以引用任意第三方资源，然后又引入CSP策略来加以限制默认XMLHttpRequest和Fetch不能跨站请求资源，然后又通过CORS策略来支持其跨域但与此同时，也就带来了很多安全问题，比如 XSS 攻击和CSRF攻击XSS跨站脚本攻击，指黑客往HTML文件或者DOM中注入恶意脚本，从而在用户浏览页面时利用注

2020-10-28 10:30:35 340 1

原创浏览器存储

浏览器存储包括了 Cookies、Local Storage、Session Storage、IndexedDB、WebSQL 这 5 种形式的本地存储。CookiesCookie 的本职工作并非本地存储，而是“维持状态”。因为HTTP协议是无状态的，HTTP协议自身不对请求和响应之间的通信状态进行保存。Cookie 是用来绕开HTTP的无状态性的“额外手段”之一。Cookie的生成方式主要有两种：通过响应头里的 Set-Cookie 指定要存储的 Cookie 值在 js 中通过 .

2020-10-20 21:38:27 177

原创【经典面试题】从输入URL到WEB 页面完整展示

从浏览器接收url到开启网络请求线程（这一部分可以展开浏览器的机制以及进程与线程之间的关系）开启网络线程到发出一个完整的http请求（这一部分涉及到dns查询，tcp/ip请求，五层因特网协议栈等知识）从服务器接收到请求到对应后台接收到请求（这一部分可能涉及到负载均衡，安全拦截以及后台内部的处理等等）后台和前台的http交互（这一部分包括http头部、响应码、报文结构、cookie等知识，可以提下静态资源的cookie优化，以及编码解码，如gzip压缩等）单独拎出来的缓存问题，h..

2020-10-19 22:16:08 281

原创浏览器缓存机制

浏览器缓存（Browser Caching）是为了节约网络的资源加速浏览，浏览器在用户磁盘上对最近请求过的文档进行存储，当访问者再次请求这个页面时，浏览器就可以从本地磁盘显示文档，这样就可以加速页面的阅览。浏览器缓存主要有两类：强缓存：cache-control；Expires 和缓存协商：Last-Modified、If-Modified-Since；ETag、If-None-Match。缓存的优势浏览器启用缓存至少有两点显而易见的好处：（1）减少页面加载时间；（2）减少服务器负载；缓存相关的.

2020-10-19 20:31:13 2307

原创 ES6 数组扩展

Array.from用于将类数组结构转换为数组实例类数组对象包括：任何可迭代的结构或者有一个 length 属性和索引元素的结构// 字符串会被拆分为单字符数组Array.from('test'); // ['t', 'e', 's', 't']// 将集合和映射转换为一个新数组const m = new Map() .set('k1', 1) .set('k2', 2)Array.from(m) // [["k1", 1], ["k2", 2]]const s = ne

2020-10-13 21:43:19 112

原创 JS 面试手写汇总

bindcall() 方法使用一个指定的 this 值和单独给出的一个或多个参数来调用一个函数。注意：该方法的语法和作用与 apply() 方法类似，只有一个区别，就是 call() 方法接受的是一个参数列表，而 apply() 方法接受的是一个包含多个参数的数组。Function.prototype.myCall = function(thisArg, ...args) { const fn = Symbol('fn') thisArg = thisArg || window

2020-10-12 20:34:30 204

原创 TCP的三次握手四次挥手

TCP 协议位于传输层，提供可靠（能够把数据准确的传输给对方）的字节流服务（为了传输方便，将大块数据分割成以报文段为单位的数据包进行管理）。TCP报文格式上图中有几个字段需要重点介绍下：序号：Seq序号，占32位，用来标识从TCP源端向目的端发送的字节流，发起方发送数据时对此进行标记。确认序号：Ack序号，占32位，只有ACK标志位为1时，确认序号字段才有效，Ack=Seq+1。标志位：共6个，即URG、ACK、PSH、RST、SYN、FIN等，具体含义如下：（A）URG：紧急指针（ur.

2020-09-27 10:22:11 376

原创 DNS域名解析过程

DNS 服务位于应用层，提供域名到IP地址之间的解析服务。浏览器先检查自身缓存中有没有被解析过的这个域名对应的ip地址，如果有，解析结束。同时域名被缓存的时间也可通过TTL属性来设置。如果浏览器缓存中没有，浏览器会检查操作系统缓存中有没有对应的已解析过的结果。而操作系统也有一个域名解析的过程。在windows中可通过c盘里一个叫hosts的文件来设置，如果你在这里指定了一个域名对应的ip地址，那浏览器会首先使用这个ip地址。如果至此还没有命中域名，才会真正的请求本地域名服务器（LDNS.

2020-09-26 17:52:32 125

原创 JavaScript 面向对象与原型

在 JavaScript 中创建一个新对象的最简单方式，并可通过赋值语句添加属性const warrior = {};warrior.name = 'name';但是那些具有面向对象开发语言背景的读者，可能会想念封装和构建类的构造函数。构造函数是用来初始化对象为已知的初始状态。毕竟，我们要创建多个相同类型的对象实例，为每个实例单独进行属性分配，不仅繁琐还容易出错。我们希望能够在一个地方将这些对象的属性和方法整合为一个类。JavaScript 中使用 new 操作符，通过构造函数初始化新对象，但没有

2020-08-23 22:58:13 171

原创 Linux 下 DNS 解析失败的问题记录

现象本地使用域名连接时失败，使用 IP 地址连接成功ping xxx.demo.com //失败ping 10.10.10.10 // 域名对应的服务器地址，成功解决方式判断是本地DNS解析的问题，未将 xxx.demo.com 域名映射到对应的 IP 地址。需要手动配置映射关系，具体操作如下// 使用 Vim 打开文件vi /etc/hosts// 在文件中插入10.10.10.10 xxx.demo.com// 验证配置nslookup xxx.demo.comLinux

2020-08-07 11:25:55 1419

原创关于 HTTP 中的 referrer 字段

最近在项目缺陷定位过程中遇到一个问题，后发现与 HTTP 中的 referrer 字段相关，故对此进行了梳理。现象当前页面想要访问第三方页面，通过 a 标签实现跳转过程中，出现跳转失败的问题（页面请求 404），并且刷新页面也无效，但是在页面地址栏 url 处敲击回车，则可以正常访问。对比通过上述描述，我们希望通过对比：1.刷新页面；2.在页面地址栏 url 处敲击回车，这两种加载页面的方式在请求上会存在什么区别，试图找到该问题的解决方案。通过对比发现，方式1下，在请求头中会多一个 Referer

2020-07-21 19:32:16 407

baidu_33569474的博客

原创 offsetHeight、scrollHeight、clientHeight、scrollTop、offsetTop

原创 chrome下 http 资源地址被转为 https

原创遍历的几种方式

原创 HTTPS相关

原创 HTTP 相关

原创浏览器安全之XSS、CSRF

原创浏览器存储

原创【经典面试题】从输入URL到WEB 页面完整展示

原创浏览器缓存机制

原创 ES6 数组扩展

原创 JS 面试手写汇总

原创 TCP的三次握手四次挥手

原创 DNS域名解析过程

原创 JavaScript 面向对象与原型

原创 Linux 下 DNS 解析失败的问题记录

原创关于 HTTP 中的 referrer 字段

原创你不知道的 JavaScript 系列之this

原创你不知道的 JavaScript 系列之闭包

原创你不知道的 JavaScript 系列之作用域

原创深入理解 Vue 中的 Computed

原创 Vue 数据劫持双向绑定

原创 NextTick 知识点记录

原创 MVC、MVP、MVVM 软件架构的理解

原创关于 chrome 80 后出现的 SameSite 问题

原创 CSS动画（一）

原创 JavaScript 数据类型

空空如也

空空如也