blog
blog copied to clipboard
LiuL0703
### XSS（Cross Site Script）跨站点脚本攻击 原理：往Web页面里插入恶意可执行网页脚本，当用户浏览该网页时，嵌入其中的Web代码被执行，从而达到盗取用户信息或侵犯隐私的目的 XSS类型： * 反射型XSS漏洞：通过给他人发送带有恶意脚本代码参数的URL 诱导点击触发，恶意代码被执行 **特征**: 即时性不经过服务器存储，直接通过GET或POST请求就可完成一次攻击拿到用户隐私数据 需要诱导点击触发 盗取用户敏感保密信息 **防范**：Web页面渲染的所有内容或渲染数据必须都来自于服务器端 尽量不要从URL，document.referrer，document.forms这种DOM API获取数据直接渲染 不要使用eval等可执行字符串方法 前端渲染时对任何字段都要做escape转义编码 * 存储型XSS露洞:通过向服务器提交数据将恶意代码存储于数据库持久保存当前页面获取数据后将其渲染 **特征**：持久性，植入在数据库中， 危害面广 盗取用户敏感私密信息 **防范**：后端入库前将所有字段统一转义处理 后端输出给前端数据统一转义处理 前端渲染页面DOM时将任何字段都做转义处理 * 基于字符串集的XSS：绕过转义处理的一种方式 **防范**：指定 *...
### 什么是微前端 众所周知，微前端是一种架构方式，与后端的微服务可以说是一脉相承。其核心思想就是"分而治之"。简单来说就是讲某单体应用解耦拆分为若干个子应用，这些子应用可以独立运行、开发、部署、和维护、且互不影响。且各个子应用可以选择不同的技术栈开发等等。目前在项目中有所尝试，下面内容就以实际业务为基础的微前端实践 ### 需求背景 说之前先来分析一下为什么需要微前端? 背景分析： 项目中的子应用越来越多，其中部分功能越来越复杂，加之系统开发中碰到的问题越来越多 开发过程中的痛点： + 项目越来越大，目录结构越发不可控。 + 组件之间耦合越来越深 + 业务复杂度越来越高 + 业务与业务之间相互调用 没有物理隔离 + 定位排查问题困难 + 开发、构建、部署耗时 ### 预期结果 + 公共组件抽离，统一维护，可高度复用，便于后续维护 + 业务之间物理隔离 业务模块之间相互解耦，提高系统整体稳定性 +...
# HTML **display：none指的是元素完全不陈列出来，不占据空间，涉及到了DOM结构，故产生reflow与repaint visibility：hidden指的是元素不可见但存在，保留空间，不影响结构，故只产生repaint** **标准的盒子模型：盒子总宽度 =margin + border + padding + content** **W3C中的width = content** **IE盒模型：盒子总宽度 = margin+content** **IE中盒模型的Width = border+padding+content** #### 关于onInput() getComputedStyle() > onInput 属性实时监控< input> 或者中的value值得变化状况 Object.target.value.length...
## new操作符创建对象可以分为四个步骤： 1 . 创建一个空对象 2 . 将所创建对象的__proto__属性值设成构造函数的prototype属性值 3 . 执行构造函数中的代码，构造函数中的this指向该对象 4 . 返回该对象（除非构造函数中返回一个对象） ```js function Person(a, b) { this.name = a; this.age = b; } Person.prototype.show = function() {...
限制并发
Promise实现一个 并发限制的方法 限制每次最多同时发送n个请求 ```js async function pMap (iterable, mapper, concurrency) { return new Promise((resolve, reject_)=>{ const result = [] const iterator = iterable[Symbol.iterator]() let currentIndex = 0 let resolvingCount =...
不知道你有没有注意到，在基于Webkit的浏览器上执行某些CSS操作时页面会出现不流畅或者闪一下的情况，尤其是执行CSS动画的时候，那你之前可能已经听过“硬件加速(hardware acceleration)”这个专业术语了。 ### CPU&GPU&硬件加速(Hardware Acceleration) 简单来说硬件加速意味着浏览器会帮你把一部分对渲染页面来说较繁重的任务交给GPU(**Graphics Processing Unit**)，而不是一股脑都交给CPU(**Central Processing Unit** )去处理，当这部分CSS操作得到硬件加速时，可以使页面渲染速度更快。 CPU在电脑主板上，就像是计算机的”大脑“,CPU几乎会做所有事，GPU位于计算机的显卡上，主要用做图形渲染，此外，GPU是专为执行图形渲染所需的复杂数学和几何计算而设计的，所以将一些操作移到GPU上去处理可以带来巨大的性能提升并且减轻了CPU的压力，在移动端尤为明显。 硬件加速(又名GPU加速)依赖于浏览器在渲染页面时使用的分层模型，当对页面上的元素执行某些操作(例如3D变换)，对应元素会被提升到到自己的图层，独立于页面的其余部分的呈现并在后期合成（绘制到屏幕上），这样单独把元素隔离，可以使得当页面上只有这个元素发生变换(transform)的时候其余元素不需要重新渲染，从而带来速度提升的优点，值得一提的是，只有3D变换才有资格拥有自己的图层，2D变换则没有。 CSS animation，transform，transition这些属性并不会自动被硬件加速，而是由浏览器的渲染引擎去执行的，但是一些浏览器通过某些属性提供硬件加速，从而提升页面的渲染性能。例如CSS中的opacity属性是少数几个可以被浏览器认定为可被硬件加速的属性之一，因为GPU可以很容易的实现。一般来说，任何想要通过CSS transition或动画淡化不透明度的图层的行为，浏览器会把它丢给GPU去处理从而提高处理速度。所有的CSS属性中`opacity`是性能最好属性的之一，其他常见的硬件加速操作是CSS 3D变换 **Hack方法来硬件加速**：translateZ() 或者 translate3d() 使用`translateZ()`(或`translate3d()`)这种hack方式（有时也称为null变换hack）来让浏览器对`animation`或`transform`行为使用硬件加速，通过向一个不会在三维空间中转换的元素添加简单的3D变换来实现硬件加速。例如通过给一个二维空间中动画添加简单的规则来硬件加速。 ```css transform:translate3d(0,0,0) ``` 硬件加速操作会创建所谓的合成层，合成层会被上传到GPU并由GPU合成，但是这种hack的方法去创建图层并不是万能的，图层创建可以加快页面加载速度，但会带来其他的成本：它会占用系统RAM和GPU上的内存（限于移动设备），并且很多时候都会带来不良影响（特别是在移动设备上），所以这种方法要合理的去使用，你必须要清楚的知道使用这种方式是不是真的可以提高页面性能，不能使这个操作反而成了影响页面性能的瓶颈。 除了这种创建图层的方法，CSS引入了一个新的属性，它允许我们提前告知浏览器可能会对元素进行哪些操作，让浏览器去优化并提前处理那些潜在的比较消耗性能的操作比如在动画开始之前，提前处理元素的动画行为。这个属性就是```will-change``` ### 新属性`will-change`的荣光 `will-change`属性允许你提前通知浏览器你可能会对某个元素做什么类型的操作，以便于浏览器在需要的时候采取适当的优化方案。因此，避免了可能对页面的响应性产生负面影响的非必要成本，使元素可以更快地呈现。渲染并快速更新，从而获得更流畅的体验。 举个例子，当对元素使用CSS...
"**fatal: unable to access 'https://chromium.googlesource.com/chromium/tools/depot_tools.git/': Failed to connect to chromium.googlesource.com port 443: Operation timed out**" [chromium](https://chromium.googlesource.com/chromium/src/+/master/docs/mac_build_instructions.md#Get-the-code) 解决办法：git config --global http.proxy 127.0.0.1:端口号【下载时候发现又不能用了，那就去 vi .gitconfig 里把设置的http和https删掉】 **fetch chromium zsh: command not found:...
面试总结
## 面试总结 回顾一下二月到三月之间经历的面试 如下会列出面试过程中问的比较多的一些问题，希望可以帮到有需要的同学，如果都可以答上来，那么前两面应该差不多了三四面就看运气了。 ⭐️ 个数用来表示频次 ### HTML CSS - H5新增的标签 ⭐️⭐️ - flex布局 flex : 1 ⭐️⭐️⭐️⭐️⭐️ - position ⭐️⭐️⭐️⭐️ - 水平垂直居中 ⭐️⭐️⭐️⭐️ - 左边固定右边自适应 ⭐️⭐️⭐️⭐️ - 动画 animation...
### React为什么不应该在componentWillMount阶段获取数据 > This is problematic both server rendering (where the external data won’t be used) and the upcoming async rendering mode (where the request might be initiated multiple times)....