- 博客(374)
- 收藏
- 关注
RSS订阅转载 BFC、IFC、FFC、GFC
FC（Formatting Context）它是W3C CSS2.1规范中的一个概念，定义的是页面中的一块渲染区域，并且有一套渲染规则，它决定了其子元素将如何定位，以及和其他元素的关系和相互作用。BFC（block formatting context）直译为“块级格式化上下文”W3C原文：Floats, absolutely positioned elem...
2019-09-21 19:52:00
271
转载 http2 3
HTTP 2推荐阅读：https://segmentfault.com/a/1190000011172823?utm_source=tag-newest进来支持 HTTP 2 的网站越来愈多了，这是一个很好的趋势。虽然 HTTP 2 的 RFC 写得很厚，但是总的来说可以总结为以下几点：1. 通过 TCP 多路复用，降低延迟3. 强制使用 TLS，保证安全性问题4. ...
2019-09-21 15:47:00
317
转载 网格布局 grid
推荐阅读：http://www.ruanyifeng.com/blog/2019/03/grid-layout-tutorial.html1. 启动网格布局div { display: grid;}启动后，子元素的float、display: inline-block、display: table-cell、vertical-align和column-*等设...
2019-09-17 09:06:00
258
转载 TCP的几个知识点
1. 三次握手、四次挥手详细查看：https://www.cnblogs.com/amiezhang/p/6703390.html2. ARQ 协议 ARQ就是超时重传机制，分为 2 种：停止等待ARQ 和 连续ARQ停止等待ARQ： 只要 A 向 B 发送一段报文，都要停止发送并启动一个定时器，等待对端回应，在定时器时间内接收到对端应答就取消定时器并发送下一段...
2019-09-15 09:58:00
167
转载 UDP 区别于 TCP 的特点
TCP 我们了解得多了，所以今天我们站在 UDP 的角度，探讨一下 UDP 区别于 TCP 的特点。1.面向无连接 UDP 比 TCP 简单得多，不需要“三次握手”来建立连接，直接把内容发送出去。2. 数据的不可靠性 UDP 不会验证数据报文，不会流量控制，因此数据有可能会出现失真，或者丢包的情况。3. 高效性 UDP 头部开销小，只有 8 个字节，而 T...
2019-09-14 22:45:00
65
转载 Vue 基础知识
1. vue 生命周期函数（详细查看：Vue实例的生命周期（钩子函数））有 10 个钩子，对应 5 个动作：create（创建）mount（vdom挂载）update（数据更新导致dom需要重新渲染和打补丁）active（keep-alive组件激活）destory（销毁）2. 组件间通讯父子组件父 -> 子：props...
2019-09-14 18:02:00
210
转载 页面渲染原理
推荐阅读：原来 CSS 与 JS 是这样阻塞 DOM 解析和渲染的废话少说，先来看个图：1.浏览器先解析HTML产生一个 DOM Tree。2.解析 CSS 会产生 CSS Rule Tree。3.解析完成后，浏览器引擎会通过 DOM Tree 和 CSS Rule Tree 来构造 Rendering Tree。(ps:Rendering Tree 渲...
2019-09-13 20:05:00
101
转载 实现一个简易版webpack
现实 webpack 的打包产物大概长这样(只把核心代码留下来)：实现一个简版的webpack依葫芦画瓢，实现思路分2步：1. 分析入口文件，把所有的依赖找出来（包括所有后代的依赖）2. 拼接出类似上面的立即执行函数找依赖const fs = require('fs');const path = require('path');co...
2019-09-13 17:51:00
305
转载 webpack 优化
一般我们谈的 webpack 优化 ，无非就是分为 打包时间 和 打包体积 的优化。打包时间 优化打包时间，我们能想到的策略：减少需要读取和解析的文件和提高打包性能。 减少需要读取和解析的文件 1. 优化 loader 以 babel-loader 为例，如果可以，我们尽量规定 include exclude 的范围 如果像 ba...
2019-09-09 09:06:00
85
转载 性能优化的几个小点
图片你知道吗？加载网页时，平均 60% 以上的流量都来加载图片。简单的图形，可以直接用 css 实现，代替使用图片CDN 服务器提供多种尺寸的图片，按屏幕宽度和像素密度去请求对应的图片（详细看我另外一篇博文）小图用base64多个小图合成一张雪碧图选择正确的图片格式（能用webp尽量用，不能的话，小图用png，大图用jpg）预请求（预解析DNS、预渲染...
2019-09-08 19:28:00
71
转载 响应式图片
devicePixelRatio推荐阅读：https://developers.google.com/web/fundamentals/design-and-ux/responsive/images?hl=zh-cnImg 的 sizes 和 srcset<img src="100.png" sizes="50%" srcset="100.png 100w, 200.p...
2019-09-08 10:25:00
114
转载 js 的 二进制
1. 整数例如十进制的 3030/2 .......... 015/2 ............ 17/2............ 13/2 .............. 11/2 .............. 1所以得到结果是 从下往上，倒着排 11110就是二进制的 302. 小数例如十进制的 0.1250.125*2=0.25 ...
2019-09-07 11:47:00
1203
转载 补码
我们都知道在计算机里面，都是用补码来表示数字的，那究竟什么是补码，为什么要使用补码呢？什么是补码？介绍补码以前，需要先介绍 原码 和 反码。原码简单的来说就是最高位是符号位的二进制数以8位二进制为例，最高位是符号位，其余就是用2进制来表示10禁止了[+1]原 = 0000 0001[-1]原 = 1000 0001反码正数的反码是其本身负数...
2019-09-07 05:22:00
49
转载 位运算符
推荐阅读：https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Operators/Bitwise_Operators<< 左移二进制数左移n位， 就等价于乘以2^n。例如：14 << 2的值为56（可以算成14*2^2）>> 右移二进制数右移n...
2019-09-06 23:27:00
95
转载 海明码
海明码，又称汉明码，是一种线性纠错码，用于纠正数据。奇偶校验我们常听的数据校验，莫过于奇偶校验了。假设数据传过来01010101, 那么其中有1位作为校验位，如果数据中包含有奇数个1的话，则将奇偶位设定为1；反之，如果数据中有偶数个1的话，则将奇偶位设定为0。但是这个显然只能知道出错了，但是无法定位具体是哪一位出错了，因此海明码出现了！海明码我们用更多的位，作为校...
2019-09-06 09:20:00
1828
转载 点击劫持
点击劫持是一种视觉欺骗的攻击手段。嵌套一个iframe，然后将iframe设置为透明。在页面中透出一个按钮诱导用户点击。防御方法有2种：1.X-FRAME-OPTIONS 通过 Response Header 设置，表示哪些情况下才允许使用 iframe 展示自己X-Frame-Options: denyX-Frame-Options: sameo...
2019-09-04 09:11:00
69
转载 csrf攻击
csrf 是跨站点伪造请求，主要利用发请求，浏览器每次都会自动带上 cookie 这个特点。下面我们看看例子：例子一：如果博客园有一个关注博主的api是get请求的话，那这里我新建一个恶意页面：<!DOCTYPE html><html> <head> <meta charset="utf-8"> ...
2019-09-04 09:00:00
70
转载 <frame>、<iframe>、<embed>、<object> 和 <applet>
frameframe 必须在 frameset 里，而 frameset 又不能和 body 共存（就是一旦存在 frame，就不能存在 body 了，因此这个基本每人使用）推荐阅读：https://www.w3school.com.cn/tags/tag_frame.asp<html><frameset cols="25%,50%,25%"&g...
2019-09-04 08:36:00
170
转载 xss攻击
之前介绍过csrf攻击，那个是通过编写恶意页面来通过跨域请求来调用用户的api现在介绍的是xss攻击，这种攻击和csrf不同的是，恶意脚本是注入到了用户要访问页面的本身，而不是一个恶意页面xss攻击按攻击方式可以分为2类:通过url和通过数据库1.非持久性（一般通过url）举个栗子：正常发送消息：http://www.test.com/message.php?se...
2019-09-04 08:08:00
103
转载 回流 和 重绘
回流就是页面布局发生变化。重绘就是节点需要更改外观而不会影响布局。和 Event Loop 的关系1. 回流 和 重绘 发生在 Event Loop 执行完微任务后，因为浏览器是 60Hz 的刷新率，每 16.6ms 才会更新一次。2.然后判断是否有resize或者scroll事件，有的话会去触发事件，所以resize和scroll事...
2019-09-03 07:30:00
117
转载 defer 和 async 的区别
1. script 没有 defer 和 async 会停止（阻塞）dom 树构建，立即加载，并执行脚本2. script 带 async 不会停止（阻塞）dom 树构建，立即异步加载，加载好后立即执行3. script 带 defer 不会停止（阻塞）dom 树构建，立即异步加载。加载好后，如果 dom 树还没构建好，则先等 dom 树解析好再执行；如果 do...
2019-09-02 23:47:00
93
转载 从输入URL到浏览页面的过程
之前我们已经讨论过浏览器的渲染原理，今天我们来讨论下更广泛的从输入URL到渲染出页面的过程。1. 查询该URL是否有缓存 如果有，则直接返回，没有的话，下一步2. 查询URL对应的IP 首先，到 host 文件查找，如果找到则返回。 如果没有找到，去访问 DNS 服务器（一般先访问本地路由器，没有再访问更高级的 DNS 服务器），最终得到对应的 IP...
2019-09-02 23:17:00
70
转载 webkit vs v8
我们知道不同浏览器用的不同的渲染引擎：Tridend(IE)、Gecko(FF)、WebKit(Safari,Chrome,Andriod浏览器)当然 Chrome 重构了一下 WebKit 然后管它叫 Blink。但是大体架构还是和 WebKit 一致的。我们看看我们常说的 V8 和 WebKit 有什么关系吧。下面是 WebKit 的大致结构：实线框内模...
2019-09-01 21:54:00
234
转载 缓存
1. 位置我们浏览器查找缓存会有优先级：1. Service Worker2. Memory Cache3. Disk Cache4. Push Cache5. 网络请求Service Worker在上一篇博文，我们已经介绍过Service Worker，我们可以利用。如果我们定义了Service Worker，那么，所有请求都先走它。如果 Ser...
2019-08-29 23:09:00
87
转载 serviceWorker
推荐阅读：Service Worker 简介在 Service Worker 之前，我们一般用 AppCache 来实现离线体验（就是配置 Manifest 文件的方式），这个会有很多问题（博主曾尝试过，体验非常差，非常难用，而且不灵活）。而 Service Worker 可以写脚本去灵活自由地控制缓存。基本使用：1. 注册<!-- /report/inde...
2019-08-28 09:16:00
98
转载 cookie
在 H5 之前，我们浏览器存储都只能使用 cookie，而一般我们会用 cookie 来存储我们的 SessionID，作为身份凭证。对比其他存储方式特性cookielocalStoragesessionStorageindexDB数据生命周期一般由服务器生成，可以设置过期时间除非被清理，否则一直存在页面关闭就清理除非被清理，否则一直存在...
2019-08-27 08:41:00
71
转载 跨域
跨域如果协议、域名或者端口有一个不同就是跨域。同源策略推荐阅读：浏览器同源政策及其规避方法因为浏览器出于安全考虑(主要用来 防止信息泄露 和CSRF 攻击)，制定了同源策略，意思就是跨域时 Ajax 请求会失败。问题： 然而同源策略还是不能完全阻止 CSRF，它只是把 Response 给拦截了，就是请求还是发出去了。 换句话说只能阻止获取 Res...
2019-08-25 23:37:00
79
转载 Ajax跨域CORS
在Ajax2.0中多了CORS允许我们跨域，但是其中有着几种的限制：Origin、Methods、Headers、Credentials1.Origin当浏览器用Ajax跨域请求的时候，会带上一个请求头“Origin: 协议://页面域名”,而服务器需要返回一个响应头“Access-Control-Allow-Origin: 协议://对应域名“，如果Origin和Access-...
2019-08-25 19:20:00
94
转载 事件触发机制
首先我们先弄明白浏览器事件触发机制，分为三个阶段： 1. 事件捕获阶段：window 往事件触发处传播，遇到注册的捕获事件会触发 （addEventListener 的 true） 2.事件目标处理函数：传播到事件触发处时触发注册的事件 (博主没搞懂这个阶段) 3.事件冒泡阶段：从事件触发处往 window传播，遇到注册的冒泡事件会触发（addEventListe...
2019-08-25 10:27:00
4664
转载 斐波拉契数列
斐波拉契数列a1 = 1a2 = 1an = an-1 + an-2（n > 2时）第 n 项// 递归写法 （性能极差, 首先这个不是纯尾递归，其次Chrome也没有做尾递归优化）function Fibonacci(n) { if (n<3) return 1; return Fibonacci(n-1) + Fi...
2019-08-24 19:51:00
121
转载 普通对象以外的对象
对于普通对象，我们理解了它的 key-value 数据结构 和 原型链相关的知识 基本就可以了，但是如果想用好JS的对象还远远不够。因为我们日常工作中，接触到的主要 API，几乎都是由这些对象提供的。根据对象的来源来分类宿主对象内置对象固有对象：原生对象普通对象宿主对象 JavaScript 宿主环境提供的对象。 例如浏览器...
2019-08-23 07:33:00
163
转载 js new call apply bind 的 原理
newnew 做了什么事？1.以 Object.protoype 为原型创建一个新对象2.以新对象为 this，执行函数的 [[call]]3.如果 [[call]] 的返回值是对象，那么，返回这个对象，否则返回第一步创建的新对象function myNew(fn, ...args) { const obj = Object.create(fn.proto...
2019-08-22 10:56:00
136
转载 js的新生代垃圾回收
推荐阅读：https://www.cnblogs.com/chengxs/p/10919311.html在进行老生代的标记清除法回收以前，还会有一个新生代的垃圾回收算法执行。新生代和老生代所谓新生代，指的是新产生的对象；老生代就是经历过新生代垃圾回收后还“存活”下来的对象。新生代的垃圾回收算法 Scavenge GC算法很简单：1. 我们维护一个列表，老生代...
2019-08-21 08:25:00
377
转载 js的老生代垃圾回收
推荐阅读：《JS 闯关记》之垃圾回收和内存管理常见的垃圾回收有2种策略：标记清除 和 引用计数标记清除会遍历堆中所有的对象，然后标记活的对象，在标记完成后，销毁所有没有被标记的对象。在标记大型对内存时，可能需要几百毫秒才能完成一次标记。这就会导致一些性能上的问题。为了解决这个问题，2011 年，V8 从 stop-the-world 标记切换到增量标志。在增量标记期间...
2019-08-21 08:08:00
289
转载 chrome的内存限制
推荐阅读：https://www.cnblogs.com/chengxs/p/10919311.htmlchrome内存限制存在限制Chrome限制了所能使用的内存极限（64位为1.4GB，32位为1.0GB），这也就意味着将无法直接操作一些大内存对象。为何限制Chrome之所以限制了内存的大小，表面上的原因是V8最初是作为浏览器的JavaScript引擎而设计，不太...
2019-08-21 07:40:00
3833
转载 @babel/preset-env useBuiltIns 说明
推荐阅读：https://blog.hhking.cn/2019/04/02/babel-v7-update/useBuiltInsfalse1"useBuiltIns": false,此时不对polyfill做操作。如果引入@babel/polyfill，则无视配置的浏览器兼容，引入所有的polyfill。...
2019-08-20 17:27:00
6805
转载 多个模块的大型项目协作方式
推荐阅读：源自Babel的多包管理工具：Lerna对于多个模块的大型项目的协作管理，一般地有multirepo、monorepo和submodules等多种方式：multirepo是将多个模块分别分为多个仓库，早期的Babel（Babel6以前）使用的就是这种方式；submodules是借助git的实现，在.gitmodules中写明引用的仓库，在主仓库中只保留必要的索引；...
2019-08-20 09:10:00
266
转载 NodeJs的Event Loop
我们之前谈过浏览器的Event Loop：https://www.cnblogs.com/amiezhang/p/11349450.html简单来说，就是每执行一个宏任务，就去执行微任务队列，直到清空，再执行下个宏任务。那么NodeJs的Event Loop是怎么样的呢？NodeJS的Event LoopNodeJs的Event Loop其实也分了宏任务和微任务...
2019-08-20 08:57:00
80
转载 yarn 强制孙依赖的版本
今天博主遇到一个棘手的问题，@vue/cli-service 依赖了一个包 portfiner@^1.0.20，但是 2 天前，这个包更新到了1.0.22，带来了一些问题。博主第一反应就是想 yarn add [email protected]，看看yarn可不可以复用这个版本。但是结果却是 1.0.21 和 1.0.22 都装上了，而且 @vue/cli-service 还是依...
2019-08-19 21:13:00
1673
转载 怎么写一个带 bin 的 npm 包
只需要2步：1. 在package.json 定义 一下 :{ "name": "my-cli", ..., "bin": { "command-name": "./xxx/xxx.js" // 对于package.json 的相对路径 }, ...}2. 在使用的文件首行写#!/usr/bin/env node...
2019-08-19 13:24:00
410
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人