前端优化
1、减少HTTP请求: 合并图片(如css sprites，内置图片使用数据)、合并CSS、JS
2、CDN(内容分发网络): 尽可能避开互联网上有可能影响数据传输速度和稳定性的瓶颈和环节，使内容传输的更快、更稳定
通过在各地放置节点服务器，CDN可以根据用户的连接距离、负载状况、响应时间等，来为用户选择一个最近的服务器
3、为文件头指定Expires或Cache-Control: 设置资源的缓存时间
4、避免空的src和href: 这两个属性的标签如link，script，img，iframe等
5、Gzip压缩内容: 服务器对文件进行Gzip压缩，浏览器拿到资源对文件进行解压缩，来减少文件体积
6、CSS放到顶部: 在网速慢的情况会出现，DOM加载完成，没有渲染css，加载到样式的时候才进行重新渲染样式
7、JS放到底部: 避免脚本阻塞文档的展示，document.wirte()可以阻止文档的展示
8、避免使用CSS表达式: CSS表达式的计算频率会影响前端的性能
9、将CSS和JS使用外部文件引用: 减少请求数量、利用性、可被缓存，对代码的维护性
10、减少DNS查询: 一个网站有多域，如图片、css、js各存在不同域，这种访问的时候就会存在多域的DNS查询
缓存常用域名的解析值，但是如果网站涉及多域名，在对每一个域名访问时都需要先解析出IP地址，可以对DNS先进行缓存 <link rel="dns-prefetch" href="http//t1.we.com">
11、对CSS和JS代码进行压缩合并: 目的是减少文件体积，gulp、webpack前端构建工具来进行压缩和合并
12、避免重定向: 对搜索引擎不友好
301: 永久重定向，访问文件A的资源的位置，服务器指向了另一个位置来找到A
302: 临时重定向，请求文件被找到了，但不在这个位置，服务器会发给浏览器所在的位置，之后浏览器会重发取到位置的请求
13、移除重复的脚本:
14、配置ETags: 服务器会产成一个MD5值，当请求服务器时，服务器的ETags与客户端的值相比较，如果相同说明文件没有被修改过使用缓存文件，返回304状态码
15、AJAX可缓存: jQuery有一个 cache参数，利用时间戳来绕开缓存，更精巧的实现响应可缓存与服务器数据同步更新。
post请求不能被缓存，get可以缓存
其它优化
1、延迟加载: 确定页面运行正常后，再加载脚本来实现如拖放和动画，或者是隐藏部分的内容以及折叠内容等
2、预加载: 关注下无条件加载，有条件加载和有预期的加载
3、减少查询DOM元素个数: 使用更适合或者在语意是更贴切的标签，要考虑大量DOM元素中循环的性能开销
4、尽量减少iframe的个数: 优点: 是脚本可以并行下载，适合加载外部广告，浏览器可以对其安全控制。 缺点: 即使内容为空，加载也需要时间，会阻止页面加载，没有语义不会被seo收录
5、减少Cookie的大小: 去除不必要的coockie，使coockie体积尽量小以减少对用户响应的影响，注意在适应级别的域名上设置coockie以便使子域名不受影响，设置合理的过期时间。较早地Expire时间和不要过早去清除coockie，都会改善用户的响应时间
6、使用无cookie的域: 确定对于静态内容的请求是无coockie的请求。创建一个子域名并用他来存放所有静态内容
7、用<link>代替@import: 在IE中，页面底部@import和使用<link>作用是一样的，因此最好不要使用它
8、避免使用滤镜: 完全避免使用AlphaImageLoader的最好方法就是使用PNG8格式来代替，这种格式能在IE中很好地工作。如果你确实需要使用 AlphaImageLoader，请使用下划线_filter又使之对IE7以上版本的用户无效。
9、优化图像: 尝试把GIF格式转换成PNG格式，看看是否节省空间。在所有的PNG图片上运行pngcrush(或者其它PNG优化工具)
10、优化CSS Spirite: 在Spirite中水平排列你的图片，垂直排列会稍稍增加文件大小
Spirite中把颜色较近的组合在一起可以降低颜色数，理想状况是低于256色以便适用PNG8格式
便于移动，不要在Spirite的图像中间留有较大空隙。这虽然不大会增加文件大小但对于用户代理来说它需要更少的内存来把图片解压为像素地图。 100×100的图片为1万像素，而1000×1000就是100万像素
11、不要在HTML中缩放图像: 不要为了在HTML中设置长宽而使用比实际需要大的图片。如果你需要:
<img width="100″ height="100″ src="mycat.jpg” alt="My Cat” />
那么你的图片(mycat.jpg)就应该是100×100像素而不是把一个500×500像素的图片缩小使用。这里在下文有更有趣的分析
12、favicon.ico 需要缓存: favicon.ico是位于服务器根目录下的一个图片文件。浏览器会对它发出请求，因此最好不要返回一 个404 Not Found的响应
13、保持单个内容小于25K: 因为iPhone不能缓存大于25K的文件。注意这里指的是解压缩后的大小。由于单纯gizp压缩可能达不要求，因此精简文件就显得十分重 要
14、避免页面的重排、重绘:
页面渲染优化
1、HTML文档结构层次尽量少，最好不深于六层
2、脚本尽量后放，放在</body>前即可
3、少量首屏样式内联放在标签内
4、样式结构层次尽量简单
5、在脚本中尽量减少DOM操作，尽量缓存访问DOM的样式信息，避免过度触发回流
6、减少通过JavaScript代码修改元素样式，尽量使用修改class名方式操作样式或动画
7、动画尽量使用在绝对定位或固定定位的元素上
8、隐藏在屏幕外，或在页面滚动时，尽量停止动画
9、尽量缓存DOM查找，查找器尽量简洁
10、涉及多域名的网站，可以开启域名预解析
页面中图片加载的两种效果
一种是回去加载先模糊然后清晰，另一种是很清晰但逐行加载显示，原因是他们的压缩算法不同
1、逐行加载
经验
一、浏览器加载时增加并行加载线程
浏览器每次加载2-6个资源，增加并行加载解决方法是，需要实现域分片。也就是在应用上设置多个子域，以便提供资源