1.减少HTTP请求
一个正常HTTP请求的流程简述：如在浏览器中输入"www.xxxxxx.com"并按下回车，浏览器再与这个URL指向的服务器建立连接，然后浏览器才能向服务器发送请求信息，服务器在接受到请求的信息后再返回相应的信息，浏览器接收到来自服务器的应答信息后，对这些数据解释执行。
网速相同的条件下，下载一个100KB的图片比下载两个50KB的图片要快。所以，请减少HTTP请求。
解决办法：
合并图片（css sprites），合并CSS和JS文件；图片较多的页面也可以使用 lazyLoad 等技术进行优化。
2.请正确理解 Repaint 和 Reflow
Repaint(重绘)就是在一个元素的外观被改变，但没有改变布局(宽高)的情况下发生，如改变visibility、outline、背景色等等。
Reflow(重排)就是DOM的变化影响到了元素的几何属性（宽和高），浏览器会重新计算元素的几何属性，会使渲染树中受到影响的部分失效，浏览器会验证DOM树上的所有其它结点的visibility属性，这也是Reflow低效的原因。
3.请减少对DOM的操作
对DOM操作的代价是高昂的，这在网页应用中的通常是一个性能瓶颈。在《高性能JavaScript》中这么比喻：“把DOM看成一个岛屿，把JavaScript(ECMAScript)看成另一个岛屿，两者之间以一座收费桥连接”。
解决办法：
修改和访问DOM元素会造成页面的Repaint和Reflow，循环对DOM操作更是罪恶的行为。所以请合理的使用JavaScript变量储存内容，考虑大量DOM元素中循环的性能开销，在循环结束时一次性写入。减少对DOM元素的查询和修改，查询时可将其赋值给局部变量。
4.使用JSON格式来进行数据交换
JSON是一种轻量级的数据交换格式，采用完全独立于语言的文本格式，是理想的数据交换格式。同时，JSON是 JavaScript原生格式，这意味着在 JavaScript 中处理 JSON数据不需要任何特殊的 API 或工具包。
与XML序列化相比，JSON序列化后产生的数据一般要比XML序列化后数据体积小，所以在Facebook等知名网站中都采用了JSON作为数据交换方式。
5.高效使用HTML标签和CSS样式
正确嵌套和层叠
6.使用CDN加速（内容分发网络）
CDN的全称是Content Delivery Network，即内容分发网络。通过在网络各处放置节点服务器，CDN系统能够实时地根据网络流量和各节点的连接、负载状况以及到用户的距离和响应时间等综合信息将用户的请求重新导向离用户最近的服务节点上。
实时性不太好是CDN的致命缺陷。解决方法是在网络内容发生变化时将新的网络内容从服务器端直接传送到缓存器，或者当对网络内容的访问增加时将数据源服务器的网络内容尽可能实时地复制到缓存服务器。
7.将CSS和JS放到外部文件中引用，CSS放头，JS放尾
引入外部文件好处是显而易见的，易维护、易扩展，方便管理和重复利用。
JavaScript是浏览器中的霸主，因为在浏览器在执行JavaScript代码时，不能同时做其它事情，即<script>每次出现都会让页面等待脚本的解析和执行（不论JavaScript是内嵌的还是外链的），JavaScript代码执行完成后，才继续渲染页面。这个也就是JavaScript的阻塞特性。
因为这个阻塞的特点，建议把JavaScript代码放到</body>标签以前，这样既能有效的防止JavaScript的阻塞，又能使得页面的HTML结构能更快的释放。
8. Gzip压缩CSS和JS文件
9.压缩图片和使用图片Sprite技术
10.注意控制Cookie大小和污染
Cookie是本地的磁盘文件，每次浏览器都会去读取相应的Cookie，所以建议去除不必要的Coockie，使Coockie体积尽量小以减少对用户响应的影响；
11.避免重定向。
12.移除重复脚本。
13.配置实体标签ETag。
14.使用AJAX缓存，让网站内容分批加载，局部更新。
15.缓存的使用，添加Expire/Cache-Control头。
前端开发的优化问题？
· （1）减少http请求次数：CSS Sprites, JS、CSS源码压缩、图片大小控制合适；网页Gzip，CDN托管，data缓存 ，图片服务器。
· （2）前端模板 JS+数据，减少由于HTML标签导致的带宽浪费，前端用变量保存AJAX请求结果，每次操作本地变量，不用请求，减少请求次数
· （3）用innerHTML代替DOM操作，减少DOM操作次数，优化javascript性能。
· （4）当需要设置的样式很多时设置className而不是直接操作style。
· （5）少用全局变量、缓存DOM节点查找的结果。减少IO读取操作。
· （6）避免使用CSS Expression（css表达式)又称Dynamic properties(动态属性)。
· （7）图片预加载，将样式表放在顶部，将脚本放在底部 加上时间戳。
· （8）避免在页面的主体布局中使用table，table要等其中的内容完全下载之后才会显示出来，显示比div+css布局慢。
网友评论