web性能优化

高性能JavaScript

　　1.脚本

　　　　把script脚本放到body标签底部（ </body>）

　　　　把多个script脚本合成一个

　　　　无阻塞加载脚本（延迟defer、动态创建script、XMLHttpRequest脚本注入）　　　

　　2.变量

　　　　减少变量的搜索过程

　　　　尽量使用局部变量

　　　　把对象成员、数组元素、跨作用域变量保存为局部变量

　　3.DOM

　　　　减少访问DOM次数

　　　　使用局部变量保存对DOM的引用

　　　　把HTML集合的长度保存在一个变量中、把HTML集合拷贝到数组中

　　　　使用速度更快的API

　　　　留意重绘和重排

　　　　动画中使用绝对定位、脱离文档流

　　　　使用事件委托减少事件处理数量

　　4.算法 流程

　　　　for、while、do-while循环性能相似

　　　　避免使用for-in循环、除非要遍历一个属性数量未知的对象

　　　　减少循环迭代次数和迭代的运算量

　　　　有时switch比if else快

　　　　判断条件比较多使用查找表，使用数组或普通对象来构建查找表

　　5.字符串

　　　　数组项连接在<=ie7的浏览器中快，推荐简单的+，+=字符串连接

　　6.浏览器线程、定时器、web workers

　　　　任何javascript任务都不应执行超过100毫秒

　　　　定时器可以用来让代码延迟执行

　　　　web workers允许javascript在UI线程外执行

　　7.数据

　　　　减少http请求次数，合并javascript、css.

　　　　缩短页面加载时间，主要内容加载完，使用ajax加载次要文件

　　　　确保代码错误不要输出给用户，并在服务器处理

　　　　知道何时使用成熟的库(框架)，何时编写自己的底层ajax代码

　　8.实践

　　　　避免使用eval()和Function构造器双重求值，给定时器(setTimeout,setInterval)传人函数而不是字符串

　　　　使用直接量创建数组、对象

　　　　避免重复工作，使用延迟加载和条件预加载

　　　　数学计算时考虑使用位运算符

　　　　尽量使用原生方法

　　　　合并，压缩，缓存javascript文件 在服务器压缩 使用CDN

　　　　使用网络分析工具，性能分析工具

  -----------------------------------------------------------

 高性能网站建设指南（http://stevesouders.com/hpws）

　　　　HTTP（Hyper Text Transfer Protocol 超文本传输协议）是浏览器和服务器通过internet进行相互通信的协议（由请求和响应构成）。

　　　　浏览器向一个特定URL发送HTTP请求，URL对应的宿主服务器返回HTTP响应。

　　　　GET请求包含URL，一个头。HTTP响应包含状态码、头、响应体。

　　　　HTTP构建在TCP（Transmission Control Protocol 传输控制协议）之上。

　　1.　减少HTTP请求　

　　　　　　图片地图：在一张图片上关联多个URL

　　　　　　css sprite：把多张背景图片整合到一张大图片中

　　　　　　内联图片：<img  src="https://img-blog.csdnimg.cn/2022010616320256911.gif" />

　　　　　　合并javascript和css文件

　　2. 使用内容发布网络(CDN) 

　　　　内容发布网络是一组分布在多个不同地理位置的web服务器，用于更加有效的向用户发布内容。　　　　

　　　　缩短响应时间，备份、扩展存储、缓存，缓和流量峰值压力

　　3. 添加Expires头

　　　　web页面有大量的组件，访问者会进行很多HTTP请求，通过一个长久的Expires头，使这些组件可以被缓存；

　　　　让浏览器缓存图片、样式、脚本

　　4. 压缩组件

　　　　减小HTTP响应文件的大小，减少响应时间

　　　　gzip压缩是流行的压缩方法

　　5. 将CSS样式表放在顶部　　

　　　　避免白屏和无样式闪烁　使用link标签将样式表放在文档head中

　　6. 将javascript脚本放在底部

　　　　无阻塞加载脚本 并行下载　　

　　7. 避免使用CSS表达式(expression)　　　　

.box{ width:expression( document.body.clientWidth < 960 ? "960px" : "auto" ); min-width:960px; }

 　　8. 使用外部javascript和css　　

 　　　　

 　　9. 减少DNS查找

　　　　缓存DNS查找

　　 10. 压缩javascript代码

　　　　　从代码中移除不必要的字符、空格、注释　　

　　  11. 避免重定向

　　　　重定向是将用户从一个URL重新路由到另一个URL　　

http://www.a.com/  //有斜线 （建议加上）
http://www.a.com   //无斜线

　　　12. 移除重复的脚本

　　　13. 配置或移除Etag　　

　　　　　　实体标签(Etag)是web服务器和浏览器用于确认缓存组件的有效性的一种机制。

　　　　　　Etag用于检测浏览器缓存中的组件与原始服务器上的组件是否匹配。

　　　14. 使ajax可缓存　　　　　　

  -----------------------------------------------------------

 高性能网站建设进阶指南

　　　1. 理解ajax性能

 　　  2. 创建快速响应的web应用　

 　　  3. 拆分初始化负载

 　　  4. 无阻塞加载脚本

　　　　　XHR Eval 

　　　　　XHR Injection

　　　　　Script in Iframe

　　　　　Script Defer

　　　　　document.write Script Tag

　　   5. 整合异步脚本

　　　6. 布置行内脚本　　

　　　7. 编写高效的javascript (高性能javascript)

　　　8. 可伸缩的Comet

　　　　　简单的轮询　　　　　　

function xhrRequest(){
	var xhr = new XMLHttpRequest();
	xhr.onreadystatechange = function(){
	    if( xhr.readyState == 4 && xhr.status == 200 ){
	        //处理返回的数据
	    }
	};
	xhr.open('GET','test.php',true);
	xhr.send(null);
}
setTimeout(function(){
	xhrRequest()
},2000);

 　　　　　长轮询

function longPoll(url,callback){
	var xhr = new XMLHttpRequest();
	xhr.onreadystatechange = function(){
	    if( xhr.readyState == 4 && xhr.status == 200 ){
	        callback(xhr.responseText);
	        //发送另一个请求，重新连接服务器
	        xhr.open('GET',url,true);
			xhr.send(null);	    }
	};
	xhr.open('GET',url,true);
	xhr.send(null);
}

 　　　9. 超越Gzip压缩　　　

　　　　　　使用事件委托

　　　　　　使用相对URL

　　　　　　移除空白

　　　　　　移除属性的引号

　　　　　　避免行内样式

　　　　　　为javascript变量设置别名

　　　10. 图片优化　　　　　　

　　　　　　使用合适的图片格式

　　　　　　优化png图片

　　　　　　避免使用A　　lphaImageLoader

　　　　　　使用并优化 css sprite

　　　　　　模块化的方法建立 css sprite

　　　　　　不要再HTML中缩放图片

　　　　　　缓存图片

 　　　11. 划分主域　　

　　　 12. 尽早刷新文档的输出　　　

　　　 13. 少用iframe(内嵌frame)

　　　　　　开销最高的DOM元素

　　　　　　阻塞onload事件

　　　 14. 简化css选择符　　　

　　　　　　css选择符是从右到左进行匹配的

　　　　　　避免使用通配规则

　　　　　　不要限定 ID 选择符

　　　　　　不要限定类选择符

　　　　　　避免使用后代、子选择符

　　　　　　依靠继承

   -----------------------------------------------------------

 

转载于:https://www.cnblogs.com/eyeear/p/4638703.html