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

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事件处理之前被调用。

时间有限,今天先记录这么多吧

时间: 2024-08-18 04:16:47

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

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

 最近在看一本书:<高性能javaScript>,发现自己平时写js存在很多小细节上的问题,虽然这些问题不会导致程序运行出错,但是会导致界面加载变慢,用户体验变差,那么我们就来细细数一下应该注意的地方吧 1.<script>标签应越少越好(虽然有多个也不会导致程序报错),因为每个<script>标签初始下载时都会阻塞页面渲染  2.<script>标签尽量不要放在页面上方,尽量放在<body>内的最下面,因为每个<script>在执行

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

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

某人初学javascript的时候写的学习笔记_javascript技巧

复制代码 代码如下: /* * JavaScript对象就是一组属性(方法)的集合 * 在该语言中如果变量名或方法名不符合声明规范, * 则一定得用方括号" [] "引用它 * */ /** * <1.>该语句声明了一个class1类,class1相当于构造方法,又叫构造器 * 也可说声明了一个class1方法 */ function class1(){ this.name="xjl"; //给对象添加属性 this.say= function(){al

整理Javascript基础入门学习笔记_javascript技巧

了解什么是变量? 变量是用于存储信息的容器 变量的声明 语法: var  变量名变量名 = 值; 变量要先声明再赋值 变量可以重复赋值变量的命名规则 变量必须以字母开头: 变量也能以$和_符号开头(不过我们不推荐这么做): 变量名称对大小写敏感(a和A是不同的变量). 1.语句 语句以一个分号结尾:如果省略分号,则由解析器确定语句的结尾. 有个好的编码习惯,都要以 ; 结尾 2.数据类型 在JavaScript中,一段信息就是一个值(value).值有不同的类型,大家最熟悉的类型是数字.字符串(

整理Javascript函数学习笔记_javascript技巧

1.什么是函数 如果需要多次使用同一段代码,可以把它们封装成一个函数.函数(function)就是一组允许在你的代码里随时调用的语句.每个函数实际上是一个短小的脚本. 如:要完成多组数和的功能. var sum; sum = 3+2; alear(sum); sum = 7+8; alear(sum); ......//不停的重复两行代码 如果要实现8组数的和,就需要16行代码,实现的越多,代码行也就越多.所以我们可以把完成特定功能的代码块放到一个函数里,直接调用这个函数,就省去重复输入大量代码

bootstrap基础知识学习笔记_javascript技巧

在此就不做 bootstrap 的介绍了,近几年 bootstrap 越来越流行,一点不亚于 js 中的 jquery. 以下为 bootstrap 3.3.5 学习中记录的东西,方便查阅,作者使用的是 jsp ,跟 html 可能有稍许不同,请自行参考修改 [引用文件] [页面引用] 路径请自行规划 <script type="text/javascript" src="<%=path%>/js-lib/jquery/jquery-1.11.2.min.j

JavaScript简单下拉菜单实例代码_javascript技巧

本文实例讲述了JavaScript简单下拉菜单实例代码.分享给大家供大家参考.具体如下: 这是一款JavaScript实现的下拉菜单演示代码,带渐变效果的CSS+jQuery菜单,向下滑出型的菜单,最高支持两级,网上常见到的一种菜单风格,希望大家喜欢哦. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-simple-xlcd-down-menu-codes/ 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C/

Vue.js第四天学习笔记_javascript技巧

分享一段将json数组数据以csv格式导出的代码: html: <button class="btn btn-danger" @click='exportData'>导出</button> js: // 导出数据 exportData: function() { let tableHeader = [{ colname: 'type', coltext: '类型', }, { colname: 'name', coltext: '商品名称', }, { coln

javascript简单比较日期大小的方法_javascript技巧

本文实例讲述了javascript简单比较日期大小的方法.分享给大家供大家参考,具体如下: //获取起始日期 var startDate=document.all.startdate.value; //转换为日期格式 startDate=startDate.replace(/-/g,"/"); //获取结束日期 var endDate=document.all.enddate.value; endDate=endDate.replace(/-/g,"/"); //如