SweetaMily

Live And Alive


  • 首页

  • 标签

  • 分类

  • 归档

  • 日程表

  • 站点地图

  • 搜索

前端性能优化——重绘和回流

发表于 2019-03-09
字数统计: 1.4k字 | 阅读时长 ≈ 4分钟
一、为什么CSS加载性能会让JavaScript变慢?​ 在浏览器中,UI渲染和JavaScript的解析实际上是放在两个不同的线程里面进行的,也就是UI的渲染会对应一个线程进行,同时JavaScript的解析会在另一个线程中进行。既然是在两个不同的线程中进行,为什么我们还会说CS加载会影响JavaScript的解析呢?实际上在我们的浏览器中,UI渲染和JavaScript的解析这两个进程之间是一种互斥的关系。这是因为在实际的整个页面渲染和解析中,如果我们的这两个进程同时在进行,可能会使得JavaScript在进行解析的时候,由于DOM并没有完全构建出来,导致js的解析效果并不会像我们预 ...
阅读全文 »

Vue的简单实现和解读

发表于 2019-02-17
字数统计: 2.7k字 | 阅读时长 ≈ 10分钟
一、Compile类的实现​ 首先vue的一些属性和代码并不是JavaScript原生具有的,所以我们需要对相关的内容进行编译,对虚拟节点进行编译。首先新建一个index.html的文件作为我们的入口里面有这些元素: 12345678910111213141516171819<body> <div id="app"> <input type="text" v-model="message.a"/> <div>{{message.a}}</div> ...
阅读全文 »

js函数式编程——柯里化函数

发表于 2019-01-29
字数统计: 838字 | 阅读时长 ≈ 3分钟
一、相关回顾1、.length的用法​ 函数中我们可以使用函数名.length来查询函数的参数的个数,这个属性的值永远不会改变,并且总是匹配函数声明参数的数量。 1234function test(a,b,c){ console.log(test.length) //3}test(1,2,3) 2.函数的arguments​ 在函数域内都有一个arguments 变量来访问传递给函数的所有参数。这是一个类数组,类数组有数组的length用法,并且可以用下标的索引方式来访问每个元素。和数组不同的是,他的类型是Object,并且不能调用数组的类似pop()之类 ...
阅读全文 »

js函数式编程——map、reduce和filter的函数式用法

发表于 2019-01-28
字数统计: 0字 | 阅读时长 ≈ 1分钟
阅读全文 »

js设计模式——命令模式

发表于 2019-01-22
字数统计: 1.7k字 | 阅读时长 ≈ 7分钟
一、应用场景​ 命令模式主要用于这样的场景:假设我们有时候需要向一些对象发送请求,但是并不知道请求的接收者是谁,也不知道被请求的操作是什么。这时候我们就需要采用一种吗松耦合的方式来设计。既能够简历请求者与接收者之间的关系又能消除彼此之间的耦合。 ​ 比如在下面的示例场景中,我们有几个button,假设现在在一个大型的项目中,我们有程序员在设计和布局按钮,同时又有另外的程序员来设计这些按钮的功能。在这个场景中,负责布局的程序员并不知道之后这些按钮具体会是什么样的功能。那么他应该怎样来设计这个按钮的功能来更好的和负责设计按钮功能的程序员进行很好的对接呢?这时候就需要用到我们的命令模式。 ...
阅读全文 »

js事件循环

发表于 2018-12-08 | 分类于 web基础知识
字数统计: 1.5k字 | 阅读时长 ≈ 5分钟
​ JavaScript异步编程这块儿我的路线是,先看到settimeout的在for循环里面的神奇执行结果,之后学到node开始逐渐了解到有js异步编程这么一说,就了解到了JavaScript语言和其他编程语言在处理异步问题的时候不同寻常的套路,然后就开始研究一点解决这种异步问题的办法——Promise,async,await和生成器这些用法。当然,最终的归宿就在js事件循环这块。趁着给工作室做一次分享会的时候,我也比较详细的去了解了下js事件循环相关的知识。总结成了这篇博客。很多东西都是我通过结合一些个人认为比较好的博客写的,同时融入了自己的代码事件。生命在于折腾~~,哈哈。现在进入 ...
阅读全文 »

再谈web缓存

发表于 2018-12-08 | 分类于 Web性能
字数统计: 1.5k字 | 阅读时长 ≈ 5分钟
缓存类型​ web缓存主要分为服务端侧的缓存(如Nginx和Apache)和客户端的缓存(浏览器)。 ​ 这里我们主要讨论的是浏览器缓存,其主要分为强缓存和协议缓存两个类: 强缓存:浏览器在加载资源的时候,会首先根据http header来判断这个请求是否命中自己的缓存,如果可以命中,就直接从自己的缓存中读取这个资源,而不会再向服务器发送请求。 协议缓存:如果强缓存没有命中的时候,浏览器就会发送一个请求到服务器上,此时服务器就会听过判断http header来判断这个请求是否命中协议缓存。如果命中,浏览器就会将这个请求返回(返回码304),这里不会返回请求的资源,而是告诉浏览器 ...
阅读全文 »

浅谈web安全

发表于 2018-12-04
字数统计: 3.9k字 | 阅读时长 ≈ 13分钟
一、同源策略同源策略的简介​ 同源策略是web浏览器最基本也是最核心的安全机制,所谓同源策略,就是指浏览器限制了来自不同源的“document”或者脚本,对当前”document“的读取或是修改。这个策略对于web安全是很重要的,可以想象下,如果一个test.com可以在test2.com没有加载的情况下,随意读取或是修改其内容,会发生极大的安全隐患。因此,这一策略对于web安全而言是及其重要的。 ​ 对javascript而言,同源的判定通常由以下几种情况(以http://www.baidu.com为例): URL RESULT REASON http://www ...
阅读全文 »

设计模式之策略模式

发表于 2018-11-26 | 分类于 javascript设计模式
字数统计: 1.1k字 | 阅读时长 ≈ 4分钟
一、策略模式的定义和初步使用1.引入​ 策略模式的定义是:“定义一系列的算法,把他们封装起来,并实现可以相互替换”。也就是说我们实现一个功能可能有多种算法,我们一般会根据不同的场景去选择不同的算法。这个定义说的并不是很清楚,我们可以根据下面的例子来说明这个模式。 ​ 比如我们现在要实现不同员工根据他们平时业绩表现来决定他们的薪水情况,常规的情况下我们会写出下面的算法: 123456789101112function calculate(level,salery){ if(level == 'S'){ salery = salery * 4; ...
阅读全文 »

js原型和原型链

发表于 2018-11-26 | 分类于 js基础知识
字数统计: 2k字 | 阅读时长 ≈ 7分钟
对原型的引入​ 在每一个JavaScript对象里都会内置一个特殊的属性[[Prototype]],这个属性在几乎所有对象创建的时候都会被赋予一个非空值。假设我们开始创建了这样的一个对象: 1234var obj = { name:'liming'}console.log(obj.name) ​ 但是如果在obj中没有name这样的一个属性,很明显我们就无法访问这个了。如果还有需要,就要引入原型链。比如下面的这个例子: 12345var obj = { name:'liming'}var obj1 = Object.create(o ...
阅读全文 »
123
HaoChen

HaoChen

28 日志
8 分类
3 标签
GitHub
Links
  • Github
© 2019 HaoChen

best for best!

百度 |
0%