轩枫阁

首页 / 搜索标签: 性能

CSS3动画性能

CSS动画属性性能

  • CSS动画属性会触发整个页面的重排relayout、重绘repaint、重组recomposite
  • Paint通常是其中最花费性能的,尽可能避免使用触发paint的CSS动画属性,这也是为什么我们推荐在CSS动画中使用 webkit-transform: translateX(3em) 的方案代替使用 left: 3em ,因为left会额外触发layout与paint,而webkit-transform只触发整个页面composite

查看全文

2016/11 15  周二

网页性能管理详解

前言

你遇到过性能很差的网页吗?

这种网页响应非常缓慢,占用大量的CPU和内存,浏览起来常常有卡顿,页面的动画效果也不流畅。

bg2015091508

你会有什么反应?我猜想,大多数用户会关闭这个页面,改为访问其他网站。作为一个开发者,肯定不愿意看到这种情况,那么怎样才能提高性能呢?

PS:本站的V2版本主题的性能相对较差,已有想法并准备V3版本主题研发,会给大家带来更顺畅的体验!

本文将详细介绍性能问题的出现原因,以及解决方法。 查看全文

2015/11 20  周五

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

    [返回曲谱列表]