![](https://img-blog.csdnimg.cn/20201014180756780.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
笔记
小琳同学
爱学习,爱生活,爱工作。前端技术交流可加微信18750090362!!
展开
-
《高性能JavaScript》笔记总结
这本书一共有十个章节 1、加载和执行 2、数据存取 3、DOM编程 4、算法和流程控制 5、字符串和正则表达式 6、快速响应用户界面 7、Ajax 8、编程实践 9、构建并部署高性能JavaScript应用 10、工具 看完这本书的总结: 一、加载和执行 1、脚本是如何下载以及最佳位置? 脚本是串行加载的,一个脚本下载完成执行完之后另外一个脚本才会再进行下载执行。有些高版本的浏览器已经支持脚本的并...原创 2020-02-23 16:32:18 · 189 阅读 · 0 评论 -
如何建设高性能网站--使用外部JavaScript和CSS、精简JavaScript。
JavaScript和CSS是应该包含在外部文件还是内联在页面中?通常使用外部文件更好。 外部文件带来的收益——js和css文件有机会被浏览器缓存起来。HTML文档——至少是那些包含动态内容的HTML文档——通常不会被配置为可以进行缓存。当遇到这种情况,每次下载HTML文档都要下载内联样式和js。再者,既然浏览器缓存了js和css文件,那么就减少了HTTP请求。 评估网站如何能做大最大性能,是要依...原创 2020-01-10 17:08:20 · 297 阅读 · 0 评论 -
js闭包
要理解什么是闭包,首先要先了解什么是变量作用域以及变量的生存周期,那么接下来我们先探讨这两个知识点。 1、变量作用域 变量的作用域就是指变量的有效范围。 例如一种情况:当我们在函数中声明一个变量的时候,如果该变量前面没有带上var关键字,那么这个变量就会成为全局变量。 再则:用var关键字在函数中声明变量,这时候的变量即是局部变量,只有在该函数内部才能访问到这个变量,在函数外部是访问不到的。 va...原创 2019-12-11 22:05:30 · 186 阅读 · 1 评论 -
如何建设高性能网站--使用内容发布网络
性能黄金时间: 只有10%~20%的最终用户响应时间花在下载HTML文档上。其余的80% ~ 90%时间花在了下载页面中的所以组件的上。 如果应用程序Web服务器离用户更近,则一个HTTP请求的响应时间将缩短;另一方面,如果组件web服务器离用户更近,则多个HTTP请求的响应时间将缩短。将Web服务器分散开来------内容发布网络:(CDN)是一组分布在多个不同地理位置的Web服务器,用于更加有...原创 2020-01-06 22:02:59 · 209 阅读 · 0 评论 -
如何建设高性能网站--将样式表放在顶部、将脚本放在底部
关心性能的前端开发人员都希望页面能逐步地加载,也就是说:希望浏览器能够尽快显示内容。那么如何实现浏览器逐步的呈现内容给用户值得思考的问题。 白屏一词是经常听别人吐槽网站的词,那怎么写代码会出现白屏的现象呢? 将CSS放在底部会出现白屏的现象,当将CSS放在底部,那么浏览器要等将CSS先全部下载完成之后再进行呈现,这段等待的时间就出现了白屏。 将样式表放在底部会导致白屏问题的情形: 1、在新窗口中打...原创 2020-01-06 21:50:57 · 351 阅读 · 0 评论 -
如何建设高性能网站--http篇/缓存组件
如果浏览器在其缓存中保留了组件的一个副本,但并不确定它是否仍然有效,就会生成一个get请求。如果确认缓存的副本是有效的,那么就会使用它,这就会得到更小的响应和更快的用户体验。 那么浏览器是如何确定缓存副本的有效性来自其最后的修改时间。基于响应中的Last-Modified头,浏览器就可知道组件的最后修改时间。浏览器会使用If-Modified-Since头将最后修改的时间发送给服务器。 如上的一种...原创 2019-12-31 10:09:09 · 185 阅读 · 0 评论 -
如何建设高性能网站--http篇/压缩组件
http是浏览器和服务器通过Internet进行相互通信的协议,所以想改善前端的性能问题是有必要理解部分HTTP对性能的影响。HTTP是一种客户端/服务器协议,由请求和响应构成。浏览器向一个特定的URL发送HTTP请求,URL对应的宿主服务器发回HTTP响应。请求的类型有GET,POST,HEAD,PUT,DELETE,OPTIONS和TRACE。 当然在我们开发过程当中,最常遇到的就是GET,P...原创 2019-12-29 22:23:29 · 249 阅读 · 1 评论 -
javaScript——组合模式
<script> //组合模式就是用小的对象来构建更大的对象,将对象组成树形结构,以部门-整体的层次结构.组合模式可以通过对象的多态性表现,使得用户对单个对象和组合对象的使用具有一致性 // js实现组合模式的难点在于要保证组合对象和叶对象拥有相同的方法.组合对象和叶对象本质上是有区别的,叶对象下面没有子节点 var closeDoorCommand = { excu...原创 2019-12-25 17:44:18 · 149 阅读 · 0 评论 -
JavaScript——中介者模式
<!-- 中介者模式的作用就是解除对象和对象之间的紧耦合关系,中介者使各个对象之间耦合松散,而且可以独立地改变它们之间的交互 --> <script> // 未使用中介者模式=> 2 个玩家 function Player(name){ this.name=name; this.enemy=null; //敌人 } // 玩...原创 2019-12-25 17:38:50 · 135 阅读 · 0 评论 -
JavaScript设计模式——职责链模式
// 使多个对象都有机会处理请求,从而避免请求的发送者和接受者直接的耦合关系.将对象连成一条链,并沿着这条链传递请求,直到有个对象处理它为止. var order500=function(orderType,pay,stock){ if(orderType===1 && pay===true){ console.log('500元定金,得到100优惠卷'); ...原创 2019-12-25 17:37:58 · 160 阅读 · 0 评论 -
javaScript设计模式——模板方法模式
var Beverage=function(param){ var boilWater=function(){ console.log('把水煮沸') }; var brew=param.brew||function(){ throw new Error('必须传递brew方法') }; var pourIncup =param.pourIncup |...原创 2019-12-25 17:37:14 · 123 阅读 · 0 评论 -
js享元模式
// 享元模式是性能优化的一种模式,核心是运用共享技术来有效支持大量细粒度的对象. // 如果系统中因为创建大量类似的对象而导致内存占用过高,享元模式就非常有用 var Upload=function(uploadType){ this.uploadType=uploadType; } Upload.prototype.delFile= function(id){ up...原创 2019-12-25 17:36:21 · 226 阅读 · 0 评论 -
js命令模式
命令模式中的命令指的是一个执行某些特定事情的指令。命令模式的运用场景是:有时候需要向某些对象发送请求,但并不知道请求的接收者是谁,也不知道请求的具体操作是什么;此时希望将请求和请求的具体操作分来来设计程序。 设计模式提倡把变化的事物和不变的事物分开,所以命令模式也不例外,所以在分析业务的时候,我们要去思考什么是可变的,什么是不可变的。 接下来看一段代码: 这段代码可以很好地解释命令模式到底是如何实...原创 2019-12-24 17:25:46 · 175 阅读 · 0 评论 -
js订阅发布模式
订阅发布模式又称观察者模式,它定义对象间是一种一对多的依赖关系,当一个状态发生改变的时候,所有依赖它的对象都将得到通知。 那么订阅发布模式在项目开发当中有什么用呢? 1、运用于异步编程,我们经常异步编程使用回调函数来解决问题,其实订阅发布模式也可解决异步的问题。 2、可以取代对象之间硬编码的通知机制。一个对象不用再显式的调用另一个对象的接口,订阅发布模式实现了对象和对象之间的松耦合的关系。 再者如...原创 2019-12-23 16:25:17 · 215 阅读 · 0 评论 -
javaScript——迭代器模式
迭代器模式是指提供一种方法顺序访问一个聚合对象中的各个元素,而不需要暴露该对象的内部表示。迭代器模式可以把迭代的过程从业务逻辑当中分离出来,在使用迭代模式之后,即不关心对象的内部构造,也可按顺序访问其中的每个元素。 关键是可以按照顺序访问其每个元素,关键是可以将迭代的过程从业务逻辑当中分离出来。设计模式一书提出单一职责原则。 如下注释掉的代码自动忽略。其实注释掉的代码也是一个知识点,如何拿到循环当...原创 2019-12-19 18:26:31 · 125 阅读 · 0 评论 -
js策略模式
策略模式=>用于多态,将条件分支分开(将各个可能出现的情况分开) 策略模式最重要的是策略对象,还有执行策略对象的上下文。 如下的代码:strategies是策略对象(封装了各种情况);calculateBonus是Context(执行的上下文);并没有计算的能力,而是把这个职责委托给了某个策略对象,每个策略对象负责的算法已经封装在对象的内部了. var strategies={ "S"...原创 2019-12-19 11:28:23 · 218 阅读 · 0 评论 -
js代理模式
代理模式是为了一个对象提供一个代用品或占位符,以便控制对它的访问。代理模式的运用实则对前端的性能优化也提供了很大的帮助。 我对代理模式的理解就是: 客户=》代理=》本体 关键就是:当客户不方便直接访问一个对象或者不满足需要的时候提供一个替身对象来控制对这个对象的访问,客户实际上访问的是替身对象。 我所理解的客户在编程当中就是要请求一些事,那么什么事本体函数不方便直接处理,而是需要代理函数?实则什么...原创 2019-12-19 11:14:33 · 315 阅读 · 0 评论 -
js单例模式
了解设计模式,对前端的性能优化还是有价值的。如果懂得如何巧妙的使用那就更棒啦~~今天来介绍什么是单例模式。 单例模式:保证一个类仅有一个实例,并提供一个访问它的全局访问点。 单例模式–1、对象字面量创建的对象;使用命名空间创建实例。 单例模式–2、使用闭包封装私有变量;这种方式把变量封装到闭包的内部,只暴露一些接口跟外界通信。 在一个项目当中全局变量太多其实是不好的,因为会造成变量名冲突,你还得绞...原创 2019-12-18 14:47:39 · 268 阅读 · 0 评论