一个专注于WEB开发的技术的个人博客

写在前面，本文将同步发布于Blog、掘金、segmentfault、知乎等处，如果本文对你有帮助，记得为我得到我的个人技术博客项目给个star哦。 为何写这篇文章？你可能做Web开发已经有一段时间，你是否有想过下列问题呢？为什么div元素甚至是所有的html元素都可以使用addEventListener来添加事件呢？为什么每个DOM节点都有parentNode、firstChild、nodeTyp ...

touchstart 和 click 的坑产生原因：1234var tap = 'ontouchstart' in window ? 'touchstart' : 'click';wrap.addEvenListener(tap, function(){ signUp();}); 通过上面代码简单为用户设置事件类 ...

setState 一定是异步的吗？setState 只在合成事件和钩子函数中是“异步”的，在原生事件和 setTimeout 中都是“同步”的。你真的理解setState吗？ FiberFiber 本质上是一个虚拟的堆栈帧，新的调度器会按照优先级自由调度这些帧，从而将之前的同步渲染改成了异步渲染，在不影响体验的情况下去分段计算更新。对于如何区别优先级，React 有自己的一套逻辑。对于动画这种实时 ...

页面渲染的4个关键指示First Paint（FP）仅有一个需要挂载的根节点。 First Contentful Paint（FCP）包含页面的基本框架，但没有数据内容。 First Meaningful（FMP）包含页面所有元素及数据。 Time to Interactive（TTI）允许交互时间。 预加载技术DNS prefetchDNS prefetching通过指定具体的URL来告知客户端 ...

伪元素（以::after举例）属性基础介绍定义：::after用来创建一个伪元素，做为已选中元素的最后一个子元素。通常会配合content属性来为该元素添加装饰内容。这个虚拟元素默认是行内元素。使用：CSS2.0为element:after{content: '';...}；CSS3.0为element::after{content: '';...}这些并不是我今天 ...

安全（Safe）说一个HTTP方法是安全的，是说这是个不会修改服务器的数据的方法。也就是说，这是一个对服务器只读操作的方法。这些方法是安全的：GET，HEAD和OPTIONS。所有安全的方法都是idempotent（幂等），有些不安全的方法如PUT和DELETE则不是。PS：网络爬虫也是依赖于安全的HTTP方法，安全方法: GET, HEAD, OPTIONS；非安全方法: PUT, DELETE ...

浏览器安全同源策略（Same Origin Policy）同源策略限制了一个源（origin）中加载的文档或脚本与其他源（origin）中的资源交互的方式。这是一种用来隔离潜在恶意文档的关键安全机制。源的定义：如果两个页面的协议、域名、端口（如果有指定）和都相同，则两个页面具有相同的源。 浏览器沙箱Sandbox 和 多线程架构浏览器为我们提供了一个独立的沙箱环境，尽量来保障浏览器的安全，也有部分 ...

本文总结日常CSS技巧，大多收集于网络、《CSS揭秘》 半透明边框思路：默认 background 是从 border-box 裁切，我们可以通过 background-clip 属性来改变 background 裁切区域如 padding-box，在使用 rgba 或者 hsla 来指定边框颜色即可。12345.border { border: 10px solid hsla(0,0 ...

本文主要目的唤起你的记忆，如果你很熟悉该属性就当做复习，如果不熟悉，你就应该好好去查查文档了，毕竟本文只是点到即止的。 CSS方法attr()用来获取选择到的元素的某一HTML属性值，并用于其样式。 calc()可以通过计算来决定一个CSS属性的值了。PS：运算符前后都需要保留一个空格，例如：width: calc(100% - 10px); countercounter-reset属性创建或重置 ...

大量开源项目hellogithub 轮子awesome-javascript前端常用插件、工具类库汇总Web开发前端模版美化代码-prettierWeb技术的终端交互式地图剪贴板html的head标签CSS-Hover.css视差滚动库轻量级富文本编辑器markDown生成流程图marked键盘事件库-hotkeys实现数字增长动画-countUp.jsWeb水印搭建标准的js库jslib-bas ...