轩枫阁

AJAX优化

缓存AJAX

• 异步并不等于即时

请求使用GET

• 当使用XMLHttpRequest时，而URL长度不到2K，可以使用GET请求数据，GET相比POST更快速
  • POST类型请求要发送两个TCP数据包。
    • 先发送文件头
    • 再发送数据。
  • GET类型请求只需要发送一个TCP数据包。
    • 取决于你的cookie数量

查看全文

前言

利用 HTML5 performance，可以对前端页面加载性能进行分析，如首屏加载性能这个重要的分析。

关于Performance

Performance目前支持浏览器：IE9+，Chrome11+，Firefox7+。Safari并不在列，亲测手机QQ浏览器iOS版，确实没有支持这个API。

performance 在window下的方法：window.performance，里边包含若干性能相关的数据，timing 详细记录了加载各个过程的时间点信息，对比可以分析出当前页面的打开性能数据。 查看全文

概述

1. PC优化手段在Mobile侧同样适用
2. 在Mobile侧我们提出三秒种渲染完成首屏指标
3. 基于第二点，首屏加载3秒完成或使用Loading
4. 基于联通3G网络平均338KB/s(2.71Mb/s），所以首屏资源不应超过1014KB
5. Mobile侧因手机配置原因，除加载外渲染速度也是优化重点
6. 基于第五点，要合理处理代码减少渲染损耗
7. 基于第二、第五点，所有影响首屏加载和渲染的代码应在处理逻辑中后置
8. 加载完成后用户交互使用时也需注意性能

查看全文

是不是动画效果越多越好？哪些效果需要付出高昂的性能代价？怎样才能做到兼顾网站的效果与效率呢？来看看浏览器的重排与重绘知识，了解如何在具体的开发过程中注意重绘和重排引发的性能问题

简介

浏览器从下载文档到显示页面的过程是个复杂的过程，这里包含了重绘和重排。各家浏览器引擎的工作原理略有差别，但也有一定规则。简单讲，通常在文档初次加载时，浏览器引擎会解析HTML文档来构建DOM树，之后根据DOM元素的几何属性构建一棵用于渲染的树(rendering tree)。渲染树的每个节点都有大小和边距等属性，类似于盒子模型（由于隐藏元素不需要显示，渲染树中并不包含DOM树中隐藏的元素）。当渲染树构建完成后，浏览器就可以将元素放置到正确的位置了，再根据渲染树节点的样式属性绘制出页面。由于浏览器的流布局，对渲染树的计算通常只需要遍历一次就可以完成。但table及其内部元素除外，它可能需要多次计算才能确定好其在渲染树中节点的属性，通常要花3倍于同等元素的时间。这也是为什么我们要避免使用table做布局的一个原因。

重绘

重绘是一个元素外观的改变所触发的浏览器行为，例如改变visibility、outline、背景色等属性。浏览器会根据元素的新属性重新绘制，使元素呈现新的外观。重绘不会带来重新布局，并不一定伴随重排。

重排

重排是更明显的一种改变，可以理解为渲染树需要重新计算。 查看全文