3.jpg

一、代码优化的方法
CSS优化：
1、利用继承
Css的继承机制可以帮我们在一定程度上缩减字节数，我们知道css很多属性可以继承，即在父容器设置了默认属性，子容器会默认也使用这些属性。
可继承的属性举例：
所有元素都可以继承的属性：visibility 、cursor
内联元素和块元素可以继承的属性：
Letter-spacing、word-spacing、white-space、line-height、color、font、font-family、font-size、font-style、font-variant、font-weight、text-decoration、text-transform、direction。
块状元素可以继承的属性：Text-indent、text-align；
列表元素可以继承的属性：
List-style、list-style-type、list-style-position、list-style-image
表格元素可以继承的属性：Border-collapse

不可以继承的属性：
Display、margin、border、padding、background、height、min-height、max-height、width、min-width、max-width、overflow、position、left、right、top、bottom、z-index、float、clear、table-layout、vertical-align、page-break-after、page-break-before、unicode-bidi

2、css放在head中，减少repaint和reflow
Css方法在页面的顶部，有利于优化的原因？？？
当浏览器从上到下一遍下载html生成dom tree，一边根据浏览器默认以及现有css生成render tree来渲染页面。当遇到新的css的时候下载并结合现有css重新生成render tree。则刚才的渲染功能就全废了。当我们把所有css放在页面的顶部，就没有重新渲染的过程了。

3、不要用标签或class来限制id。

test .info /div #test这都属于画蛇添足

Id已经可以唯一而且快速的定位到一个元素了。

JavaScript优化总结
1、避免全局查找
在一个函数中尽量将全局对象存储为局部变量来查找，因为访问局部变量的数要更快一些。
function(){
alert(window.location.href+window.location.host);
}
修改为：
funciton(){
var location=window.location;
alert(location.href+location.host);
}

2、使用后测试循环
在js中，我们使用for(;;),while(),for(in)三种循环。for(in)的效率极差。因为他需要查询散列键，只要可以，就应该尽量少用。
for(;;)和while循环，while优于for（；；）,可能for（；；）结构问题，需要经常的跳转。do..while更好。

3、可以用三目运算符替换条件分支，可以提高效率

4、把脚本置于页面底部，可以使页面加载速度更快一些。

5、使用外部JavaScript和CSS
可以调用外部的。cdn公共库：http://www.haorooms.com/post/cdn_all

Web性能优化
1、通过css sprites来整合图像
若页面中有6个小图像，那么浏览器在显示时会分别下载，你可以通过css sprites将这些图像合并成为一个，可以减少页面加载所需要的时间。
Css sprites两个步骤：整合图像，定位图像

2、如果你的css和js较小，可以将css和js内嵌到html页面中，这样可以减少页面加载所需要的文件数，从而加快页面的加载。

3、指定图像尺寸
当浏览器加载页面的html时，有时候需要在图片下载完成前，对页面布局进行定位。如果hmtl里的图片没有指定尺寸，或者代码描述的尺寸和实际的图片尺寸不符合时，浏览器需要在图片下载完成后在回溯到该图片，并重新显示，这将消耗额外的时间。
最好的页面中每一张图片都指定尺寸，不管在html里的img中，还是在css中。

4.jpg

二、js(Event)事件：
//点击添加事件
//它有三个参数，第三个参数若是true，则表示采用事件捕获，若是false，则表示采用事件冒泡。
function addEvent(ele, type, fun) {
if (ele.addEventListener) {
ele.addEventListener(type, fun, false);
} else if (ele.attachEvent) {
ele.attachEvent(type, fun);
}
}
//点击移除事件
function removeEvent(ele, type, fun) {
if (ele.removeEventListener) {
ele.removeEventListener(type, fun, false);
} else if (ele.detachEvent) {
ele.detachEvent(type, fun);
}
}
//阻止默认事件
function prevent(e) {
if (e.preventDefault) {
e.preventDefault();
} else {
e.returnValue = false;
}
}
//阻止冒泡事件
function stop(e) {
if (e.stopPropagation) {
e.stopPropagation();
} else {
e.cancelBubble = true;
}
}
//点击事件
function targets(e) {
e = e || window.event;
if (e.target) {
//获取事件对象
return e.target;
} else {
//获取事件源
return e.srcElement;
}
}

5.jpg

三、$.get()和$.post()和$.ajax()的区别和联系
区别：
$.get()：
通过远程 HTTP GET 请求载入信息。这是一个简单的 GET 请求功能以取代复杂的$.ajax().请求成功时可调用回调函数。
如果需要在出错时执行函数，请使用$.ajax()
$.post()：
通过远程 HTTP POST 请求载入信息。这是一个简单的 POST 请求功能以取代复杂的$.ajax().请求成功时可调用回调函数。
如果需要在出错时执行函数，请使用$.ajax()
$.ajax()：
通过 HTTP 请求加载远程数据。jQuery 底层 AJAX 实现。
联系：
前两者是$.ajax()的简单易用实现，以方便我们的使用。
当把$.ajax()中的参数type设为Get或Post，则分别同get()或post()

样式调整：
function setFontSize() {
var doc = document,
width = doc.documentElement.clientWidth,
times = width / 320;
doc.documentElement.style.fontSize = (times * 100) + "px";
}
setFontSize();
window.onresize = function() {
setFontSize();
}

(function(doc, win) {
var docEl = doc.documentElement,
resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
recalc = function() {
var clientWidth = docEl.clientWidth;
if (!clientWidth) return;
docEl.style.fontSize = 100 * (clientWidth / 750) + 'px';
};
if (!doc.addEventListener) return;
win.addEventListener(resizeEvt, recalc, false);
doc.addEventListener('DOMContentLoaded', recalc, false);
})(document, window);

6.jpg