Hardi Xu – Medium

Sep 10, 2018

React原理

React快速的原因之一就是React很少直接操作DOM，太多的浏览器事件会占用很大内存。 React基本原理是，所有在JSX声明的事件都会被委托在顶层document节点上，并根据事件名和组件名存储回调函数(listenerBank)。每次当某个组件触发事件时，在document节点上绑定的监听函数（dispatchEvent）就会找到这个组件和它的所有父组件(ancestors)，对每个组件创建对应React合成事件(SyntheticEvent)并批处理(runEventQueueInBatch(events))，从而根据事件名和组件名调用(invokeGuardedCallback)回调函数。由于React合成事件系统模拟事件冒泡的方法是构建一个自己及父组件队列，因此也带来一个问题，合成事件不能阻止原生事件，原生事件可以阻止合成事件。用 event.stopPropagation() 并不能停止事件传播，应该使用 event.preventDefault()。

React

1 min read

React

1 min read

Sep 7, 2018

JS获取各种高度和宽度

获取屏幕的高度和宽度（屏幕分辨率）： window.screen.height window.screen.width 2. 获取屏幕工作区域的高度和宽度（去掉状态栏）： window.screen.availHeight window.screen.availWidth 3，网页全文的高度和宽度： document.body.scrollHeight document.body.scrollWidth 4，滚动条卷上去的高度和向右卷的宽度： document.body.scrollTop document.body.scrollLeft 5，网页可见区域的高度和宽度（不加边线）： document.body.clientHeight document.body.clientWidth 6，网页可见区域的高度和宽度（加边线）： document.body.offsetHeight document.body.offsetWidth

1 min read

Sep 5, 2018

雪碧图

即 CSS Sprite，是一种CSS图像合并技术，该方法是将小图标和背景图像合并到一张图片上，然后利用css的背景定位来显示需要显示的图片部分。简言之…比如：利用position:relative里面放置多个absolute小图片的方式，谨防大图下载不下来。示例: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> #container div{ /* 空格后代选择器：选中下面的所有的div*/ height: 25px; width: 25px; color: red; background-image: url("../../img/ico1.gif"); } #div2{ background-position: -42px 0;/*图片往左移动42个px*/ } #div3{ background-position: -165px -28px;/*图片往左移动165个px 图片向上移动28个px*/ } </style> <title>雪碧图</title> </head> <body> <div id="container"> <div></div> <div id="div2"></div> <div id="div3"></div> </div> </body> </html>

2 min read

Sep 5, 2018

JS 同步与异步

问题的原点： Javascript是单线程的核心概念：promise 单线程意味着，所有任务需要排队，前一个任务结束，才会执行后一个任务。如果前一个任务耗时很长，后一个任务就不得不一直等着。于是就有一个概念，任务队列。同步任务指的是，在主线程上排队执行的任务，只有前一个任务执行完毕，才能执行后一个任务；异步任务指的是，不进入主线程、而进入“任务队列”（task queue）的任务，只有”任务队列”通知主线程，某个异步任务可以执行了，该任务才会进入主线程执行。异步的运行机制: （1）所有同步任务都在主线程上执行，形成一个执行栈（execution context stack）。（2）主线程之外，还存在一个”任务队列”（task queue）。只要异步任务有了运行结果，就在”任务队列”之中放置一个事件。（3）一旦”执行栈”中的所有同步任务执行完毕，系统就会读取”任务队列”，看看里面有哪些事件。那些对应的异步任务，于是结束等待状态，进入执行栈，开始执行。

3 min read

Sep 5, 2018

代码压缩

Google Closure Compiler 特点：压缩混淆最彻底，破坏原有代码，不可压缩CSS文件，运行在java环境下，要严格注意书写规范。谷歌官网：https://developers.google.com/closure/compiler/ 2. Yahoo Yui Compressor JS压缩工具压缩模式： A.“ — nomunge”:只压缩,不对局部变量进行混淆。只是删除空格换行注释和部分结尾分号。 B.””— preserve-semi”:在” — nomunge”的基础上，保留所有的分号，并且对局部变量进行混淆。 C.” — disable-optimizations”:禁止优化。对局部变量进行混淆，而且删除部分结尾的分号。 3. Uglifyjs 特点：不可以压缩混淆CSS文件，运行在NodeJs环境下，压缩完的文件函数名称没有混淆，压缩混淆的作用小，安全。安装：

2 min read

Sep 5, 2018

CSS JS放置位置与前端性能的关系

浏览器渲染顺序：浏览器先下载html，然后在内存中把html代码转化成DOM Tree，然后浏览器根据DOM Tree上的Node分析CSS和images，当文档下载遇到JS时，JS独立下载。 JS是阻塞加载的，会影响页面加载的速度。 CSS页面渲染时首先是根据DOM结构生成一个DOM树然后加上CSS样式生成一个渲染树，如果CSS放在后面可能页面会出现闪跳、白屏或者布局混乱样式很丑直到CSS加载完成。 js非阻塞加载方案： 1 使用defer标签 2使用createElement来动态生成，但是这样有一个问题就是加载顺序在IE下不一定会是按代码写的顺序来加载，可能会影响到依赖项，有些文件就是必须在另一个文件前引用 3是用ajax加载，但是这种方法不支持CDN 一般来说css放头部js放底部来确保用户至少能早一点看到界面，让网站看起来至少反应快一点，不过如果css稍微有点多了，会让屏幕白屏时间更长，所以，并不是说把css都放顶部是一个完美的方法，而且有些js必须在页面加载前执行掉。

2 min read