这本书让lz对js性能优化有了更深刻的理解,现在因为我们通常用第三方构建工具webpack、gulp等诸如此类,之前总是听说什么dom操作影响性能呢,对这个概念总是有点模糊,但看完这本书之后后,相对而言比较清晰了。

书中有句话说的比较形象,js与dom之间有座桥梁,当我们去访问dom时,无疑是要交过路费的,所以性能优化的最好方式,所以一些操作尽量放在js层面这边来做。时下比较流行的vue、react之类就是如此

虽然现在我们用vue、react这些库比较多,但是像lz上家就要维护以往的项目(jq),当时就遇到js操作dom太多,浏览器卡死的情况。我当时用的是用定时器分批次操作dom,尽量不要一下子操作,因为浏览器是单线程的,js脚本执行的时候,页面就不会响应。

以下是lz看书总结一些性能优化的方面,不尽全,想更深入了解的,可以去看这本书

1. 脚本文件放在最html文件底部
多数浏览器使用单一线程处理界面刷新和脚本执行,也就是说浏览器同一时间只可以做一件事,如果脚本放在顶部会导致明显的延迟
2. 减少页面中外链脚本文件的数量
也就是说当一个应用依赖多个js文件时,多个文件合并成一个script标签,就可减少性能消耗
3. 无阻塞加载脚本
使用script标签的defer属性
使用动态创建的script元素来下载并执行代码
使用XHR对象下载js代码并注入到页面中
4. 尽量使用局部变量
因为其位于作用域链的起始位置,查找速度更快
5. 使用querySelectAll()的api
6. 合并dom操作,使用文档片段对象,尽量减少重排与重绘
7. 事件委托减少事件处理器的数量
8. 少用if else与switch,通过数组,对象的方式

高性能JavaScript读后感的更多相关文章

  1. 《高性能javascript》一书要点和延伸(上)

    前些天收到了HTML5中国送来的<高性能javascript>一书,便打算将其做为假期消遣,顺便也写篇文章记录下书中一些要点. 个人觉得本书很值得中低级别的前端朋友阅读,会有很多意想不到的 ...

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

    <高性能javascript> 领悟随笔之-------DOM编程篇二 序:在javaSctipt中,ECMASCRIPT规定了它的语法,BOM实现了页面与浏览器的交互,而DOM则承载着整 ...

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

    <高性能javascript> 领悟随笔之-------DOM编程篇一 序:在javaSctipt中,ECMASCRIPT规定了它的语法,BOM实现了页面与浏览器的交互,而DOM则承载着整 ...

  4. 各种JS模板引擎对比数据(高性能JavaScript模板引擎)

    最近做了JS模板引擎测试,拿各个JS模板引擎在不同浏览器上去运行同一程序,下面是模板引擎测试数据:通过测试artTemplate.juicer与doT引擎模板整体性能要有绝对优势: js模板引擎 Ja ...

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

    参考 高性能javascript javascript高级程序设计 ajax基础  ajax技术的核心是XMLHttpRequest对象(XHR),通过XHR我们就可以实现无需刷新页面就能从服务器端读 ...

  6. 高性能javascript学习笔记系列(5) -快速响应的用户界面和编程实践

    参考高性能javascript 理解浏览器UI线程  用于执行javascript和更新用户界面的进程通常被称为浏览器UI线程  UI线程的工作机制可以理解为一个简单的队列系统,队列中的任务按顺序执行 ...

  7. 高性能JavaScript 编程实践

    前言 最近在翻<高性能JavaScript>这本书(2010年版 丁琛译),感觉可能是因为浏览器引擎的改进或是其他原因,书中有些原本能提高性能的代码在最新的浏览器中已经失效.但是有些章节的 ...

  8. 高性能javascript学习笔记系列(4) -算法和流程控制

    参考高性能javascript for in 循环  使用它可以遍历对象的属性名,但是每次的操作都会搜索实例或者原型的属性 导致使用for in 进行遍历会产生更多的开销 书中提到不要使用for in ...

  9. 高性能javascript学习笔记系列(3) -DOM编程

    参考 高性能javascript 文档对象模型(DOM)是独立于语言的,用于操作XML和HTML文档的程序接口API,在浏览器中主要通过DOM提供的API与HTML进行交互,浏览器通常会把DOM和ja ...

随机推荐

  1. jQuery.extend 函数使用

    JQuery的extend扩展方法:      Jquery的扩展方法extend是我们在写插件的过程中常用的方法,该方法有一些重载原型,在此,我们一起去了解了解.      一.Jquery的扩展方 ...

  2. 6-11数据库mysql初始

    1,什么是数据(DATA)? 描述事物的符号记录称为数据,描述事物的符号既可以是数字,也可以是文字.图片,图像.声音.语言等,数据由多种表现形式,它们都可以经过数字化后存入计算机 2,什么是数据库? ...

  3. Java的两大数据类型

    Java的两大数据类型 基本数据类型 byte,short,int,long,float,double,boolean,char byte 类别 内容 类型 byte 简介 byte 数据类型是8位. ...

  4. printf是在libc库中么?

    libc中果然有很多的函数,使用nm看了一下,里面竟然还有reboot函数,汗! 使用grep,可以看到各种 printf 也都在这里头. objdump是看函数的地址与函数名对应的,虽然也能证明pr ...

  5. 关于vmvawe的光驱,iso镜像,挂载,卸载

    勾选这个使用iso镜像文件,就相当于真实的环境下,将一张光盘插进了光驱里,然后再勾选启动时连接,那么在linux开机后,/dev/cdrom或者/dev/sr0(前者是后者的软连接)就表示这个硬件设备 ...

  6. [TensorFlow笔记乱锅炖] tf.multinomial(logits, num_samples)使用方法

    tf.multinomial(logits, num_samples) 第一个参数logits可以是一个数组,每个元素的值可以简单地理解为对应index的选择概率,注意这里的概率没有规定加起来的和为1 ...

  7. python基础-----异常问题

    ---恢复内容开始--- 当发生python不知所措的错误时,python会创建一个异常对象, 如果你编写处理该异常的代码,程序将会继续运行: 如果你未对异常做任何处理,程序将会停止,并显示一个tra ...

  8. HDOJ 4267 A Simple Problem with Integers (线段树)

    题目: Problem Description Let A1, A2, ... , AN be N elements. You need to deal with two kinds of opera ...

  9. 肺结节CT影像特征提取(一)——肺结节CT图像特征概要

    本科毕设做的是医学CT图像特征提取方法研究,主要是肺部CT图像的特征提取.由于医学图像基本为灰度图像,因此我将特征主要分为三类:纹理特征,形态特征以及代数特征,每种特征都有对应的算法进行特征提取. 如 ...

  10. 记录 一次深夜救火:datanode.data.dir

    火灾背景: Hadoop集群,4个节点,每一台配置都不一样 火灾现场: 1.突然发现DN4硬盘报警,检查硬盘,发现挂载如下: /home 200GB /home/data 3TB 然后发现datano ...