- 博客(26)
- 收藏
- 关注
RSS订阅原创 offsetHeight、scrollHeight、clientHeight、scrollTop、offsetTop
offsetHeight/offsetWidth: 包括元素的边框、内边距和元素的滚动条（如果存在且渲染的话），不包含:before或:after等伪类元素的高度。这个属性值会被四舍五入为整数值，如果你需要一个浮点数值，请用 element.getBoundingClientRect().clientHeight/clientWidth:是元素内部的高度/宽度(单位像素)，包含内边距，但不包括滚动条、边框和外边距。scrollWidth/scrollHeight： 表示一个元素内容区域的实.
2021-02-05 10:55:05
247
原创 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
2443
原创 遍历的几种方式
遍历数组通常用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
4126
1
原创 HTTPS相关
HTTP缺点：通信使用明文，可能被窃听不验证通信方的身份，可能遭遇伪装无法证明报文的完整性，有可能遭遇篡改HTTPSHTTP+加密+认证+完整性保护 = HTTPSHTTP协议采用明文传输信息，存在信息窃听、信息篡改和信息劫持的风险，而协议 SSL/TLS 具有身份验证、信息加密和完整性校验的功能，可以避免此类问题发生。从 HTTP 协议栈层面来看，我们可以在 TCP 和 HTTP 之间插入一个安全层，所有经过安全层的数据都会被加密或者解密，你可以参考下图：HTTPS 所有的安全
2020-10-30 10:18:43
191
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
124
原创 浏览器安全之XSS、CSRF
同源策略同源策略可以隔离各站点之间的 DOM 交互、页面数据和网络通信严格的同源策略会带来更多的安全，但是也束缚了WEB这就需要在安全与自由之间找到一个平衡点于是默认页面中可以引用任意第三方资源，然后又引入CSP策略来加以限制默认XMLHttpRequest和Fetch不能跨站请求资源，然后又通过CORS策略来支持其跨域但与此同时，也就带来了很多安全问题，比如 XSS 攻击和CSRF攻击XSS跨站脚本攻击，指黑客往HTML文件或者DOM中注入恶意脚本，从而在用户浏览页面时利用注
2020-10-28 10:30:35
304
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
160
原创 【经典面试题】从输入URL到WEB 页面完整展示
从浏览器接收url到开启网络请求线程（这一部分可以展开浏览器的机制以及进程与线程之间的关系）开启网络线程到发出一个完整的http请求（这一部分涉及到dns查询，tcp/ip请求，五层因特网协议栈等知识）从服务器接收到请求到对应后台接收到请求（这一部分可能涉及到负载均衡，安全拦截以及后台内部的处理等等）后台和前台的http交互（这一部分包括http头部、响应码、报文结构、cookie等知识，可以提下静态资源的cookie优化，以及编码解码，如gzip压缩等）单独拎出来的缓存问题，h..
2020-10-19 22:16:08
267
原创 浏览器缓存机制
浏览器缓存（Browser Caching）是为了节约网络的资源加速浏览，浏览器在用户磁盘上对最近请求过的文档进行存储，当访问者再次请求这个页面时，浏览器就可以从本地磁盘显示文档，这样就可以加速页面的阅览。浏览器缓存主要有两类：强缓存：cache-control；Expires 和缓存协商：Last-Modified、If-Modified-Since；ETag、If-None-Match。缓存的优势浏览器启用缓存至少有两点显而易见的好处：（1）减少页面加载时间；（2）减少服务器负载；缓存相关的.
2020-10-19 20:31:13
2268
原创 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
95
原创 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
175
原创 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
355
原创 DNS域名解析过程
DNS 服务位于应用层，提供域名到IP地址之间的解析服务。浏览器先检查自身缓存中有没有被解析过的这个域名对应的ip地址，如果有，解析结束。同时域名被缓存的时间也可通过TTL属性来设置。如果浏览器缓存中没有，浏览器会检查操作系统缓存中有没有对应的已解析过的结果。而操作系统也有一个域名解析的过程。在windows中可通过c盘里一个叫hosts的文件来设置，如果你在这里指定了一个域名对应的ip地址，那浏览器会首先使用这个ip地址。如果至此还没有命中域名，才会真正的请求本地域名服务器（LDNS.
2020-09-26 17:52:32
108
原创 JavaScript 面向对象与原型
在 JavaScript 中创建一个新对象的最简单方式，并可通过赋值语句添加属性const warrior = {};warrior.name = 'name';但是那些具有面向对象开发语言背景的读者，可能会想念封装和构建类的构造函数。构造函数是用来初始化对象为已知的初始状态。毕竟，我们要创建多个相同类型的对象实例，为每个实例单独进行属性分配，不仅繁琐还容易出错。我们希望能够在一个地方将这些对象的属性和方法整合为一个类。JavaScript 中使用 new 操作符，通过构造函数初始化新对象，但没有
2020-08-23 22:58:13
143
原创 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
1380
原创 关于 HTTP 中的 referrer 字段
最近在项目缺陷定位过程中遇到一个问题，后发现与 HTTP 中的 referrer 字段相关，故对此进行了梳理。现象当前页面想要访问第三方页面，通过 a 标签实现跳转过程中，出现跳转失败的问题（页面请求 404），并且刷新页面也无效，但是在页面地址栏 url 处敲击回车，则可以正常访问。对比通过上述描述，我们希望通过对比：1.刷新页面；2.在页面地址栏 url 处敲击回车，这两种加载页面的方式在请求上会存在什么区别，试图找到该问题的解决方案。通过对比发现，方式1下，在请求头中会多一个 Referer
2020-07-21 19:32:16
352
原创 你不知道的 JavaScript 系列之this
读后总结首先是阅读了《你不知道的 JavaScript 上卷》 this 部分章节之后的小节。如果要判断一个运行中函数的 this 绑定，就需要找到这个函数的直接调用位置，找到之后就可以顺序应用下面这四条规则来判断 this 的绑定对象。由 new 调用，则绑定到新创建的对象由 call 或者 apply 或者 bind 调用，则绑定到指定的对象由上下文对象调用，则绑定到那个上下文对象默认：在严格模式下绑定到 undefined，否则绑定到全局对象ES6 的箭头函数并不会使用这四条标准的绑
2020-07-12 22:49:11
101
原创 你不知道的 JavaScript 系列之闭包
什么是闭包当函数可以记住并访问所在的词法作用域，即使函数是在当前词法作用域之外执行，这时就产生了闭包下面我们可以通过一段代码，清晰地展示了闭包：function foo() { var a = 2; function bar() { console.log(a); } return bar;}var baz = foo();baz(); // 2 这就是闭包的效果函数 bar() 的词法作用域能够访问 foo() 的内部作用域，我们将 bar 所引用的函数对象本身当作返回值
2020-07-04 22:22:52
157
原创 你不知道的 JavaScript 系列之作用域
什么是作用域作用域是根据名称查找变量的一套规则，这套规则用来管理引擎如何在当前作用域以及嵌套的子作用域中根据标识符名称进行变量查找作用域的两种工作模型词法作用域（大多数编程语言采用）动态作用域（比如 Bash 脚本）理解词法作用域及其名称来历简单来说，词法作用域就是定义在词法阶段的作用域。词法作用域是由你在写代码时将变量和作用域写在哪里来决定的。无论函数在哪里被调用，也无论它如何被调用，它的词法作用域都只由函数被声明时所处的位置决定。在传统编译语言的流程中，程序中的一段源代码在执
2020-07-01 23:29:31
170
原创 深入理解 Vue 中的 Computed
computed 实现的本质- lazy watcher在 Vue 实例初始化过程中，在生命周期 beforeCreate 、 created 之间，调用 initState 方法进行各属性的初始化（props、data、methods、computed、watch）// /src/core/instance/init.jsexport function initMixin (Vue: ...
2020-04-19 22:09:34
380
原创 Vue 数据劫持双向绑定
实现数据绑定的做法有大致如下几种：发布者-订阅者模式（backbone.js）脏值检查（angular.js）数据劫持（vue.js）数据劫持双向绑定vue.js 则是采用数据劫持结合发布者-订阅者模式的方式，通过Object.defineProperty()来劫持各个属性的setter，getter，在数据变动时发布消息给订阅者，触发相应的监听回调。数据劫持是双向绑定各种方案...
2020-03-29 22:21:13
277
原创 NextTick 知识点记录
NextTicknextTick可以让我们在下次 DOM 更新循环结束之后执行延迟回调，用于获得更新后的 DOMNextTick 的实现方式Vue对于这个API的感情是曲折的，在2.4版本、2.5版本和2.6版本中对于nextTick进行反复变动，原因是浏览器对于微任务的不兼容性影响、微任务和宏任务各自优缺点的权衡。Vue2.4（优先微任务）： Promise > Mutat...
2020-03-28 16:55:10
150
原创 MVC、MVP、MVVM 软件架构的理解
复杂的软件必须有清晰合理的架构，否则无法开发和维护。MVC、MVP、MVVM 就是常见的软件架构模式，属于编程的方法论。MVCMVC 是 Model-View-Controller 的缩写Model 代表数据模型，Model变更后，通知View更新视图。View 代表视图（用户的操作界面），检测用户的键盘、鼠标等行为，传递调用Controller执行应用逻辑。Controller...
2020-03-23 22:49:33
164
原创 关于 chrome 80 后出现的 SameSite 问题
Google 发布的 Chrome 80 中，在所有的 Cookie 中默认设置 SameSite=Lax 来屏蔽所有的第三方 Cookie，详见 Cookies default to SameSite=Lax；并拒绝所有的非 Secure 的Cookie 设为 SameSite=None，详见 Reject insecure SameSite=None cookies关于 SameSite 属...
2020-03-19 22:29:07
13905
5
原创 CSS动画（一）
选自阮一峰博客1. Transitionimg{ transition: 1s 1s height ease;}单独定义成各个属性，如下img{ transition-property: height; transition-duration: 1s; transition-delay: 1s; transition-timing-functio...
2019-08-28 16:05:27
154
原创 JavaScript 数据类型
JavaScript 数据类型自 ES6 引入了一种新的原始数据类型 Symbol 后， JavaScript 语言共包含七种数据类型：undefined、null、Boolean、String、Number、Object 以及 Symbol。类型检测typeof 操作符检测：可检测上述七种数据类型中的 undefined、Boolean、String、Number、Object 、...
2019-07-11 11:34:19
106
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人