最近在看一本书:《高性能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简单性能问题及学习笔记的更多相关文章

  1. 《JavaScript DOM 编程艺术》 学习笔记

    目录 <JavaScript DOM 编程艺术> 学习笔记 第一章 js简史 第二章 js语法 准备工作 语法 第三章 DOM DOM中的D DOM中的O DOM中的M 第四章 js图片库 ...

  2. 路由其实也可以很简单-------Asp.net WebAPI学习笔记(一) ASP.NET WebApi技术从入门到实战演练 C#面向服务WebService从入门到精通 DataTable与List<T>相互转换

    路由其实也可以很简单-------Asp.net WebAPI学习笔记(一)   MVC也好,WebAPI也好,据我所知,有部分人是因为复杂的路由,而不想去学的.曾经见过一位程序猿,在他MVC程序中, ...

  3. JavaScript闭包(Closure)学习笔记

    闭包(closure)是JavaScript语言的一个难点,也是它的特色,很多高级应用都要依靠闭包实现. 下面就是我的学习笔记,对于JavaScript初学者应该是很有用的. 一.变量的作用域 要理解 ...

  4. 《JavaScript DOM编程艺术》学习笔记(一)

    这本书是我听说学习前端基础入门书籍,于是就开始看了,大概是从5月10号开始看的吧,一直看到现在,差不多要看完了,书是挺厚的...286页,不过比起JAVASCRIPT权威指南来说还是差多了,权威指南才 ...

  5. Javascript垃圾回收机制(学习笔记)

    1,javascript具有自动的垃圾回收机制,自动内存的分配和无用内存的回收都可以自动管理.垃圾回收器周期性的执行: 2,Javascript的垃圾回收策略分为:引用计数和标记清除: 2.1 标记清 ...

  6. JavaScript设计模式之观察者模式(学习笔记)

    设计模式(Design Pattern)对于软件开发来说其重要性不言而喻,代码可复用.可维护.可扩展一直都是软件工程中的追求!对于我一个学javascript的人来说,理解设计模式似乎有些困难,对仅切 ...

  7. Linux性能优化实战学习笔记:第十八讲

    一.内存的分配和回收 1.管理内存的过程中,也很容易发生各种各样的“事故”, 对应用程序来说,动态内存的分配和回收,是既核心又复杂的一的一个逻辑功能模块.管理内存的过程中,也很容易发生各种各样的“事故 ...

  8. Linux性能优化实战学习笔记:第三十二讲

    一.上节总结 专栏更新至今,四大基础模块的第三个模块——文件系统和磁盘 I/O 篇,我们就已经学完了.很开心你还没有掉队,仍然在积极学习思考和实践操作,并且热情地留言与讨论. 今天是性能优化的第四期. ...

  9. Linux性能优化实战学习笔记:第三十三讲

    一.上节回顾 前几节,我们一起学习了文件系统和磁盘 I/O 的工作原理,以及相应的性能分析和优化方法.接下来,我们将进入下一个重要模块—— Linux 的网络子系统. 由于网络处理的流程最复杂,跟我们 ...

随机推荐

  1. CSUOJ 1040 Round-number

    Description Most of the time when rounding a given number, it is customary to round to some multiple ...

  2. 快递鸟电子面单打印功能基于java

    之前的后天管理系统的电子面单打印使用的是灵通打单. 使用相对比较麻烦,需要到处Excel之后再导入,麻烦. 快递鸟有电子面单api,后台系统直接对接很是方便,不过也遇到了好些问题. 不难是不难,但是遇 ...

  3. JAVAEE——宜立方商城03:Nginx负载均衡高可用、Keepalived+Nginx实现主备

    1 nginx负载均衡高可用 1.1 什么是负载均衡高可用 nginx作为负载均衡器,所有请求都到了nginx,可见nginx处于非常重点的位置,如果nginx服务器宕机后端web服务将无法提供服务, ...

  4. Vue图片懒加载插件

    图片懒加载是一个很常用的功能,特别是一些电商平台,这对性能优化至关重要.今天就用vue来实现一个图片懒加载的插件. 这篇博客采用"三步走"战略--Vue.use().Vue.dir ...

  5. 哪种写法更好?<script></script> vs/or <script type=”text/javasript”></script>

    一直很奇怪 哪种写法更好<script type=“text/javascript”>…</script> or <script>…</script>? ...

  6. 错误: No API token found for service account "default",

    [root@kubernetes-master pods]# kubectl create -f mysql.yaml Error from server (ServerTimeout): error ...

  7. Centos7下shell脚本添加开机自启动

    添加开机自启脚本,注意都需要用绝对路径 psubscribe.sh脚本中的内容: nohup /usr/bin/php -f /data/aliyun51015cn/redisChannel/psub ...

  8. 仅100行的JavaScript DOM操作类库

    如果你构建过Web引用程序,你可能处理过很多DOM操作.访问和操作DOM元素几乎是每一个Web应用程序的通用需求.我们我们经常从不同的控件收集信息,我们需要设置value值,修改div或span标签的 ...

  9. CF980E The Number Games【树链剖分/线段树】

    CF980E The Number Games 题意翻译 Panel 国将举办名为数字游戏的年度表演.每个省派出一名选手. 国家有 n 个编号从 1 到 n 的省,每个省刚好有一条路径将其与其他省相连 ...

  10. play framework系列之打包war

    概览 Play framwork 是我们一直在使用的框架,从刚开始的简单使用,乱起八糟的jar包引用,项目组成员之间的下载项目之后的引用问题等,遇到各种问题,我都一一解决,我将在这个系列中奉上解决方案 ...