09 2019 档案
摘要：什么是设计模式？ 就是前人经过无数次实践总结出来的一套写代码的方式。 常见的几种设计模式： 1. 工厂模式 工厂就是用来隐藏创建实例的复杂度的。使用者不用关系内部的逻辑，只管传约定好的参数，就可以得到想要的新实例。 2. 单例模式 保证一类对象在全局只有一个对象实例可以访问，常用于全局缓存、全局状态
阅读全文
摘要：1. hash 修改的时候：history.pushState('名字', null, '/xxx') || location.hash = '/xxx' 回退的时候：window.addEventListener('statepop' || 'hashchange') 2. history 修改的
阅读全文
摘要：FC（Formatting Context） 它是W3C CSS2.1规范中的一个概念，定义的是页面中的一块渲染区域，并且有一套渲染规则，它决定了其子元素将如何定位，以及和其他元素的关系和相互作用。 BFC（block formatting context） 直译为“块级格式化上下文” W3C原文：
阅读全文
摘要：HTTP 2 推荐阅读：https://segmentfault.com/a/1190000011172823?utm_source=tag-newest 进来支持 HTTP 2 的网站越来愈多了，这是一个很好的趋势。虽然 HTTP 2 的 RFC 写得很厚，但是总的来说可以总结为以下几点： 1.
阅读全文
摘要：推荐阅读：http://www.ruanyifeng.com/blog/2019/03/grid-layout-tutorial.html 1. 启动网格布局 启动后，子元素的float、display: inline-block、display: table-cell、vertical-align
阅读全文
摘要：1. 三次握手、四次挥手 详细查看：https://www.cnblogs.com/amiezhang/p/6703390.html 2. ARQ 协议 ARQ 就是超时重传机制，分为 2 种：停止等待ARQ 和 连续ARQ 停止等待ARQ： 只要 A 向 B 发送一段报文，都要停止发送并启动一个定
阅读全文
摘要：TCP 我们了解得多了，所以今天我们站在 UDP 的角度，探讨一下 UDP 区别于 TCP 的特点。 1. 面向无连接 UDP 比 TCP 简单得多，不需要“三次握手”来建立连接，直接把内容发送出去。 2. 数据的不可靠性 UDP 不会验证数据报文，不会流量控制，因此数据有可能会出现失真，或者丢包的
阅读全文
摘要：1. vue 生命周期函数（详细查看：Vue实例的生命周期（钩子函数）） 有 10 个钩子，对应 5 个动作： create（创建） mount（vdom挂载） update（数据更新导致dom需要重新渲染和打补丁） activated（keep-alive组件激活） destory（销毁） 2.
阅读全文
摘要：推荐阅读：原来 CSS 与 JS 是这样阻塞 DOM 解析和渲染的 废话少说，先来看个图： 1.浏览器先解析HTML产生一个 DOM Tree。 2.解析 CSS 会产生 CSS Rule Tree。 3.解析完成后，浏览器引擎会通过 DOM Tree 和 CSS Rule Tree 来构造 Ren
阅读全文
摘要：现实 webpack 的打包产物 大概长这样(只把核心代码留下来)： 实现一个简版的webpack 依葫芦画瓢，实现思路分2步： 1. 分析入口文件，把所有的依赖找出来（包括所有后代的依赖） 2. 拼接出类似上面的立即执行函数 找依赖 ps: 我们用的是babel的配套工具来做语法分析和转化，但是真
阅读全文
摘要：一般我们谈的 webpack 优化 ，无非就是分为 打包时间 和 打包体积 的优化。 打包时间 优化打包时间，我们能想到的策略：减少需要读取和解析的文件 和 提高打包性能。 减少需要读取和解析的文件 1. 优化 loader 以 babel-loader 为例，如果可以，我们尽量规定 include
阅读全文
摘要：图片 你知道吗？加载网页时，平均 60% 以上的流量都来加载图片。 预请求（预解析DNS、预渲染页面、预加载） 懒执行、懒加载 首屏不需要的逻辑延迟执行，不在首批的图片延时加载 去抖、节流 避免短时间内发出多次请求 CDN 尽可能的在各个地方分布机房缓存数据
阅读全文
摘要：devicePixelRatio推荐阅读：https://developers.google.com/web/fundamentals/design-and-ux/responsive/images?hl=zh-cn Img 的 sizes 和 srcset sizes 这个属性可以写一些css，例
阅读全文
摘要：1. 整数 例如十进制的 30 30/2 .......... 0 15/2 ............ 1 7/2 ............ 1 3/2 .............. 1 1/2 .............. 1 所以得到结果是 从下往上，倒着排 11110 就是二进制的 30 2.
阅读全文
摘要：我们都知道在计算机里面，都是用补码来表示数字的，那究竟什么是补码，为什么要使用补码呢？ 什么是补码？ 介绍补码以前，需要先介绍 原码 和 反码。 原码 简单的来说就是最高位是符号位的二进制数 以8位二进制为例，最高位是符号位，其余就是用2进制来表示10禁止了 反码 正数的反码是其本身 负数的反码是,
阅读全文
摘要：推荐阅读：https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Operators/Bitwise_Operators << 左移 二进制数左移n位， 就等价于乘以2^n。 例如：14 << 2的值为56（可以算成14*2
阅读全文
摘要：海明码，又称汉明码，是一种线性纠错码，用于纠正数据。 奇偶校验 我们常听的数据校验，莫过于奇偶校验了。 假设数据传过来01010101, 那么其中有1位作为校验位，如果数据中包含有奇数个1的话，则将奇偶位设定为1；反之，如果数据中有偶数个1的话，则将奇偶位设定为0。 但是这个显然只能知道出错了，但是
阅读全文
摘要：点击劫持是一种视觉欺骗的攻击手段。 嵌套一个iframe，然后将 iframe 设置为透明。在页面中透出一个按钮诱导用户点击。 防御方法有2种： 1. X-FRAME-OPTIONS 通过 Response Header 设置，表示哪些情况下才允许使用 iframe 展示自己 deny 表示该页面不
阅读全文
摘要：csrf 是跨站点伪造请求，主要利用发请求，浏览器每次都会自动带上 cookie 这个特点。 下面我们看看例子： 例子一： 如果博客园有一个关注博主的api是get请求的话，那这里我新建一个恶意页面： 在访问这个页面那一瞬,img就会跨域get请求这个api，你不知不觉间同时也像博客园这个接口发送了
阅读全文
摘要：frame frame 必须在 frameset 里，而 frameset 又不能和 body 共存（就是一旦存在 frame，就不能存在 body 了，因此这个基本每人使用） 推荐阅读：https://www.w3school.com.cn/tags/tag_frame.asp Iframe 我们
阅读全文
摘要：之前介绍过csrf攻击，那个是通过编写恶意页面来通过跨域请求来调用用户的api 现在介绍的是xss攻击，这种攻击和csrf不同的是，恶意脚本是注入到了用户要访问页面的本身，而不是一个恶意页面 xss攻击按攻击方式可以分为2类:通过url和通过数据库 1.非持久性（一般通过url） 举个栗子： 正常发
阅读全文
摘要：回流 就是页面布局发生变化。 重绘 就是节点需要更改外观而不会影响布局。 和 Event Loop 的关系 1. 回流 和 重绘 发生在 Event Loop 执行完微任务后，因为浏览器是 60Hz 的刷新率，每 16.6ms 才会更新一次。 2. 然后判断是否有 resize 或者 scroll
阅读全文
摘要：1. script 没有 defer 和 async 会停止（阻塞）dom 树构建，立即加载，并执行脚本 2. script 带 async 不会停止（阻塞）dom 树构建，立即异步加载，加载好后立即执行 3. script 带 defer 不会停止（阻塞）dom 树构建，立即异步加载。加载好后，如
阅读全文
摘要：之前我们已经讨论过浏览器的渲染原理，今天我们来讨论下更广泛的从输入URL到渲染出页面的过程。 1. 查询该URL是否有缓存 如果有，则直接返回，没有的话，下一步 2. 查询URL对应的IP 首先，到 host 文件查找，如果找到则返回。 如果没有找到，去访问 DNS 服务器（一般先访问本地路由器，没
阅读全文
摘要：我们知道不同浏览器用的不同的渲染引擎： Tridend(IE)、Gecko(FF)、WebKit(Safari,Chrome,Andriod浏览器) 当然 Chrome 重构了一下 WebKit 然后管它叫 Blink。但是大体架构还是和 WebKit 一致的。 我们看看我们常说的 V8 和 Web
阅读全文
