前端优化,有两个意义:1.为了让用户在浏览网页时获得更好的体验 2.降低服务器端的访问压力,节省网络流量. 除了换个好主机连上个千兆网这样的硬件问题,优化部分的实现方式目前也大致两种,一种是页面级别的优化,通过合并请求文件.设置资源缓存.压缩请求文件大小等方式来降低HTTP请求次数和请求资源大小,来提高整个网页加载速度,以便于更快的呈现.第二种就是代码级别的优化,通过html .css.js代码的合理优化,减少在页面渲染过程.动画过程中产生的阻塞.卡顿,优化前端的用户体验. Js代码对页面的渲染…
零.组织结构 根据引言,作者将全书划分为四个部分: 一.页面加载js的最佳方式(开发前准备) 二.改善js代码的编程技巧(开发中) 三.构建与部署(发布) 四.发布后性能检测与问题追踪(线上问题优化) 这样的组织结构也符合我们的开发习惯,首先进入第一部分. 一.JavaScript加载 起因:script脚本的加载会阻塞浏览器渲染页面和处理用户交互,如果加载的script脚本太多太大,就会长时间阻塞,造成页面假死. 解决方案: 1.脚本位置 放在底部. 放在底部可以保证页面主体结构已经基本加载完…
高性能的JavaScript 一.      加载和运行 将脚本放在底部 脚本下载解析执行时,页面已经加载完成并显示在用户面前 成组脚本 减少外部脚本文件数量,整合成一个文件 延迟脚本 动态脚本元素 非阻塞方式 XMLHttpRequest var xhr = new XMLHttpRequest(); xhr.open("get", "file.js", true); xhr.onreadystatechange = function() { if(xhr.rea…
执行环境及作用域 执行环境(execution context,为简单起见,有时也称为“环境”)是JavaScript 中最为重要的一个概念.执行环境定义了变量或函数有权访问的其他数据,决定了它们各自的行为.每个执行环境都有一个与之关联的变量对象(variable object),环境中定义的所有变量和函数都保存在这个对象中.虽然我们编写的代码无法访问这个对象,但解析器在处理数据时会在后台使用它.全局执行环境是最外围的一个执行环境.根据ECMAScript 实现所在的宿主环境不同,表示执行环境的…
1.ECMAScript数据类型分为:基本类型值和引用类型值: ECMAScript中所有函数的参数都是按值传递的: 检查对象的类型:varible instanceof constructor Alert(person instanceof Object); 2.  执行环境和变量 每个执行环境都有一个与之关联的变量对象,环境中定义的所有变量和函数都保存在这个对象中: 全局执行环境是最外围的一个指定环境,在web浏览器中,全局执行环境是window对象,所有的全局变量和函数都是window对象…
参考 高性能javascript Tom大叔深入理解javascript系列 相关概念 1.执行上下文   当控制器转到ecmascript可执行代码的时候,就会进入一个执行上下文,执行上下文是以堆栈的方式进行管理的,也就是最底层是全局的上下文,最顶层是当前的执行上下文,每当进入function(包括递归调用)或者eval,都会产生执行上下文压入堆栈,随着函数或者eval的结束,对应的执行上下文被弹出.每当遇到return语句的时候就会推出当前的执行上下文,代码执行完毕后,管理执行上下文的堆栈只…
这篇笔记的内容主要涉及js的脚本位置,如何加载js脚本和脚本文件执行的问题,按照自己的理解结合高性能JavaScript整理出来的 javascript是解释性代码,解释性代码需要经历转化成计算机指令的过程,这个过程就会带来一定的性能损耗,所以在js中做性能的优化是必须的 javascript的阻塞特性:浏览器在执行js代码的时候,不能做其他的任何事情,因为浏览器使用单一的进程来处理用户界面的刷新和javascript的脚本执行,也就是说什么时候执行js脚本影响着用户对页面的使用体验(之所以js…
参考 高性能javascript javascript高级程序设计 ajax基础  ajax技术的核心是XMLHttpRequest对象(XHR),通过XHR我们就可以实现无需刷新页面就能从服务器端读取数据 var xhr = new XMLHttpRequest(); //只支持IE7以及更高的版本 xhr.onreadystatechange = function() { if(xhr.readyState == 4) { if( (xhr.status >= 200 && xh…
参考高性能javascript 理解浏览器UI线程  用于执行javascript和更新用户界面的进程通常被称为浏览器UI线程  UI线程的工作机制可以理解为一个简单的队列系统,队列中的任务按顺序执行 <button onclick="handleClick()">click</button> <script type="text/javascript"> function handleClick() { var div = do…
参考高性能javascript for in 循环  使用它可以遍历对象的属性名,但是每次的操作都会搜索实例或者原型的属性 导致使用for in 进行遍历会产生更多的开销 书中提到不要使用for in 遍历数组 1 首先for in 会查找原型链上的属性 var arr = [1,2,3]; Array.prototype.a = "test"; for(var i in arr) { console.log(i); console.log(typeof i); }//在这里例子中会发…
参考 高性能javascript 文档对象模型(DOM)是独立于语言的,用于操作XML和HTML文档的程序接口API,在浏览器中主要通过DOM提供的API与HTML进行交互,浏览器通常会把DOM和javascript独立实现,这意味着当我们通过javascript操作DOM的时候势必的产生性能上的开销,因此提升页面性能的的思路是尽可能的减少DOM操作或者优化DOM操作 DOM的访问与修改 (1)减少频繁的读取DOM元素 (1)for(var i = 0;i < 10;i++) { documen…
近几天看了一本不错的 JavaScript 的书,是 Kyle Simpson 写的 <You Don't know JS>.这本书是 Kyle Simpson 在 Github 上的开源项目,截止到现在已经有 27,796 个 star .本想看英文版本,不料在某东上看到了中文版,于是乎就买下了.结果,翻译得还不错,推荐. 原著github地址 ,某东链接自行搜索呵呵. 这本书属于JavaScript开发者的进阶读物,原著至今为止已经出了6本,中文版(上卷)涵盖了其中的两本,介绍了4个知识点…
由于自己在对数组操作这块比较薄弱,然后经高人指点,需要好好的攻读一下这本书籍,原本想这个书名就比较高深,这下不好玩了.不过看着看着突然觉得讲的东西都比较基础.不过很多东西,平时还是没有注意到,故写出读书笔记和诸君共勉! 第二张 2.2.1 创建一个数组 创建数组的方式有?那种比较高效?原因是? 第一种模式 var nums = []; var numbers = [1,2,3,4,5];console.log(numbers.length)//5 第二种模式 var nums = new Arr…
在前一篇文章中,我们把作用域定义为"管理.维护变量的一套规则",接下来是时候来深入讨论一下Js的作用域问题了,首先我们要知道作用域一般有两种主要的工作类型,一种是词法作用域,一种是动态作用域, Javascript采用的是词法作用域, 关于动态作用域的有兴趣的可以自行Google. 1.词法阶段 首先我们要理解"词法阶段"这个词语,我们已经了解到Js存在一个编译阶段,编译阶段的第一步就是分词/词法分析,我们可以简称为"词法阶段" 简单来说,词法作…
名词 引擎:从头到尾负责整个 JavaScript 程序的 编译 及 执行 过程. 编译器:负责 语法分析 及 代码生成. 作用域:负责收集并维护由所有声明的标识符(变量)组成的一系列查询,并实施一套非常严格的规则,确定当前执行的代码对这些标识符的访问权限. LHS:赋值操作的左侧(理解为赋值操作的目标是谁,LHS 查询 试图找到变量的容器本身,并对其 赋值 ). RHS:赋值操作的右侧(理解为谁是赋值操作的源头,RHS 查询 就是 查找 某个变量的值). JavaScript 的编译 Java…
加载和运行 管理浏览器中的javascript代码是个棘手的问题,因为代码运行阻塞了其他浏览器处理过程,诸如用户绘制,每次遇到<script>标签,页面必须停下来等待代码下载(如果是外部的)并执行,然后再继续处理页面其他部分.但是,有几种方法可以减少javascript对性能的影响: 将所有<script>标签放置在页面的底部,紧靠body关闭标签</body>的上方,此法可以保证在脚本运行之前完成解析. 将脚本成组打包.页面的<script>标签越少,页面…
第一章加载与执行:1,js脚本会阻塞页面渲染,<script>尽可能放到<body>标签的底部2, 合并脚本,页面中的<script>标签越少:HTTP请求带来的额外开销方面,减少页面外链脚本文件的数量将会改善性能3,css文件是并行下载,不会阻塞页面的其他进程 无阻塞脚本:1,延迟脚本:使用<script>的defer属性(仅适用于IE4+和Firefox3.5以上版本)2,动态创建<script>来下载并执行代码3,适用XHR对象下载js代码…
1. UI Thread 和 UI Queue,中文叫 UI 线程和UI 队列,JavaScript 和  UI 更新共享的进程通常被称为浏览器UI进程. 2. 如果用户企图在任务运行时于页面交互,不仅没有即时的UI更新,而且不会有新的UI更新任务被创建和加入队列. 3. 一个单一的Javascript操作应当使用的总时间(最大)是100毫秒. 4. 当下面的例子中的按钮被点击时,它触发UI线程创建两个任务并添加到队列中.第一个任务是按钮的UI它需要改变外观以指示出它被按下了,第二个任务是Jav…
概述 这是我看<你不知道的JavaScript(中卷)>中关于类型检查的笔记,供以后开发时参考,相信对其他人也有用. typeof 我们知道js中有七种内置类型:undefined, null, string, boolean, object, number, symbol. 我们分别用typeof对它们一一进行检查: typeof void(0) //输出'undefined' typeof null //输出'object' typeof 'haha' //输出'string' typeo…
1.Array类型 ECMAScript数组的每一项可以保存任何类型的数据,数组的大小也可以动态调整: (1) 创建数组 第一种方式:Array构造函数 var colors=new Array(); var colors1=new Array(20); var colors2=new Array("rad","blue","green"); var colors3=Array(3); var colors4=Array("Greg&q…
一 执行环境(环境) 1.每个执行环境都有一个关联的全局变量对象.例如:web浏览器中,window对象为全局变量对象.环境中定义的所有变量和函数都保存在该对象中.全局执行环境是最外围的环境. 2.执行环境分为:全局执行环境.函数执行环境 3.作用域链.作用域链是对象所在作用域中的所有对象的集合,被称为作用域链.每个对象都有一个内部属性[scope],保存的是它的作用域链. 4.对象内部属性只有解释器可以访问,代码无法访问到. 5.作用域链的最前端始终是当前执行的代码所在环境的变量对象. 6.执…
1.  严格模式:在javascript中定义了一种不同的解析与执行模型.在严格模式下,一些不确定的行为将得到处理,对某些不安全的操作也会抛出错误. 用法是在脚本中添加:”use strict”; 这是一个编译指示,用于告诉引擎切换到严格模式: 2.  Javascript中的语句,若没有带分号,由解析器确定语句的结尾,但不推荐这么做: Javascript关键字: break,case,catch,continue,debugger*,default,delete,do,else,finall…
从今天开启每天看书记笔记模式,<JavaScript高级程序设计(第3版)> 1. Javascript最初是为了解决输入验证器的问题,现在已经发展成一门复杂的语言: 2.  语言标准为ECMAScript(ek-ma-script),一个完整的Javascript有三部分组成: 核心(ECMAScript).文档对象模型(DOM).浏览器对象模型(BOM) (1)       ECMAScript规定了Javascript语言的组成部分:语法.类型.语句.关键字.保留字.操作符.对象: EC…
自动类型转换 在JavaScript中,使用 == .=== 和 - 等运算符能够使得类型自动转换. 关于不同类型的值的比较 flase == 0; //true "" == flase; //true "1" == 1; //true "0" == false; //true null == false; //flase undefined == false; //false undefined == null; //true null ==…
1.undefined,null,0,""  这四个值转换为逻辑值时是false,其他无论简单类型值,对象或者函数转换过来都是true 2.如图 第一个是“声明了一个变量,给变量赋值(赋的是一个函数),然后又更改了变量的值(同样也是因为变量是以值保存,而不是对象那种以引用保存的方式) 第二个是”声明了一个函数,定义里里面的规则,然后把这个名字的函数又声明了一遍,定义了不同的规则“ 造成第二个alert成这样的原因是,一段程序执行的时候,会先把定义语句抓出来先执行,完了才去执行其他代码,…
第1章 MySQL架构 MySQL架构与其他数据库服务器大不相同,这使它能够适应广泛的应用.MySQL足够灵活,能适应高要求架构.例如Web应用,同时还适用于嵌入式应用.数据仓库.内容索引和分发软件.高可用的冗余系统.联机事务处理系统OLTP及很多其他应用类型. 为了充分发挥MySQL的性能,顺畅地使用它,就必须理解它的设计.MySQL的灵活性体现在很多方面,它可以再众多硬件平台上良好的配置和运行,还支持多种数据类型.不过MySQL最重要.最不同寻常的特征是它的存储引擎框架,这种架构可以讲查询处…
此书不但帮助MySQL初学者提高使用技巧,更为有经验的MySQL DBA指出了开发高性能MySQL应用的途径.全书包括14章,内容覆盖MySQL系统架构.设计应用技巧.SQL语句优化.服务器性能调优.系统配置管理和安全设置.监控分析,以及复制.扩展和备份/还原等主题. MySQL为名的数据库是从1994年开始开发,并与1995年第一次呈现在小范围的用户面前,开发者是两个瑞典人Widenius和David Axmark.那时MySQL还非常简陋,除了在一些表上做一些Inser.Update.Del…
写在前面:之前硬着头皮参加了java方面的编程规范培训,收货良多,工作半年有余的时候,总算感觉到一丝丝Coding之美,以及造轮子的乐趣,以至于后面开发新功能的时候,在Coding style方面花了很多时间,但还有一些细节方面,总感觉一直没有统一,比如什么时候该加空行,比如是不是所有的return前面都应该加个空行以及注释的添加等等,才有了对这本书<编写可维护的Javascript>的阅读,还是如之前一样,只收纳了一些自己看本书的时候,还未完全贯彻的style 有待改进的点:在前端自动化的路…
Function类型 ECMAScript中函数是对象,每个函数都是Function类型的实例,也有属性和方法,函数是对象,函数名实际上市一个指向函数对象的指针,不会与某个函数绑定: function sum(num1,num2){ return num1+num2; } 同: var sum=function(num1,num2){ return num1+num2; }; (1)没有重载 若声明了两个同名函数,后面的函数会覆盖前面的函数: (2)函数声明和函数表达式 解析器会率先读取函数声明…
1.  操作符 (1)       一元操作符 前置递增和递减操作符,变量的值都是在语句被求值以前改变的:后置相反 (2)       位操作符 在ECMAScript中,对数值进行位操作时,会发生以下转换过程:64位的数值被转换为32位数值,然后执行位操作,最后再将32位的结果转换回64位数值: 右移分为有符号右移(>>)和无符号右移(>>>) (3)       布尔操作符-(!)(&&)(||) (4)       全等操作符(===)只在两个操作数未经…