2018年06月_songshuzhong

转载 css与 js动画优缺点比较

我们经常面临一个抉择：到底使用JavaScript还是CSS动画，下面做一下对比JS动画缺点：(1)JavaScript在浏览器的主线程中运行，而主线程中还有其它需要运行的JavaScript脚本、样式计算、布局、绘制任务等,对其干扰导致线程可能出现阻塞，从而造成丢帧的情况。 (2)代码的复杂度高于CSS动画优点：(1)JavaScript动画控制能力很强, 可以在动画播放过程中对动...

2018-06-25 19:37:42 718

想必大家都知道，JavaScrip是全栈开发语言，浏览器，手机，服务器端都可以看到JS的身影。本文会分享一些高效的JavaScript的最佳实践，提高大家对JS的底层和实现原理的理解。数据存储计算机学科中有一个经典问题是通过改变数据存储的位置来获得最佳的读写性能，在JavaScript中，数据存储的位置会对代码性能产生重大影响。 – 能使用{}创建对象就不要使用new Object，能使用[]创...

2018-06-25 19:36:27 160

转载为什么说对象字面量赋值比new Object()高效？

虽然平时都是以对象字面量来初始化js变量的，即 var obj={}; 也没有去具体去纠结为什么这样就比 var obj=new Object(); 来的好就直接在chrome上做了个对比试验，结果如下：网上别人的解释，个人觉得能理解的：{}是字面量，可以立即求值，而new Object()本质上是方法（只不过这个方法是内置的）调用，既然是方法调用，就涉及到在proto链中遍历该方法，当找到该方法...

2018-06-25 19:30:53 403

原创 React组件挂载优化

做惯了react的首屏加载优化、代码结构优化、dom diff优化，却很少从react组件挂载做切入点动些邪念，嘻嘻嘻。。。。所以今天被问及这个问题时，回答的就有点隔靴搔痒，没能直击面试官的G点。。。。当时我答定义一个isMounted变量来判断组件的运行状态。。。。当然能解决问题，但不是最优解。。。。回来后翻阅资料，发现有高手封装了cancelableFetch工具来处理异步请求。。。。我猜想作...

2018-06-23 17:07:42 740

转载彻底理解js中this的指向，不必硬背。

首先必须要说的是，this的指向在函数定义的时候是确定不了的，只有函数执行的时候才能确定this到底指向谁，实际上this的最终指向的是那个调用它的对象（这句话有些问题，后面会解释为什么会有问题，虽然网上大部分的文章都是这样说的，虽然在很多情况下那样去理解不会出什么问题，但是实际上那样理解是不准确的，所以在你理解this的时候会有种琢磨不透的感觉），那么接下来我会深入的探讨这个问题。　　为什么要学...

2018-06-21 06:50:34 143

转载 Web安全之点击劫持（ClickJacking）

点击劫持（ClickJacking）是一种视觉上的欺骗手段。大概有两种方式，一是攻击者使用一个透明的iframe，覆盖在一个网页上，然后诱使用户在该页面上进行操作，此时用户将在不知情的情况下点击透明的iframe页面；二是攻击者使用一张图片覆盖在网页，遮挡网页原有位置的含义；iframe覆盖直接示例说明1. 假如我们在百度有个贴吧，想偷偷让别人关注它。于是我们准备一个页面：<!DOCTYPE...

2018-06-19 09:22:38 875

转载 Codemirror 常用API

一、触发事件1.onChange(instance,changeObj)：codeMirror文本被修改后触发。instance是一个当前的codemirror对象，changeObj是一个｛from，to，text[,removed][，origin]｝对象。其中from，to分别表示起始行对象和结束行对象，行对象包括ch：改变位置距离行头的间隔字符，line：改变的行数。text是一个字符串数...

2018-06-13 14:15:30 6429

转载理解react16.3的fiber架构

一.目标Fiber是对React核心算法的重构，2年重构的产物就是Fiber reconciler核心目标：扩大其适用性，包括动画，布局和手势。分为5个具体目标（后2个算送的）：把可中断的工作拆分成小任务对正在做的工作调整优先次序、重做、复用上次（做了一半的）成果在父子任务之间从容切换（yield back and forth），以支持React执行过程中的布局刷新支持render()返回多个元素...

2018-06-10 17:07:33 8310

转载 JS模块规范

commonJS特点：1、模块可以多次加载，但是只会在第一次加载时运行一次，然后运行结果就被缓存了，以后再加载，就直接读取缓存结果。要想让模块再次运行，必须清除缓存。2、模块加载会阻塞接下来代码的执行，需要等到模块加载完成才能继续执行——同步加载。环境：服务器环境应用：nodejs的模块规范是参照commonJS实现的。语法：1、导入：require('路径')2、导出：module.export...

2018-06-10 09:44:50 533

转载彻底弄懂HTTP缓存机制及原理

前言Http 缓存机制作为 web 性能优化的重要手段，对于从事 Web 开发的同学们来说，应该是知识体系库中的一个基础环节，同时对于有志成为前端架构师的同学来说是必备的知识技能。但是对于很多前端同学来说，仅仅只是知道浏览器会对请求的静态文件进行缓存，但是为什么被缓存，缓存是怎样生效的，却并不是很清楚。在此，我会尝试用简单明了的文字，像大家系统的介绍HTTP缓存机制，期望对各位正确的理解前端缓存有...

2018-06-10 08:48:04 237

原创浏览器加载、解析、渲染的过程

为什么要了解浏览器加载、解析、渲染这个过程？好，我们先说一下，为什么要了解这些呢？如果想写出一个最佳实践的页面，就要好好了解。了解浏览器如何进行加载，可以在引用外部样式文件，外部js时，将他们放到合适的位置，使浏览器以最快的速度将文件加载完毕。了解浏览器如何进行解析，可以在构建DOM结构，组织css选择器时，选择最优的写法，提高浏览器的解析速率。了解浏览器如何进行渲染，明白渲染的过程，在设置元素属...

2018-06-07 12:13:20 130

转载 JavaScript 垃圾回收

avaScript垃圾回收的机制很简单：找出不再使用的变量，然后释放掉其占用的内存，但是这个过程不是时时的，因为其开销比较大，所以垃圾回收器会按照固定的时间间隔周期性的执行。变量生命周期不再使用的变量也就是生命周期结束的变量，当然只可能是局部变量，全局变量的生命周期直至浏览器卸载页面才会结束。局部变量只在函数的执行过程中存在，而在这个过程中会为局部变量在栈或堆上分配相应的空间，以存储它们的值，然后...

2018-06-07 11:40:26 343

原创 js事件委托处理dom

事件委托就是根据事件冒泡原理，用父级来触发子级的事件。利用事件委托可以解决多个兄弟节点绑定问题，动态创建的html事件绑定问题等。一、多个兄弟节点事件绑定例如，给ul下的li添加事件：<ul id="wrap"> <li>item1</li> <li>item2</li></ul>$(function(){ //普通

2018-06-01 10:52:42 279

songshuzhong的博客