高性能JavaScript（字符串和正则表达式）

《高性能javascript》一书要点和延伸（上）

前些天收到了HTML5中国送来的<高性能javascript>一书,便打算将其做为假期消遣,顺便也写篇文章记录下书中一些要点. 个人觉得本书很值得中低级别的前端朋友阅读,会有很多意想不到的收获. 第一章加载和执行基于UI单线程的逻辑,常规脚本的加载会阻塞后续页面脚本甚至DOM的加载.如下代码会报错: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8…

高性能JavaScript（您值得一看）

众所周知浏览器是使用单进程处理UI更新和JavaScript运行等多个任务的,而同一时间只能有一个任务被执行,如此说来,JavaScript运行了多长时间就意味着用户得等待浏览器响应需要花多久时间. 从认知上来说,解析器解析一个界面的时候都是从上至下依次解析的,这就是说界面上出现多少个<script>标签(不管是内联还是外部文件),页面下载和解析必须停止等待脚本下载完成并运行完成(注意这里包括运行),这个过程当中,页面解析和用户交互是被完全阻塞的. Javascript第一条定律:将脚本放在底…

【读书笔记】读《高性能JavaScript》

这本<高性能JavaScript>讲述了有关JavaScript性能优化的方方面面,主要围绕以下几个方面: 1> 加载顺序 2> 数据访问(如怎样的数据类型访问最快,怎样的作用域链最优) 3> DOM编程(如怎样的方式访问DOM元素性能是最优的) 4> 字符串和正则 5> Ajax 6> 编程实践(性能测试工具的使用.创建与部署JavaScript应用程序.如何提升程序响应) var script = document.createElement (&quo…

《高性能javascript》学习总结

本文是学习<高性能javascript>(Nichols C. Zakes著)的一些总结,虽然书比较过时,里面的知识点也有很多用不上了,但是毕竟是前人一步步探索过来的,记录着javascript艰难的发展历程,如今站在巨人的肩膀上,也许我们也能发掘更好的javascript性能. 第一章:加载和执行管理浏览器中的javascript代码是个棘手的问题,因为代码执行过程会阻塞浏览器的其他进程,比如用户界面绘制,每次遇到<script>标签,页面必须停下来等待代码下载(如外部链接文件…

高性能javascript笔记

----------------------------------------------------------- 第一章加载和执行 -------------------------------------1.脚本位置浏览器在遇到<script>标签时会等待脚本下载完并执行完才会继续渲染页面因为js代码有可能会改变dom结构,所以需要等待js的执行完成遇到<script>标签 -> 下载脚本 -> 执行脚本 -> 继…

高性能JavaScript读书笔记

零.组织结构根据引言,作者将全书划分为四个部分: 一.页面加载js的最佳方式(开发前准备) 二.改善js代码的编程技巧(开发中) 三.构建与部署(发布) 四.发布后性能检测与问题追踪(线上问题优化) 这样的组织结构也符合我们的开发习惯,首先进入第一部分. 一.JavaScript加载起因:script脚本的加载会阻塞浏览器渲染页面和处理用户交互,如果加载的script脚本太多太大,就会长时间阻塞,造成页面假死. 解决方案: 1.脚本位置放在底部. 放在底部可以保证页面主体结构已经基本加载完…

《高性能JavaScript》--读书笔记

第一章加载和运行延迟脚本 defer 该属性表明脚本在执行期间不会影响到页面的构造,脚本会先下载但被延迟到整个页面都解析完毕后再运行.只适用于外部脚本 <script src="js/test.js" defer></script> <div>123</div> <script> alert('script'); window.onload = function(){ alert('loaded'); } </scr…

高性能javascript学习总结（3）--数据访问

在 JavaScript 中,数据存储位置可以对代码整体性能产生重要影响.有四种数据访问类型:直接量,变量,数组项,对象成员. 直接量仅仅代表自己,而不存储于特定位置. JavaScript 的直接量包括:字符串,数字,布尔值,对象,数组,函数,正则表达式,具有特殊意义的空值,以及未定义. 变量是指开发人员使用 var关键字创建用于存储数据值. 数组现是指具有数字索引,存储一个 JavaScript数组对象. 对象成员具有字符…

《高性能Javascript》 Summary（二）

第四章.算法和流程控制 Algorithms And Flow Control 原因:代码整体结构是执行速度的决定因素之一.代码量少不一定运行速度快,代码量多不一定运行速度慢.性能损失与组织代码和具体问题解决办法直接相关. 解决: 与其他编程语言一样,代码的写法和算法选用影响JavaScript的运行时间.与其他编程语言不同是,JavaScript可用的资源有限,所以优化的技术更为重要. For, While, Do while循环特性相似,谁也不必谁更快或更慢. 除非迭代遍历一个未知的属性,…

《高性能JavaScript》实用指南

By XFE-堪玉阅读<高性能javascript>后,对其内容的一个整理和精简加载与执行将script标签放在body结尾标签上面控制script标签数量(每一次script解析都意味着阻塞或延迟) 内嵌脚本不要放在link样式之后对script标签应用defer属性动态创建script标签加载js文件(模块化框架即可) 数据存取不影响this的情况下,对反复访问的对象进行变量保存合理使用局部变量,减少作用域跨越避免使用with和eval 谨慎地使用闭包减少Object对…

第二篇，前端高性能JavaScript优化

加载和执行 JavaScript是单线程,所以JavaScript的加载和执行是从上下文加载执行完一个继续加载执行下一个文件会阻塞页面资源的加载,所以一般情况下JavaScript文件放在body标签内底部,很多后端开发人员放在body标签外下面,这样做不好的地方有两点:1.不规范 2.可能会造成js获取不到页面元素而导致报错.而放在body标签内底部可以去保js执行前有页面渲染完成. js... //正确 js... 合并脚本每个<script>标签初始化下载都会阻塞页面渲染,所以减少页面的…

《高性能javascript》阅读摘要

最近在阅读这本Nicholas C.Zakas(javascript高级程序设计作者)写的最佳实践.性能优化类的书.记录下主要知识. 加载和执行脚本位置放在<head>中的javascript文件会阻塞页面渲染:一般来说浏览器中有多种线程:UI渲染线程.javascript引擎线程.浏览器事件触发线程.HTTP请求线程等.多线程之间会共享运行资源,浏览器的js会操作dom,影响渲染,所以js引擎线程和UI渲染线程是互斥的,导致执行js时会阻塞页面的渲染.最佳实践:所有的script标签应尽…

【前端性能优化】高性能JavaScript整理总结

高性能JavaScript整理总结关于前端性能优化:首先想到的是雅虎军规34条然后最近看了<高性能JavaScript>大概的把书中提到大部分知识梳理了下并加上部分个人理解这本书有参考雅虎特别性能小组的研究成果,所以跟34 军规有很多相似之处有不当之处请在评论区指正,感谢~ 约定:很多单词语法都是简写比如doc指document,点点点代表不重要代码省略,码字不易(/双手合十) 1. 加载和执行 JavaScript是单线程,所以JavaScript的加载和执行是从上至下加载执行完一个再继续…

JavaScript 字符串实用常操纪要

JavaScript 字符串用于存储和处理文本.因此在编写 JS 代码之时她总如影随形,在你处理用户的输入数据的时候,在读取或设置 DOM 对象的属性时,在操作 Cookie 时,在转换各种不同 Date 时,诸此等等,繁不能数:而她那蛮多的 API 呵,总有些让人不愿去记忆的冲动,既然用时常搜,倒不如烂笔头一番,以作了结,顺道也体现下这博客存在的价值,由此就有了这篇纪要. 如此处排版不能如意,烦请移步原文首链:JavaScript 字符串实用常操纪要: 字符串截取 1. substring()…

《高性能javascript》领悟随笔之-------DOM编程篇(二)

<高性能javascript> 领悟随笔之-------DOM编程篇二序:在javaSctipt中,ECMASCRIPT规定了它的语法,BOM实现了页面与浏览器的交互,而DOM则承载着整个页面文档.DOM编程性能一直以来都是非常受开发者关注的话题,如何编写高性能的DOM是前端开发必不可少的技能. 1.重绘与重排当浏览器加载完页面所有的元素.js.css.图片之后会自动生成两个数据结构: 1.dom树 (图片为转载) 如图所示,dom树表示了整个页面文档的结构,通过访问dom树我们可以得到某…

《高性能javascript》领悟随笔之-------DOM编程篇

<高性能javascript> 领悟随笔之-------DOM编程篇一序:在javaSctipt中,ECMASCRIPT规定了它的语法,BOM实现了页面与浏览器的交互,而DOM则承载着整个页面文档.DOM编程性能一直以来都是非常受开发者关注的话题,如何编写高性能的DOM是前端开发必不可少的技能. 1.DOM访问与修改访问DOM元素是有一定的性能代价的,有时候这种代价会整体拖慢网页的运行速度,例如循环访问或修改一些元素内容,操作不当会导致页面卡帧,甚至是假死,例如下面的代码. functio…

JavaScript 字符串操作

JavaScript 字符串用于存储和处理文本.因此在编写 JS 代码之时她总如影随形,在你处理用户的输入数据的时候,在读取或设置 DOM 对象的属性时,在操作 Cookie 时,在转换各种不同 Date 时,诸此等等,繁不能数:而她那满多的 API 呵,总有些让人不愿去记忆的冲动,既然用时常搜,倒不如烂笔头一翻,顺道也体现下博客存在的价值,由此就有了这篇纪要. 字符串截取 1. substring() xString.substring(start,end) substring()是最常用到的…

JavaScript 字符串处理详解

一.创建字符串创建一个字符串,将一组字符串用引号包起来,将其赋值给一个字符串变量. var JsStr="Hello,JavaScript String!"; 二.字符串查找方法 1.字符方法charAt(),charCodeAt(),fromCharCode() (1)charAt()函数功能:返回字符串中指定位置的字符; 语法:String.charAt(n); 参数:n--字符在字符串中的位置(字符串第一个字符的位置为0); 返回值:返回n位置的字符,如果n不在0…

高性能javascript学习笔记系列(6) -ajax

参考高性能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学习笔记系列(5) -快速响应的用户界面和编程实践

参考高性能javascript 理解浏览器UI线程用于执行javascript和更新用户界面的进程通常被称为浏览器UI线程 UI线程的工作机制可以理解为一个简单的队列系统,队列中的任务按顺序执行 <button onclick="handleClick()">click</button> <script type="text/javascript"> function handleClick() { var div = do…

高性能JavaScript 编程实践

前言最近在翻<高性能JavaScript>这本书(2010年版丁琛译),感觉可能是因为浏览器引擎的改进或是其他原因,书中有些原本能提高性能的代码在最新的浏览器中已经失效.但是有些章节的有些内容还是相当不错的,譬如第八章编程实践,为了方便以后的查阅,对此做个总结.失效的代码也会在以后做更进一步的探索. 避免双重求值这个优化策略很好理解,我们可能都已经不知不觉地运用在了实际的编程中: // not use this setTimeout('alert("hello world&qu…

JavaScript中的正则表达式（终结篇）

JavaScript中的正则表达式(终结篇) 在之前的几篇文章中,我们了解了正则表达式的基本语法,但那些语法不是针对于某一个特定语言的.这篇博文我们将通过下面几个部分来了解正则表达式在JavaScript中的使用: JavaScript对正则表达式的支持程度支持正则表达式的RegExp类型 RegExp的实例属性 RegExp的实例方法 RegExp的构造函数属性简单的应用第一部分:JavaScript对正则表达式的支持程度之前我介绍了正则表达式的基本语法,如果大家不是很了解可以先看下面…

javascript中的正则表达式学习

一.前言关于正则表达式自身的语法这里不做过多介绍(详情可参见http://www.php100.com/manual/unze.html),这里仅仅解释javascript中和正则表达式相关的几个方法的使用(http://www.w3school.com.cn/jsref/jsref_obj_regexp.asp). 二.javascript中的RegExp对象在javascript中,有两种方法可以构建正则: 正则表达式字面量 RegExp构造器 RegExp对象有以下属性: global…

JavaScript 字符串常用操作

Javascript中的正则表达式

Javascript中的正则表达式刚开始接触正则表达式的时候,觉得这是个很死板的东西(没办法,计算机不能像人眼一样能很快的辨认出我们需要的结果,它需要一定的规则来对它进行限制),了解的越多,发现这个其实很灵活,在我们好多小数据的处理上它都起着很重要的作用,下面,我们再来重新认识它. 创建正则表达式的两种方法: 1.字面量方法 var b=/\bam\b/; alert( "i am lily".replace(b,'AM')); //i AM lily 2.构造函数方法 var re…

高性能JavaScript 循环语句和流程控制

前言上一篇探讨了达夫设备对于代码性能的影响,本文主要探讨并且测试各种常见的循环语句的性能以及流程控制中常见的优化. 循环语句众所周知,常用的循环语句有for.while.do-while以及for-in,forEach.除了for-in和forEach性能略低外,平时我们对前三者的选择更多的是基于需求而非性能考虑,今天我们就对它们各自的性能做个测试,告诉我们最极端的情况下还能做哪些优化. 首先我们来谈谈为何for-in和forEach会比其他的慢.for-in一般是用在对象属性名的遍历上的,…

浅谈JavaScript中的正则表达式

引言对于正则表达式我想作为程序员肯定使用过它,那天书般的表达方式,我用一次就记住它了.这篇博客先介绍一些正则表达式的内容,然后介绍JavaScript中对正则表达式特有的改进.下面开始介绍正则表达式吧. 正则表达式是什么? 相信大家一定使用过windows的资源管理器搜索功能.例如我需要找出全部的txt文档,我们通常都会使用*.txt去进行匹配.在这里,*会被解释成任意的字符串.和通配符类�BC�,正则表达式也是用来进行文本匹配的工具,只不过比起通配符,它能更精确地描述你的需求——当然,代价…

JavaScript的学习--正则表达式

今天用正则表达式的时候遇到了不少问题,就研究了一下,参考了不少博客,特此记录. 正则表达式的参数参考 /i (忽略大小写)/g (全文查找出现的所有匹配字符)/m (多行查找)/gi(全文查找.忽略大小写)/ig(全文查找.忽略大小写) 下面为PCRE模式的修饰符,js不支持.参考 i 模式中的字符将同时匹配大小写字母m 字符串视为多行s 将字符串视为单行,换行符作为普通字符x 将模式中的空白忽略e preg_replace() 函数在替换字符串中对逆向引用作正常的替换,将其作为 PHP…

转载 javascript中的正则表达式总结二

学习正则表达式今年的第一篇javascript文章就是这个正则表达式了,之前的文章是转载别人的,不算自己的东西,可以忽略不计,最近突然想把转载别人的东西统统删掉,因为转载过的文章,我根本没有从中获得收获,纯粹是浪费时间,虽然说可以留着以后需要的时候来查看,可是这是一个非常不好的念头.今年我将不会再转载别人的一篇文章了,如果觉得有用,我会把它收藏到云笔记上,推荐使用印象笔记,比网易的云笔记好了N倍,谁用谁知道. 如果看到好的博客,我将会把它订阅到feedly里面,有空的时候就会翻出来看看他们…

转载 javascript中的正则表达式总结一

定义正则表达式的方法定义正则表达式的方法有两种:构造函数定义和正则表达式直接量定义.例如: var reg1 = new RegExp('\d{5, 11}'); // 通过构造函数定义 var reg2 = /\d{5, 12}/; // 通过直接量定义正则表达式直接量字符 \o:NUL字符(\u0000) \t:制表符(\u0009) \n:换行符(\u000A) \v:垂直制表符(\u000B) \f:换页符(\u000C) \r:回车符(\u000D) \xnn:由十六进制数nn…

【高性能JavaScript（字符串和正则表达式）】的更多相关文章