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事件处理之前被调用。
时间有限,今天先记录这么多吧
javascript简单性能问题及学习笔记的更多相关文章
- 《JavaScript DOM 编程艺术》 学习笔记
目录 <JavaScript DOM 编程艺术> 学习笔记 第一章 js简史 第二章 js语法 准备工作 语法 第三章 DOM DOM中的D DOM中的O DOM中的M 第四章 js图片库 ...
- 路由其实也可以很简单-------Asp.net WebAPI学习笔记(一) ASP.NET WebApi技术从入门到实战演练 C#面向服务WebService从入门到精通 DataTable与List<T>相互转换
路由其实也可以很简单-------Asp.net WebAPI学习笔记(一) MVC也好,WebAPI也好,据我所知,有部分人是因为复杂的路由,而不想去学的.曾经见过一位程序猿,在他MVC程序中, ...
- JavaScript闭包(Closure)学习笔记
闭包(closure)是JavaScript语言的一个难点,也是它的特色,很多高级应用都要依靠闭包实现. 下面就是我的学习笔记,对于JavaScript初学者应该是很有用的. 一.变量的作用域 要理解 ...
- 《JavaScript DOM编程艺术》学习笔记(一)
这本书是我听说学习前端基础入门书籍,于是就开始看了,大概是从5月10号开始看的吧,一直看到现在,差不多要看完了,书是挺厚的...286页,不过比起JAVASCRIPT权威指南来说还是差多了,权威指南才 ...
- Javascript垃圾回收机制(学习笔记)
1,javascript具有自动的垃圾回收机制,自动内存的分配和无用内存的回收都可以自动管理.垃圾回收器周期性的执行: 2,Javascript的垃圾回收策略分为:引用计数和标记清除: 2.1 标记清 ...
- JavaScript设计模式之观察者模式(学习笔记)
设计模式(Design Pattern)对于软件开发来说其重要性不言而喻,代码可复用.可维护.可扩展一直都是软件工程中的追求!对于我一个学javascript的人来说,理解设计模式似乎有些困难,对仅切 ...
- Linux性能优化实战学习笔记:第十八讲
一.内存的分配和回收 1.管理内存的过程中,也很容易发生各种各样的“事故”, 对应用程序来说,动态内存的分配和回收,是既核心又复杂的一的一个逻辑功能模块.管理内存的过程中,也很容易发生各种各样的“事故 ...
- Linux性能优化实战学习笔记:第三十二讲
一.上节总结 专栏更新至今,四大基础模块的第三个模块——文件系统和磁盘 I/O 篇,我们就已经学完了.很开心你还没有掉队,仍然在积极学习思考和实践操作,并且热情地留言与讨论. 今天是性能优化的第四期. ...
- Linux性能优化实战学习笔记:第三十三讲
一.上节回顾 前几节,我们一起学习了文件系统和磁盘 I/O 的工作原理,以及相应的性能分析和优化方法.接下来,我们将进入下一个重要模块—— Linux 的网络子系统. 由于网络处理的流程最复杂,跟我们 ...
随机推荐
- idea导入或打开项目配置问题
learn项目遇到问题: 1.IntelliJ Idea编译报错:请使用 -source 7 或更高版本以启用 diamond 运算符 file - project structure或者直接快捷键: ...
- web客户端安全之跨站脚本攻击
跨站脚本攻击,Cross-site script,是Web程序中最常见的漏洞.为了和CSS层叠样式表区分开,所以取名为 XSS. 一.XSS的重点 跨域和客户端执行. 二.XSS的原理 攻击者向有XS ...
- Centos7(Firewall)防火墙开启常见端口命令
使用云服务器的,一定要注意开启安全组配置的响应端口 Centos7默认安装了firewalld,如果没有安装的话,则需要YUM命令安装:firewalld真的用不习惯,与之前的iptable防火墙区别 ...
- nginx_lua vs nginx+php 应用场景
在我的印象中很多人还是选择nginx+php这种组合搭配,你的选择是nginx+lua,那么nginx+lua比和php的组合优势在哪里?清无:首先,Nginx+php之间是要有进程之间通信的,这样以 ...
- Codeforces Round #228 (Div. 1) C. Fox and Card Game 博弈
C. Fox and Card Game 题目连接: http://codeforces.com/contest/388/problem/C Description Fox Ciel is playi ...
- Codeforces Round #288 (Div. 2) B. Anton and currency you all know 贪心
B. Anton and currency you all know time limit per test 0.5 seconds memory limit per test 256 megabyt ...
- 关于clipboard插件的使用问题
概述: clipboard.js是一款轻量级的实现复制文本到剪贴板功能的JavaScript插件.通过该插件可以将输入框,文本域,DIV元素中的文本等文本内容复制到剪贴板中 clipboard.js ...
- C#访问修饰符总结[转]
http://blog.csdn.net/tjvictor/article/details/4293354 C#共有五种访问修饰符:public.private.protected.internal. ...
- 使用Chrome快速实现数据的抓取(三)——JQuery
使用Chrome抓取页面一个非常方便的地方就是它可以执行JS,也就是说我们可以通过JS函数获取我们想要的数据.一个非常强大易用的库就是Jquery,本文就简单的介绍一下使用Chrome获取数据时Jqu ...
- Oracle体系结构及备份(十六)——bg-ckpt
一 什么是CKPT进程 作用: 发出信号给DBWn 更新数据文件头 更新控制文件 At specific times, all modified databasebuffers in the sys ...