轩枫阁

首页 / 搜索标签: 优化

前端性能优化指南

AJAX优化

缓存AJAX

  • 异步并不等于即时

请求使用GET

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

查看全文

2015/11 21  周六

HTML5 performance 前端加载性能初探

前言

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

关于Performance

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

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

2015/09 19  周六

移动前端HTML5性能优化指南

概述

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

查看全文

2015/03 07  周六

前端优化之浏览器重排与重绘

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

简介

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

重绘

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

重排

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

2013/11 12  周二

纸飞机许愿

x

钢琴节奏

请选择弹奏的曲谱

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 1
    • 2

    [返回曲谱列表]

    点击开始录制,可以录制弹奏的曲子