LearningRecord
LearningRecord copied to clipboard
Rashomon511
学习资料汇总、阅读记录，持续学习,每天进步一点点.🏫🏫
断点续传最核心的内容就是把文件“切片”然后再一片一片的传给服务器，但是这看似简单的上传过程却有着无数的坑。 首先是文件的识别，一个文件被分成了若干份之后如何告诉服务器你切了多少块，以及最终服务器应该如何把你上传上去的文件进行合并，这都是要考虑的。 因此在文件开始上传之前，我们和服务器要有一个“握手”的过程，告诉服务器文件信息，然后和服务器约定切片的大小，当和服务器达成共识之后就可以开始后续的文件传输了。 前台要把每一块的文件传给后台，成功之后前端和后端都要标识一下，以便后续的断点。 当文件传输中断之后用户再次选择文件就可以通过标识来判断文件是否已经上传了一部分，如果是的话，那么我们可以接着上次的进度继续传文件，以达到续传的功能。 有了HTML5 的 File api之后切割文件比想想的要简单的多的多。 只要用slice 方法就可以了 ```javascript var packet = file.slice(start, end); ``` 参数start是开始切片的位置，end是切片结束的位置 单位都是字节。通过控制start和end 就可以是实现文件的分块 如 ```javascript file.slice(0,1000); file.slice(1000,2000); file.slice(2000,3000); // ...... ``` 在把文件切成片之后，接下来要做的事情就是把这些碎片传到服务器上。...
fetch和XMLHttpRequest相比，主要有以下优点: 语法简洁，更加语义化 基于标准 Promise 实现，支持 async/await 同构方便，使用 isomorphic-fetch Ajax和Fetch区别 - ajax是使用XMLHttpRequest对象发起的，但是用起来很麻烦，所以ES6新规范就有了fetch，fetch发一个请求不用像ajax那样写一大堆代码。 - 使用fetch无法取消一个请求，这是因为fetch基于Promise，而Promise无法做到这一点。 - 在默认情况下，fetch不会接受或者发送cookies - fetch没有办法原生监测请求的进度，而XMLHttpRequest可以 - fetch只对网络请求报错，对400，500都当做成功的请求，需要封装去处理 - fetch由于是ES6规范，兼容性上比不上XMLHttpRequest [fetch与ajax（XMLHttpRequest）相比](https://segmentfault.com/a/1190000013927644)
PC 时代为了突破浏览器的域名并发限制。有了域名发散。 浏览器有并发限制，是为了防止DDOS攻击。 域名收敛：就是将静态资源放在一个域名下。减少DNS解析的开销。 域名发散：是将静态资源放在多个子域名下，就可以多线程下载，提高并行度，使客户端加载静态资源更加迅速。 域名发散是pc端为了利用浏览器的多线程并行下载能力。而域名收敛多用与移动端，提高性能，因为dns解析是是从后向前迭代解析，如果域名过多性能会下降，增加DNS的解析开销。
- 移除空格 - 使用margin负值 - 使用font-size:0 - letter-spacing - word-spacing
```javascript div { width: 200px; height: 200px; } img { object-fit: cover; width: 100%; height: 100%; } ```
Flex 主要用于一维布局，而 Grid 则用于二维布局。 Flex flex容器中存在两条轴， 横轴和纵轴， 容器中的每个单元称为flex item。 在容器上可以设置6个属性： flex-direction flex-wrap flex-flow justify-content align-items align-content 注意：当设置 flex 布局之后，子元素的 float、clear、vertical-align 的属性将会失效。 Flex 项目属性 有六种属性可运用在 item 项目上: 1. order 2. flex-basis...
经过定位的元素，其position属性值必然是relative、absolute、fixed或sticky。 static：默认定位属性值。该关键字指定元素使用正常的布局行为，即元素在文档常规流中当前的布局位置。此时 top, right, bottom, left 和 z-index 属性无效。 relative：该关键字下，元素先放置在未添加定位时的位置，再在不改变页面布局的前提下调整元素位置（因此会在此元素未添加定位时所在位置留下空白）。 absolute：不为元素预留空间，通过指定元素相对于最近的非 static 定位祖先元素的偏移，来确定元素位置。绝对定位的元素可以设置外边距（margins），且不会与其他边距合并。 fixed：不为元素预留空间，而是通过指定元素相对于屏幕视口（viewport）的位置来指定元素位置。元素的位置在屏幕滚动时不会改变。打印时，元素会出现在的每页的固定位置。fixed 属性会创建新的层叠上下文。当元素祖先的 transform 属性非 none 时，容器由视口改为该祖先。 sticky：盒位置根据正常流计算(这称为正常流动中的位置)，然后相对于该元素在流中的 flow root（BFC）和 containing block（最近的块级祖先元素）定位。在所有情况下（即便被定位元素为 table 时），该元素定位均不对后续元素造成影响。当元素 B 被粘性定位时，后续元素的位置仍按照 B 未定位时的位置来确定。position:...
CSS 伪元素是添加到选择器的关键字，去选择元素的特定部分。它们可以用于装饰（:first-line，:first-letter）或将元素添加到标记中（与 content:...组合），而不必修改标记（:before，:after）。 - :first-line和:first-letter可以用来修饰文字。 - 上面提到的.clearfix方法中，使用clear: both来添加不占空间的元素。 - 使用:before和after展示提示中的三角箭头。鼓励关注点分离，因为三角被视为样式的一部分，而不是真正的 DOM。如果不使用额外的 HTML 元素，只用 CSS 样式绘制三角形是不太可能的。
首先，浏览器从最右边的选择器，即关键选择器（key selector），向左依次匹配。根据关键选择器，浏览器从 DOM 中筛选出元素，然后向上遍历被选元素的父元素，判断是否匹配。选择器匹配语句链越短，浏览器的匹配速度越快。避免使用标签和通用选择器作为关键选择器，因为它们会匹配大量的元素，浏览器必须要进行大量的工作，去判断这些元素的父元素们是否匹配。 BEM (Block Element Modifier) methodology recommends that everything has a single class, and, where you need hierarchy, that gets baked into the name of the class...
浮动（float）是 CSS 定位属性。浮动元素从网页的正常流动中移出，但是保持了部分的流动性，会影响其他元素的定位（比如文字会围绕着浮动元素）。这一点与绝对定位不同，绝对定位的元素完全从文档流中脱离。 CSS 的clear属性通过使用left、right、both，让该元素向下移动（清除浮动）到浮动元素下面。 如果父元素只包含浮动元素，那么该父元素的高度将塌缩为 0。我们可以通过清除（clear）从浮动元素后到父元素关闭前之间的浮动来修复这个问题 有一种 hack 的方法，是自定义一个.clearfix类，利用伪元素选择器::after清除浮动。另外还有一些方法，比如添加空的和设置浮动元素父元素的overflow属性。与这些方法不同的是，clearfix方法，只需要给父元素添加一个类，定义如下： ```javascript .clearfix::after { content: ''; display: block; clear: both; } ``` 值得一提的是，把父元素属性设置为overflow: auto或overflow: hidden，会使其内部的子元素形成块格式化上下文（Block Formatting Context），并且父元素会扩张自己，使其能够包围它的子元素。