- 博客(20)
- 收藏
- 关注
RSS订阅转载 详解 Diff 算法以及循环要加 key 值问题
上一篇文章我简述了什么是 Virtual DOM，这一章我会详细讲 Diff 算法以及为什么在 React 和 Vue 中循环都需要 key 值。什么是 DOM Diff 算法Web 界面其实就是一个 DOM 树的结构，当其中某个部分发生变化的时候，实质上就是对应的某个 DOM 节点发生了变化。而在 React/Vue 中，都采用了 Virtual DOM 来模拟真实的树结构，他们都...
2019-08-03 22:27:00
369
转载 性能优化之关于像素管道及优化（二）
像素管道，这个和我们写代码息息相关的东西，我估计很多人都不太清楚它是个什么，网上也有几篇文章关于它的内容，但是不是那么尽如人意，那么我就详细说说这个东西，以及如何优化它。关于动画加载与人们的反应一个流畅的动画关乎用户体验(留存)延迟用户反应0 - 16 毫秒大部智能设备的刷新率都是 60HZ，也就是每帧 16 毫秒（包括浏览器将新帧绘制到屏幕上所需的时间），...
2019-07-30 15:32:00
365
转载 聊聊关于性能优化和其他（一）
聊聊关于性能优化（一）隔了许久都没有更新博客，前一阵子是因为忙其他事去了，现在想写点什么，但是思前想后不知道该写些什么，这是这个系列的第一篇，这篇文章没有干货，只是聊聊关于前端优化，关于5G的到来，关于前端的未来。关于为什么要优化前端的大咖们在推动前端届蓬勃发展的同时，越来越多的人能抄起手上的工具（ React、Vue、Angular ）加上各种 CLI 一键生成， 再加上天然...
2019-05-16 15:32:00
211
转载 JavaScript 事件循环及异步原理（完全指北）
引言最近面试被问到，JS 既然是单线程的，为什么可以执行异步操作？当时脑子蒙了，思维一直被困在 单线程 这个问题上，一直在思考单线程为什么可以额外运行任务，其实在我很早以前写的博客里面有写相关的内容，只不过时间太长给忘了，所以要经常温习啊：（浅谈 Generator 和 Promise 的原理及实现）JS 是单线程的，只有一个主线程函数内的代码从上到下顺序执行，遇到被调用...
2018-10-13 16:36:00
166
转载 Web安全系列（四）：XSS 的防御
简介XSS 的防御很复杂，并不是一套防御机制就能就解决的问题，它需要具体业务具体实现。目前来说，流行的浏览器内都内置了一些 XSS 过滤器，但是这只能防御一部分常见的 XSS，而对于网站来说，也应该一直寻求优秀的解决方案，保护网站及用户的安全，我将阐述一下网站在设计上该如何避免 XSS 的攻击。HttpOnlyHttpOnly 最早是由微软提出，并在 IE 6 中实现的，至今...
2018-09-27 17:12:00
193
转载 SPA路由机制详解（看不懂不要钱~~）
前言总所周知，随着前端应用的业务功能起来越复杂，用户对于使用体验的要求越来越高，单面（SPA）成为前端应用的主流形式。而大型单页应用最显著特点之一就是采用的前端路由跳转子页面系统，通过改变页面的URL，在不重新请求页面的情况下，更新页面视图。更新视图但是浏览器不重新渲染整个页面，只是重新渲染部分子页面，加载速度快，页面反应灵活，这是 SPA 的优势，这也是前端路由原理的核心，这会...
2018-09-21 15:14:00
574
转载 Web安全系列（三）：XSS 攻击进阶（挖掘漏洞）
前言在前些章节 （web安全系列（一）：XSS 攻击基础及原理）以及（Web安全系列（二）：XSS 攻击进阶（初探 XSS Payload））中，我详细介绍了 XSS 形成的原理以及 XSS 攻击的分类，并且编写了一个小栗子来展示出 XSS Payload 的危害。目前来说，XSS 的漏洞类型主要分为三类：反射型、存储型、DOM型，在本篇文章当中会以permeate生态测试系统为例，...
2018-09-18 09:53:00
138
转载 Web安全系列（二）：XSS 攻击进阶（初探 XSS Payload）
什么是 XSS Payload上一章我谈到了 XSS 攻击的几种分类以及形成的攻击的原理，并举了一些浅显的例子，接下来，我就阐述什么叫做 XSS Payload 以及从攻击者的角度来初探 XSS 攻击的威力。在黑客 XSS 攻击成功之后，攻击者能够对用户当前浏览的页面植入各种恶意脚本，通过恶意脚本来控制浏览器，这些脚本实质上就是 JavaScript 脚本（或者是其他浏览器可以运行的...
2018-09-13 00:10:00
127
转载 web安全系列（一）：XSS 攻击基础及原理
跨站脚本攻击（XSS）是客户端脚本安全的头号大敌。本文章深入探讨 XSS 攻击原理，下一章（XSS 攻击进阶）将深入讨论 XSS 进阶攻击方式。本系列将持续更新。XSS 简介XSS（Cross Site Script），全称跨站脚本攻击，为了与 CSS（Cascading Style Sheet） 有所区别，所以在安全领域称为 XSS。XSS 攻击，通常指黑客通过 HTML 注入...
2018-09-12 08:49:00
121
转载 浅谈Generator和Promise原理及实现
Generator熟悉ES6语法的同学们肯定对Generator（生成器）函数不陌生，这是一个化异步为同步的利器。栗子：function* abc() { let count = 0; while(true) { let msg = yield ++count; console.log(msg); }}let iter ...
2018-01-16 23:00:00
317
转载 ES6使用箭头函数注意点
新事物也是有两面性的，箭头函数有他的便捷有他的优点，但是他也有缺点，他的优点是代码简洁，this提前定义，但他的缺点也是这些，比如代码太过简洁，导致不好阅读，this提前定义，导致无法使用JS进行一些ES5里面看起来非常正常的操作。本质来说箭头函数没有自己的this，它的this是派生而来的，根据“词法作用域”派生而来。由于箭头函数在调用时不会生成自身作用域下的this和argume...
2017-11-12 23:01:00
147
转载 ES6常用语法总结
let、const关键字在 ES6 之前，JavaScript 中变量默认是全局性的，只存在函数级作用域，声明函数曾经是创造作用域的唯一方法。这点和其他编程语言存在差异，其他语言大多数都存在块级作用域。所以在 ES6 中，新提出的 let 和 const 关键字使这个缺陷得到了修复。if (true) { let a = 'name';}console.log(a); /...
2017-11-12 02:20:00
102
转载 手写AngularJS脏检查机制
什么是脏检查View -> Model浏览器提供有User Event触发事件的API，例如，click，change等Model -> View浏览器没有数据监测API。AngularJS 提供了 $apply()，$digest()，$watch()。其他数据双向绑定介绍VUE{{}} Object.defineProperty() 中使用 setter ...
2017-10-31 22:52:00
135
转载 数据校验插件开发
在看完了《JavaScript插件编写指南》之后，最激动人心的时刻到了！我们着手开始做一个数据校验插件吧！首先，我们先初始化一个HTML用来作为校验的数据来源<body> <div> <form> <div> <label for="exampleIn...
2017-10-31 22:49:00
145
转载 JavaScript插件编写指南
在编写插件之前，大家要先了解做插件的几个要点：插件需要满足的条件一个可复用的插件需要满足以下条件：插件自身的作用域与用户当前的作用域相互独立，也就是插件内部的私有变量不能影响使用者的环境变量；插件需具备默认设置参数；插件除了具备已实现的基本功能外，需提供部分API，使用者可以通过该API修改插件功能的默认参数，从而实现用户自定义插件效果；插件需提供监听入口，及针对指定元素进...
2017-10-31 22:46:00
166
转载 JavaScript 工厂模式和订阅模式
设计模式的好处：代码规范// 例如表单验证，两个 input ，一个用户名，一个密码// 通常做法是function checkUser(){ //.....}function checkPassword(){ //.....}// 问题：// 这是两个全局对象，而这两个方法属于一个表单的验证// 所以这应该是一个表单对象，起码应该这么写// ...
2017-10-31 22:45:00
83
转载 从码农到设计者，从单例模式入手设计代码
首先先复习一下内存var str1 = "abc";var str2 = "abc";console.log(str1 == str2)console.log(str1 === str2)// 上面的代码实际上是执行了这个操作// var str = String("abc")// 那么如果var str1 = String("abc");var str2 = new ...
2017-10-31 22:44:00
86
转载 Ajax 跨域难题 - 原生 JS 和 jQuery 的实现对比
讲解顺序：AJAX 的概念及由来JS 和 jQuery 中的 ajax浏览器机制AJAX 跨域AJAX 的概念在讲解 AJAX 的概念之前，我先提一个问题。这是一个典型的 B/S 模式。PS. B/S结构（Browser/Server，浏览器/服务器模式），是WEB兴起后的一种网络结构模式，WEB浏览器是客户端最主要的应用软件。这种模式统一了客户端，将系统...
2017-10-31 22:42:00
101
转载 手写JQuery 的框架的实现
JQuery的好处快速上手（学习成本低）开发效率高（选择器、批量操作 DOM、链型操作……）一系列的封装（动画、ajax）浏览器兼容（1.x版本 兼容IE6、7、8）JQuery 1.11.3.js（1.x经典版本）性能不好（源代码文件略大）JQuery 2.2.4（2.x经典版本）性能略好（源代码文件略小）不是 HTML5 的实现2.x版本对于1.x版...
2017-10-31 22:41:00
232
转载 JavaScript 内存机制
简介每种编程语言都有它的内存管理机制，比如简单的C有低级的内存管理基元，像malloc(),free()。同样我们在学习JavaScript的时候，很有必要了解JavaScript的内存管理机制。JavaScript的内存管理机制是:内存基元在变量（对象，字符串等等）创建时分配，然后在他们不再被使用时“自动”释放。后者被称为垃圾回收。这个“自动”是混淆并给JavaScript（和其他...
2017-10-31 22:39:00
161
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人