浏览器的渲染过程 本文先从浏览器的渲染过程来从头到尾的讲解一下回流重绘，如果大家想直接看如何减少回流和重绘，可以跳到后面。（这个渲染过程来自MDN） 从上面这个图上，我们可以看到，浏览器渲染过程如下： 渲染过程看起来很简单，让我们来具体了解下每一步具体做了什么。 生成渲染树 为了构建渲染树，浏览器主 ...
分类：
其他好文 时间：
2019-05-01 22:22:57
阅读次数：
160
Hello 小伙伴们，如果觉得本文还不错，记得给个 star ， 你们的 star 是我学习的动力！GitHub 地址 本文涉及知识点： 防抖与节流 重绘与回流 浏览器解析 URL DNS 域名解析 TCP 三次握手与四次挥手 浏览器渲染页面 在本文中，jsliang 会讲解通过自我探索后关于上述知 ...
分类：
Web程序 时间：
2019-04-16 09:25:11
阅读次数：
304
在 PCB 设计过程中，由于平面的分割，可能会导致信号参考平面不连续，对于低低频信号，可能没什么关系，而在高频数字系统中，高频信号以参考平面作返回路径，即回流路径，如果参考?面不连续，信号跨分割，这就会带来诸多的问题，如 EMI、串扰等问题。这种情况下，需要对分割进行缝补，为信号提供较短的回流通路， ...
分类：
其他好文 时间：
2019-04-12 11:57:11
阅读次数：
636
浏览器渲染一个页面有两条线程：一条是渲染js脚本，一条是渲染css脚本。但是两条线程是互斥的。 回流：当render tree的一部分或者全部元素因改变了自身的宽高，布局，显示或隐藏，或元素内部的文字结构发生变化，导致需要重新构建页面的时候，回流就产生了。 重绘：当一个元素自身的宽高，布局，及显示或 ...
分类：
其他好文 时间：
2019-03-18 11:40:00
阅读次数：
921
在最近，小米9卖的特别火，在官方抢购的时候基本都是一点既空。这不禁让我想到了，官网是怎样控制顾客不停点击发起请求而不导致官网崩溃的呢？这由此引出了前端性能的优化中的 防抖和节流。在闲聊完后你就会发现有些时候在抢购商品的时候，你用鼠标在几秒钟不停的按了数十次，或许它仅仅是发送了你第一次点击抢购的那个请 ...
分类：
其他好文 时间：
2019-03-15 13:15:00
阅读次数：
200
一.什么是渲染数据 就是HTML中要显示的数据是通过js来实现的而不是直接在HTML中输入数据，这个过程叫做数据渲染 二.渲染数据的方式 案例分析： 1.字符串拼接（最为常用的方式） 优点：只进行了一次Dom回流 缺点:原有dom的事件都会丢失 原因：就在与innerHTML这个属性，这个属性是返回 ...
分类：
其他好文 时间：
2019-03-14 16:44:44
阅读次数：
174
1.模板 就是字符串拼接 2.文档碎片 优点： 既不影响原有dom的属性，也只回流一次。 3.字符串拼接 优点：只进行了一次Dom回流 缺点:原有dom的事件都会丢失 原因：就在与innerHTML这个属性，这个属性是返回或设置Dom中的内容，以字符串形式返回，拼接完之后是string类型，而onm ...
分类：
Web程序 时间：
2019-03-14 15:07:49
阅读次数：
247
1.渲染数据 （1）案例分析 原有的list中有三个li，并且每个li身上都有onmouseover事件 1.字符串拼接，最常用的方法 优点：只进行了一次Dom回流 缺点：原有的dom的事件都会丢失 原因：就在与innerHTML这个属性，这个属性是返回或设置Dom中的内容，以字符串形式返回，拼接完 ...
分类：
其他好文 时间：
2019-03-14 15:05:27
阅读次数：
195
渲染数据的四种方式： 1、字符串拼接 案例： · 字符串拼接的优点：只进行一次Dom回流 缺点：原有Dom的事件都会丢失 原因：innerHTML 这个属性返回或设置Dom中的内容 ，以字符串返回，所以这些onmouse 系列事件就会消失。 （补充：DOM 回流 ： 每当对Dom元素进行增删改的时候 ...
分类：
其他好文 时间：
2019-03-14 15:03:55
阅读次数：
205
染数据的方法 1）、字符串拼接， 最常用的方法 优点：只进行一次dom回流 缺点：原有dom的事件都会丢失 原因：就在于innerHTML这个属性，这个属性是返回或设置dom中的内容，以字符串形式返回，拼接完之后是string类型，而一些事件属性是dom元素对象身上的，所以这些那些事件属性就会丢失。 ...
分类：
其他好文 时间：
2019-03-14 14:56:02
阅读次数：
180
