javascript简单性能问题及学习笔记

 最近在看一本书:《高性能javaScript》,发现自己平时写js存在很多小细节上的问题,虽然这些问题不会导致程序运行出错,但是会导致界面加载变慢,用户体验变差,那么我们就来细细数一下应该注意的地方吧

1、<script>标签应越少越好(虽然有多个也不会导致程序报错),因为每个<script>标签初始下载时都会阻塞页面渲染 
2、<script>标签尽量不要放在页面上方,尽量放在<body>内的最下面,因为每个<script>在执行的时候,都会下载对应的js文件,浏览器会等待所有js/css下载完成才显示出页面 
3、当需要导入多个js文件的时候,一般情况下我们都是写两个<script src="..." />,实际上是支持一次性导入多个的,例如:<script src="file1.js&file2.js" /> 
4、<script>标签中有一个属性:defer,该属性指明本元素所含的脚本不会修改DOM,因此代码能安全地延迟执行,但是该属性只有IE4+和Firefox3.5+浏览器支持,希望大家使用的时候注意,如果其他浏览器,则会被直接忽略,使用例子:
 
<script type="text/javascript" src="file1.js" defer />  
 
,测试验证defer属性示例:
 
 代码如下:
<script defer>alert("defer");</script>  
<script>alert("script");</script>  
<script>  
window.onload = function() {  
alert("load");  
};  
</script>
 
 
这段代码在我们正常理解下执行顺序应该是:defer、script、load,但是如果在支持defer的浏览器上顺序则是:script、defer、load,这里需要注意的是:defer不是跟在script后面执行,而是在onload事件处理之前被调用。
 
时间有限,今天先记录这么多吧
 

时间: 2025-01-19 07:36:11

javascript简单性能问题及学习笔记的相关文章

javascript简单性能问题及学习笔记_javascript技巧

1.<script>标签应越少越好(虽然有多个也不会导致程序报错),因为每个<script>标签初始下载时都会阻塞页面渲染 2.<script>标签尽量不要放在页面上方,尽量放在<body>内的最下面,因为每个<script>在执行的时候,都会下载对应的js文件,浏览器会等待所有js/css下载完成才显示出页面 3.当需要导入多个js文件的时候,一般情况下我们都是写两个<script src="..." />,实际

Bootstrap简单表单显示学习笔记_javascript技巧

表单布局 垂直或基本表单 基本的表单结构时BootStrap自带的,创建基本表单的步骤如下: 1.向父<form>元素添加role = "form": 2.为了获取最佳的间距,把标签和控件放在一个div.form-group中,div放在父form下: 3.向所有的文本元素<input>.<textarea>和<select>添加.form-control <!DOCTYPE html> <html> <he

《Java程序性能优化》学习笔记 并行程序优化

第四章 并行程序优化4.1 并行程序设计模式4.2 JDK多任务执行框架4.3 JDK并发数据结构4.4 并发控制方法4.5 锁的性能和优化4.6 无锁的并行计算 1.非阻塞同步避免了基于锁的同步的缺陷,无锁算法没有锁竞争带来的系统开销,也没有线程间频繁调度带来的开销. CAS算法:包含3个参数CAS(v,e,n).V表示要更新的变量,E表示预期值,N表示新值 2.JDK的java.util.concurrent.atomic包下,有一组使用无锁算法实现的原子操作类,如AtomicInteger

JavaScript中函数的参数学习笔记

 我们之前写的函数并没有给它传参,其实所谓的传参就是将参数传给函数,然后函数在内部做一些处理,那么如何给参数传参呢,其实函数后面的括号里面就是放参数的,下面举个例子:  代码如下 复制代码 function sum(a, b) {  alert(a+b); } sum(12, 5); 上面的函数中,给sum设置了2个参数a和b,当调用sum时,传递了2个参数给函数,这时a就变为了12,b就变为了5,函数体内的也要变.a和b就起到一个占位符的作用,就好像你和同学去食堂打饭,突然想到早上吃饭看见饭卡

JavaScript原型和继承的学习笔记

前几天看了<再谈js面向对象编程>,当时就请教哈大神,发现文章有的地方可能会造成误导(或者说和ECMA有出入),后来自己翻一翻ECMA,总算找到"标准"的理解-- 本文适合初学者,特别是对构造函数.原型和原型链概念比较模糊的,大牛请路过,好了,让我们一步步来看看 Javascript原型(链)到底有多神秘-- 一.函数创建过程 在了解原型链之前我们先来看看一个函数在创建过程中做了哪些事情,举一个空函数的例子: function A() {}; 当我们在代码里面声明这么一个空

JavaScript高阶函数的学习笔记

在Javascript中,有高阶函数的概念,因而很适合函数式编程.那神马是高阶函数呢?没有神马具体的定义,但高阶函数有两个显著的特征:.用函数做参数或返回一个函数. 函数作为参数 众所周知,函数是Javascript中的一等公民,不仅能被赋值,也能和普通变量一样,作为函数的参数. 如果你有Javascript的Web编程经验或者是一个前端开发者,就会经常碰到回调函数.在某个操作完成之后会被执行的函数就被称为回调函数.通常,回调函数都是匿名的,并作为最后一个函数传递给调用者. 由于Javascri

JavaScript权威设计--JavaScript类型,值,变量(简要学习笔记三)

1.负号是一元求反运算 如果直接给数字直接量前面添加负号可以得到他们的负值     2.JavaScript中的运算超出了最大能表示的值不会报错,会显示Infinity. 超出最小也不报错,会显示-Infinity. 运算出的结果如果是个非数字的值得时候,用NaN表示.   3.字符串直接量拆分成数行 ECMAScript3中,字符串直接量必须下载一行中,而在ECMScript中,字符串直接量可以拆分成数行,每行必须以反斜线(\)介绍. 如:"two\lines"       &quo

《Java程序性能优化》学习笔记 JVM调优

第五章 JVM调优5.1 Java虚拟机内存模型 1.JVM虚拟机将其内存数据分为程序计数器.虚拟机栈,本地方法栈,Java堆,和方法去等部分. 2.Java虚拟机栈,在Java 虚拟机规范中,定义了两种异常与占空间相关,即StackOverError和OutOfMemoryError.如果线程在计算过程中,请求的栈深度大于最大可用的栈深度,则抛出SOE,如果Java栈可以动态扩展,而在扩展栈的过程中,没有足够的内存空间来支持栈的扩展,则抛出OutOfMemoryError. 栈的大小直接决定了

《Java程序性能优化》学习笔记 设计优化

第一章 Java性能调优概述 1.性能的参考指标   执行时间:   CPU时间:   内存分配:   磁盘吞吐量:   网络吞吐量:   响应时间: 2.木桶定律   系统的最终性能取决于系统中性能表现最差的组件,例如window系统内置的评分就是选取最低分.可能成为系统瓶颈的计算资源如,磁盘I/O,异常,数据库,锁竞争,内存等.   性能优化的几个方面,如设计优化,Java程序优化,并行程序开发及优化,JVM调优,Java性能调优工具的使用等. 3.Amdahl定律   加速比=优化前系统耗