转载javascript性能优化方面的知识总结 - SegmentFault

##前言

一直在学习JavaScript，也有看过《犀利开发Jquery内核详解与实践》，对这本书的评价只有两个字犀利，可能是对JavaScript理解的还不够透彻异或是自己太笨，更多的是自己不擅于思考懒得思考以至于里面说的一些精髓都没有太深入的理解。

鉴于想让自己有一个提升，进不了一个更加广阔的天地，总得找一个属于自己的居所好好生存，所以平时会有意无意的去积累一些使用jQuerry的常用知识，特别是对于性能要求这一块，总是会想是不是有更好的方式来实现。

下面是我总结的一些小技巧，仅供参考。(我先会说一个总标题，然后用一小段话来说明这个意思 再最后用一个demo来简单言明)

##避免全局查找

在一个函数中会用到全局对象存储为局部变量来减少全局查找，因为访问局部变量的速度要比访问全局变量的速度更快些

1
2
3
4
5
6
7
8
9

function search() {
    //当我要使用当前页面地址和主机域名
    alert(window.location.href + window.location.host);
}
//最好的方式是如下这样  先用一个简单变量保存起来
function search() {
    var location = window.location;
    alert(location.href + location.host);
}

##定时器

如果针对的是不断运行的代码，不应该使用setTimeout，而应该是用setInterval，因为setTimeout每一次都会初始化一个定时器，而setInterval只会在开始的时候初始化一个定时器

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

var timeoutTimes = 0;
function timeout() {
    timeoutTimes++;
    if (timeoutTimes < 10) {
        setTimeout(timeout, 10);
    }
}
timeout();
//可以替换为：
var intervalTimes = 0;
function interval() {
    intervalTimes++;
    if (intervalTimes >= 10) {
        clearInterval(interv);
    }
}
var interv = setInterval(interval, 10);

##字符串连接

如果要连接多个字符串，应该少使用+=，如

1
2
3

s+=a;
s+=b;
s+=c;

应该写成s+=a + b + c；

而如果是收集字符串，比如多次对同一个字符串进行+=操作的话，最好使用一个缓存，使用JavaScript数组来收集，最后使用join方法连接起来

1
2
3
4
5

var buf = [];
for (var i = 0; i < 100; i++) {
    buf.push(i.toString());
}
var all = buf.join("");

##避免with语句

和函数类似，with语句会创建自己的作用域，因此会增加其中执行的代码的作用域链的长度，由于额外的作用域链的查找，在with语句中执行的代码肯定会比外面执行的代码要慢，在能不使用with语句的时候尽量不要使用with语句。

1
2
3
4
5
6
7
8

with (a.b.c.d) {
    property1 = 1;
    property2 = 2;
}
//可以替换为：
var obj = a.b.c.d;
obj.property1 = 1;
obj.property2 = 2;

##数字转换成字符串

般最好用"" + 1来将数字转换成字符串，虽然看起来比较丑一点，但事实上这个效率是最高的，性能上来说：

(“” +) > String() > .toString() > new String()

##浮点数转换成整型

很多人喜欢使用parseInt()，其实parseInt()是用于将字符串转换成数字，而不是浮点数和整型之间的转换，我们应该使用Math.floor()或者Math.round()

Yahoo团队总结的关于网站性能优化的经验，非常有参考价值。
英文原文：http://developer.yahoo.com/performance/rules.html

##1、尽量减少HTTP请求次数

终端用户响应的时间中，有80%用于下载各项内容。这部分时间包括下载页面中的图像、样式表、脚本、Flash等。通过减少页面中的元素可以减少 HTTP请求的次数。这是提高网页速度的关键步骤。
减少页面组件的方法其实就是简化页面设计。那么有没有一种方法既能保持页面内容的丰富性又能达到加快响应时间的目的呢？这里有几条减少HTTP请求次数同时又可能保持页面内容丰富的技术。
合并文件是通过把所有的脚本放到一个文件中来减少HTTP请求的方法，如可以简单地把所有的CSS文件都放入一个样式表中。当脚本或者样式表在不同页面中使用时需要做不同的修改，这可能会相对麻烦点，但即便如此也要把这个方法作为改善页面性能的重要一步。
CSS Sprites是减少图像请求的有效方法。把所有的背景图像都放到一个图片文件中，然后通过CSS的background-image和 background-position属性来显示图片的不同部分；
图片地图是把多张图片整合到一张图片中。虽然文件的总体大小不会改变，但是可以减少HTTP请求次数。图片地图只有在图片的所有组成部分在页面中是紧挨在 一起的时候才能使用，如导航栏。确定图片的坐标和可能会比较繁琐且容易出错，同时使用图片地图导航也不具有可读性，因此不推荐这种方法；
内联图像是使用data:URL scheme的方法把图像数据加载页面中。这可能会增加页面的大小。把内联图像放到样式表（可缓存）中可以减少HTTP请求同时又避免增加页面文件的大小。但是内联图像现在还没有得到主流浏览器的支持。
减少页面的HTTP请求次数是你首先要做的一步。这是改进首次访问用户等待时间的最重要的方法。如同Tenni Theurer的他的博客Browser Cahe Usage – Exposed!中所说，HTTP请求在无缓存情况下占去了40%到60%的响应时间。让那些初次访问你网站的人获得更加快速的体验吧！

##2、减少DNS查找次数

域名系统（DNS）提供了域名和IP的对应关系，就像电话本中人名和他们的电话号码的关系一样。当你在浏览器地址栏中输入www.dudo.org 时，DNS解析服务器就会返回这个域名对应的IP地址。DNS解析的过程同样也是需要时间的。一般情况下返回给定域名对应的IP地址会花费20到120毫秒的时间。而且在这个过程中浏览器什么都不会做直到DNS查找完毕。
缓存DNS查找可以改善页面性能。这种缓存需要一个特定的缓存服务器，这种服务器一般属于用户的ISP提供商或者本地局域网控制，但是它同样会在用户使用 的计算机上产生缓存。DNS信息会保留在操作系统的DNS缓存中（微软Windows系统中DNS Client Service）。大多数浏览器有独立于操作系统以外的自己的缓存。由于浏览器有自己的缓存记录，因此在一次请求中它不会受到操作系统的影响。
Internet Explorer默认情况下对DNS查找记录的缓存时间为30分钟，它在注册表中的键值为DnsCacheTimeout。Firefox对DNS的查找 记录缓存时间为1分钟，它在配置文件中的选项为network.dnsCacheExpiration（Fasterfox把这个选项改为了1小时）。
当客户端中的DNS缓存都为空时（浏览器和操作系统都为空），DNS查找的次数和页面中主机名的数量相同。这其中包括页面中URL、图片、脚本文件、样式表、Flash对象等包含的主机名。减少主机名的数量可以减少DNS查找次数。
减少主机名的数量还可以减少页面中并行下载的数量。减少DNS查找次数可以节省响应时间，但是减少并行下载却会增加响应时间。我的指导原则是把这些页面中 的内容分割成至少两部分但不超过四部分。这种结果就是在减少DNS查找次数和保持较高程度并行下载两者之间的权衡了。

##3、避免跳转

跳转是使用301和302代码实现的。下面是一个响应代码为301的HTTP头：
HTTP/1.1 301 Moved Permanently
Location: http://example.com/newuri
Content-Type: text/html
浏览器会把用户指向到Location中指定的URL。头文件中的所有信息在一次跳转中都是必需的，内容部分可以为空。不管他们的名称，301和302 响应都不会被缓存除非增加一个额外的头选项，如Expires或者Cache-Control来指定它缓存。<meat />元素的刷新标签和JavaScript也可以实现URL的跳转，但是如果你必须要跳转的时候，最好的方法就是使用标准的3XXHTTP状态代 码，这主要是为了确保“后退”按钮可以正确地使用。
但是要记住跳转会降低用户体验。在用户和HTML文档中间增加一个跳转，会拖延页面中所有元素的显示，因为在HTML文件被加载前任何文件（图像、 Flash等）都不会被下载。
有一种经常被网页开发者忽略却往往十分浪费响应时间的跳转现象。这种现象发生在当URL本该有斜杠（/）却被忽略掉时。例如，当我们要访问http: //astrology.yahoo.com/astrology 时，实际上返回的是一个包含301代码的跳转，它指向的是http://astrology.yahoo.com/astrology/ （注意末尾的斜杠）。在Apache服务器中可以使用Alias 或者 mod_rewrite或者the DirectorySlash来避免。
连接新网站和旧网站是跳转功能经常被用到的另一种情况。这种情况下往往要连接网站的不同内容然后根据用户的不同类型（如浏览器类型、用户账号所属类型）来 进行跳转。使用跳转来实现两个网站的切换十分简单，需要的代码量也不多。尽管使用这种方法对于开发者来说可以降低复杂程度，但是它同样降低用户体验。一个 可替代方法就是如果两者在同一台服务器上时使用Alias和mod_rewrite和实现。如果是因为域名的不同而采用跳转，那么可以通过使用 Alias或者mod_rewirte建立CNAME（保存一个域名和另外一个域名之间关系的DNS记录）来替代。

##4、可缓存的AJAX

Ajax经常被提及的一个好处就是由于其从后台服务器传输信息的异步性而为用户带来的反馈的即时性。但是，使用Ajax并不能保证用户不会在等待异步的 JavaScript和XML响应上花费时间。在很多应用中，用户是否需要等待响应取决于Ajax如何来使用。例如，在一个基于Web的Email客户端 中，用户必须等待Ajax返回符合他们条件的邮件查询结果。记住一点，“异步”并不意味着“即时”，这很重要。
为了提高性能，优化Ajax响应是很重要的。提高Ajxa性能的措施中最重要的方法就是使响应具有可缓存性，具体的讨论可以查看Add an Expires or a Cache-Control Header。其它的几条规则也同样适用于Ajax：
Gizp压缩文件
减少DNS查找次数
精简JavaScript
避免跳转
配置ETags
让我们来看一个例子：一个Web2.0的Email客户端会使用Ajax来自动完成对用户地址薄的下载。如果用户在上次使用过Email web应用程序后没有对地址薄作任何的修改，而且Ajax响应通过Expire或者Cacke-Control头来实现缓存，那么就可以直接从上一次的缓存中读取地址薄了。必须告知浏览器是使用缓存中的地址薄还是发送一个新的请求。这可以通过为读取地址薄的Ajax URL增加一个含有上次编辑时间的时间戳来实现，例如，&t=11900241612等。如果地址薄在上次下载后没有被编辑过，时间戳就不变，则从浏览器的缓存中加载从而减少了一次HTTP请求过程。如果用户修改过地址薄，时间戳就会用来确定新的URL和缓存响应并不匹配，浏览器就会重要请求更新地址薄。

即使你的Ajxa响应是动态生成的，哪怕它只适用于一个用户，那么它也应该被缓存起来。这样做可以使你的Web2.0应用程序更加快捷。

##5、推迟加载内容

你可以仔细看一下你的网页，问问自己“哪些内容是页面呈现时所必需首先加载的？哪些内容和结构可以稍后再加载？
把整个过程按照onload事件分隔成两部分，JavaScript是一个理想的选择。例如，如果你有用于实现拖放和动画的JavaScript，那么它 就以等待稍后加载，因为页面上的拖放元素是在初始化呈现之后才发生的。其它的例如隐藏部分的内容（用户操作之后才显现的内容）和处于折叠部分的图像也可以 推迟加载
工具可以节省你的工作量：YUI Image Loader可以帮你推迟加载折叠部分的图片，YUI Get utility是包含JS和 CSS的便捷方法。比如你可以打开Firebug的Net选项卡看一下Yahoo的首页。
当性能目标和其它网站开发实践一致时就会相得益彰。这种情况下，通过程序提高网站性能的方法告诉我们，在支持JavaScript的情况下，可以先去除用 户体验，不过这要保证你的网站在没有JavaScript也可以正常运行。在确定页面运行正常后，再加载脚本来实现如拖放和动画等更加花哨的效果。

JDBC, Java Database Connecive, Java 数据库连接，是一组专门负责连接并操作数据库的标准，在整个JDBC 中实际上大量的提供的是接口。针对于各个不同的数据库生产商 ，只要想使用JAVA 进行数据库的开发，则对这些标准有所支持。

JDBC 在使用中常见的有以下三类：

JDBC-ODBC 桥连接：是SUN 在JDK的开发包中提供的最标准的一套JDBC 操作类库，使用的时候将JDBC-ODB-数据库，中间要经过一个ODBC 的连接，那么就意味着整体的性能将会降低，所以在开发中是绝对不会去使用JDBC-ODBC的连接方式的。

JDBC 连接，使用各个数据库提供商给定的数据库驱动程序，完成JDBC的开发，使用的时候需要在classpath中配置数据库的驱动程序

JDBC 网络连接：主要使用通过网络连接数据库

JDBC 的操作步骤

在进行JDBC 操作的时候可以按照以下的步骤完成：

1、加载数据库驱动程序，加载的时候需要将驱动程序配置到classpath之中

2、连接数据库，通过Connection 接口和 DriverManager 类完成

3、操作数据库，通过Statement、PreparedStatement、ResultSet 三个接口完成

4、关闭数据库，在实际开发中数据库资源非常有限，操作完之后必须关闭

数据库连接操作

在JDBC 的操作中，如果要想进行数据库的连接，则必须按照以上的几步完成

1、通过Class.forName()加载数据库的驱动程序

2、通过DriverManager 类进行数据库的连接，连接的时候要输入数据库的连接地址、用户名、密码

3、通过Connection 接口接收连接

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

package org.connectiondemo;

import java.sql.Connection;
import java.sql.DriverManager;

public class ConnectionJDBC {

    /**
     * @param args
     */
    //驱动程序就是之前在classpath中配置的JDBC的驱动程序的JAR 包中
    public static final String DBDRIVER = "com.mysql.jdbc.Driver";
    //连接地址是由各个数据库生产商单独提供的，所以需要单独记住
    public static final String DBURL = "jdbc:mysql://localhost:3306/test";
    //连接数据库的用户名
    public static final String DBUSER = "root";
    //连接数据库的密码
    public static final String DBPASS = "";
    
    
    public static void main(String[] args) throws Exception {
        Connection con = null; //表示数据库的连接对象
        Class.forName(DBDRIVER); //1、使用CLASS 类加载驱动程序
        con = DriverManager.getConnection(DBURL,DBUSER,DBPASS); //2、连接数据库
        System.out.println(con);
        con.close(); // 3、关闭数据库
    }

}

###判断是否支持css属性
转自判断浏览器是否支持指定css属性和指定值

1
2
3
4
5
6
7
8
9

function isSupportCSS(name, value) {
    var element = document.createElement('div');
    if (name in element.style) {    
        element.style[name] = value;    
        return element.style[name] === value;
    } else {    
        return false;
    }
}

1
2
3
4
5
6
7
8
9
10
11
12

if ('textShadow' in document.documentElement.style) {
    alert(1);
} else {
    alert(0);
}

if ('MozTransform' in document.documentElement.style || 'WebkitTransform' in
    document.documentElement.style || 'OTransform' in document.documentElement.style || 'msTransform' in document.documentElement.style) {
    alert(1);
} else {
    alert(0);
}

###动态插入ul>li*20到body最前

1
2
3
4
5
6
7
8
9

var ul = document.createElement('ul');
var tmp = document.createDocumentFragment();
for (var i = 0; i < 20; i++) {
    var li = document.createElement('li');
    li.innerHTML = 'i=' + i;
    tmp.appendChild(li);
}
ul.appendChild(tmp);
document.body.insertBefore(ul, document.body.firstChild);

###统计数组中的重复字符串最多的数量

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

//将字符串的字符保存在一个hash table中，key是字符，value是这个字符出现的次数
var arr = ["asdf", "dsf", "asdf", "wew"];
var obj = {};
for (var i = 0, l = arr.length; i < l; i++) {
    var key = arr[i];
    if (typeof obj[key] == 'undefined') {
        obj[key] = 1;
    } else {
        obj[key] ++;
    }
}
/*遍历这个hash table，获取value最大的key和value*/
var max = 0;
var max_key = "";
var key;
for (key in obj) {
    if (max < obj[key]) {
        max = obj[key];
        max_key = key;
    }
}
console.log("max:" + max + " max_key:" + max_key);

从输入 URL 到页面加载完成的过程中都发生了什么事情？

百度2015面试：在浏览器地址栏输入URL，按下回车后究竟发生了什么？ - 生命在于折腾 - 博客频道 - CSDN.NET

当你在浏览器中输入Google.com并且按下回车之后发生了什么？

现代浏览器的工作原理

当你输入一个网址，实际会发生什么?