极限特工--webpack与React
极限特工–webpack与React在使用webpack的时候,我们是可以优化包大小的。下面记录下优化的过程。 拆分jswebpack的配置是All in。All in的意思是把所有的Javascript打包成一个js文件,注意是所有的。也就是说,无论你引入了React、React-Router还是lodash,都要全部打包在一起!那这时候就会产生问题,比如,我只改一个业务逻辑,没有涉及到js包, ...
阅读更多
当你输入URL之后,发生了什么?
当你输入URL之后,发生了什么?首先先说几个概念 http: 超文本传输协议。 TCP/IP协议: 网络通讯协议。 当我们在浏览器输入一个URL的时候,比如:「 http://www.weizongqi.com/a 」,按下回车,等待一小会就会呈现我的网站中的a页面出来。这是怎么来的呢?为什么这个地址可以找到我的网站呢? URL上述我说的URL它是一个地址,相当于每一个人的手机号,通过输入这个 ...
阅读更多
React优化建议
React优化建议无状态组件优化45%无状态组件在渲染的时候产生了声明周期。而我们在定义无状态组件的时候,返回的是一个方法。 const TestComponent = () => ( <div>test</div>) 这时候,我们可以直接引用<TestComponent /> 但,有一种更好的方法就是{TestComponent( ...
阅读更多
scrollHeight、scrollWidth、offsetTop、offsetLeft、clientHeight、clientWidth
scrollHeight、scrollWidth、offsetTop、offsetLeft、clientHeight、clientWidthoffsetTop和offsetLeft表示该元素的左上角与父容器(offsetParent对象)左上角的距离。由于在表格和iframe中,offsetParent对象未必等于父容器,所以上面的函数对于表格和iframe中的元素不适用。 scrollHeigh ...
阅读更多