高性能JavaScript读后感
这本书让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读后感的更多相关文章
- 《高性能javascript》一书要点和延伸(上)
前些天收到了HTML5中国送来的<高性能javascript>一书,便打算将其做为假期消遣,顺便也写篇文章记录下书中一些要点. 个人觉得本书很值得中低级别的前端朋友阅读,会有很多意想不到的 ...
- 《高性能javascript》 领悟随笔之-------DOM编程篇(二)
<高性能javascript> 领悟随笔之-------DOM编程篇二 序:在javaSctipt中,ECMASCRIPT规定了它的语法,BOM实现了页面与浏览器的交互,而DOM则承载着整 ...
- 《高性能javascript》 领悟随笔之-------DOM编程篇
<高性能javascript> 领悟随笔之-------DOM编程篇一 序:在javaSctipt中,ECMASCRIPT规定了它的语法,BOM实现了页面与浏览器的交互,而DOM则承载着整 ...
- 各种JS模板引擎对比数据(高性能JavaScript模板引擎)
最近做了JS模板引擎测试,拿各个JS模板引擎在不同浏览器上去运行同一程序,下面是模板引擎测试数据:通过测试artTemplate.juicer与doT引擎模板整体性能要有绝对优势: js模板引擎 Ja ...
- 高性能javascript学习笔记系列(6) -ajax
参考 高性能javascript javascript高级程序设计 ajax基础 ajax技术的核心是XMLHttpRequest对象(XHR),通过XHR我们就可以实现无需刷新页面就能从服务器端读 ...
- 高性能javascript学习笔记系列(5) -快速响应的用户界面和编程实践
参考高性能javascript 理解浏览器UI线程 用于执行javascript和更新用户界面的进程通常被称为浏览器UI线程 UI线程的工作机制可以理解为一个简单的队列系统,队列中的任务按顺序执行 ...
- 高性能JavaScript 编程实践
前言 最近在翻<高性能JavaScript>这本书(2010年版 丁琛译),感觉可能是因为浏览器引擎的改进或是其他原因,书中有些原本能提高性能的代码在最新的浏览器中已经失效.但是有些章节的 ...
- 高性能javascript学习笔记系列(4) -算法和流程控制
参考高性能javascript for in 循环 使用它可以遍历对象的属性名,但是每次的操作都会搜索实例或者原型的属性 导致使用for in 进行遍历会产生更多的开销 书中提到不要使用for in ...
- 高性能javascript学习笔记系列(3) -DOM编程
参考 高性能javascript 文档对象模型(DOM)是独立于语言的,用于操作XML和HTML文档的程序接口API,在浏览器中主要通过DOM提供的API与HTML进行交互,浏览器通常会把DOM和ja ...
随机推荐
- 【译】第三篇 SQL Server安全主体和安全对象
本篇文章是SQL Server安全系列的第三篇,详细内容请参考原文. 一般来说,你通过给主体分配对象的权限来实现SQL Server上的用户与对象的安全.在这一系列,你会学习在SQL Server实例 ...
- window 编译lua 5.3
由于lua 5.1 不支持左移右移的操作符,所以要移植lua 5.3.方便在window 下编译调试 参考链接: http://www.linuxidc.com/Linux/2014-02/96459 ...
- Javascript入门(二)变量、获取元素、操作元素
一.变量 Javascript 有五种基本数据类型 number.String.boolean.undefined.null 一种复合类型:object 二.使用getElementById方法获取元 ...
- 微信小程序学习过程
1.诞生背景: 更好的体验: 规范与管理: 2.什么是小程序: 小程序是一种不需要下载即可使用的应用,它实现了应用“触手可及”的梦想: 用户扫一扫或者搜一下即可打开应用,也体现了“用完即走”的理念: ...
- RabbitMQ简单应用の订阅模式
订阅模式 公众号-->订阅之后才会收到相应的文章. 解读: 1.一个生产者,多个消费者 2.每个消费者都有自己的队列 3.生产者没有将消息直接发送到队列里,而是发送给了交换机(转发器)excha ...
- tomcat quartz 被触发两次
主要原因为tomcat server.xml 配置问题 <Host appBase="webapps" autoDeploy="true" name=&q ...
- Error "Client wants topic A to have B, but our version has C. Dropping connection."
ROS problem 出现这个问题的原因是话题上的消息类型和订阅节点指定的消息类型不匹配.
- [机器学习] k近邻算法
算是机器学习中最简单的算法了,顾名思义是看k个近邻的类别,测试点的类别判断为k近邻里某一类点最多的,少数服从多数,要点摘录: 1. 关键参数:k值 && 距离计算方式 &&am ...
- 向量的L2范数求导
回归中最为基础的方法, 最小二乘法. \[ \begin{align*} J_{LS}{(\theta)} &= \frac { 1 }{ 2 } { \left\| A\vec { x } ...
- ini文件解析c库(iniparser)【转】
转自:http://www.cnblogs.com/dyllove98/archive/2013/07/28/3221732.html 一.交叉编译ini解析库 .官方网站http://ndevill ...