使用RAIL模型优化web性能

简介

RAIL模型是一种以用户为中心的性能模型。最终目标不是让网站在任何设备上都可以运行很快,而是使用户满意。RAIL代表四个指标:

  • Response 响应:在100ms内响应
  • Animation 动画:在10ms内生成一帧
  • Idle 空闲:将推迟的工作分为50ms的块,利用空闲时间完成
  • Load 加载:在1000ms内呈现内容

加载优化

可以通过Lighthouse PageSpeed WebPageTest Pingdom等工具来检测加载的时间。
加载的主要内容有:

文本内容

  • 文本内容需要压缩。在不影响代码功能的情况下,通过删除空格缩进和不必要的字符来压缩。可以借助很多压缩的工具,比如Minifer、HTML Minifer等。
  • 在服务端设置Gzip压缩,Gzip擅长文本压缩,可以减少70%以上的体积,但对非文本的压缩效果很不好,比如图片。以apache服务器为例,设置.htaccess文件如下
<IfModule deflate_module>
    # Enable compression for the following file types
    AddOutputFilterByType           \
     DEFLATE                        \
      application/javascript        \
      text/css                      \
      text/html                     \
      text/javascript               \
      text/plain                    \
      text/xml
</IfModule>
  • 减少第三方库的体积,比如,如果没有使用到jQuery的大部分功能,仅仅是使用其单个功能,可以用其他方式来替代,而不是引入整个库。

图形内容

  • 移除不必要的图片,或者延迟其加载
  • 选择合适的图片格式,在需要透明背景时选择png,普通照片选择jpg,动画选择gif。png的质量并没有明显比jpg好,适当的选择jpg而不是png可以大幅度减少图片的体积。
  • 删除图片的meta信息,meta信息包括相机硬件信息、时间戳、软件信息、文件格式、地理信息等,对于大多数网站来说,这些信息都不重要。使用工具(VerExif)可以移除这些信息,压缩效果大约在10%左右。
  • 减小图片尺寸或裁剪图片:根据设备使用尺寸合适的图片;裁剪图片,只保留关键的图片内容;
  • 压缩图片:使用在线工具tinypng可以大幅度压缩图片,大约可以压缩50%~70%。

HTTP请求

所有的资源都需要从服务器请求,请求优化方式有:

  • 合并文本文件
  • 合并图片资源,雪碧图
  • 使用HTTP2,HTTP2可以多路请求,大大提升了HTTP的请求速度
  • 将关键的script提取出来作为内联脚本,优先执行,而不是和其他script一切放到外置文件中

HTTP缓存

当浏览器首次加载一个页面时,会缓存页面资源到http cache,这样在下一次访问这个页面时,就可以利用之前的缓存,从而加快访问。

  • 启用缓存,缓存那些很久都不会改变的资源,比如网站logo
  • 设置缓存头,cache-control(no-cache no-store public private max-age)与expires

参考

Measure Performance with the RAIL Model

浏览器渲染优化 第一课 关键渲染路径 Web网页应该尽量避免不稳定性。 多数设备刷新屏幕的频率为每秒60帧,即60fps 渲染流程 生成DOM树,(Parse HTML) 生成CSS树 合并成为渲染树(Recalculate Styles),计算样式 计算布局,生成盒模型(Layour/Reflow) 将页面由矢量转为光栅(Paint) 处理复合层(compositive layer) 注意,复合层上方的元素... 阅读详情

相关推荐

当 ABAP 遇到超大整数, 用 base 10000 手工搭一套大数运算器

这篇文章探讨了在ABAP中实现大整数运算的挑战与方法。文章指出ABAP原生整数类型的局限性,并提出基于字符串和分段存储的解决方案。作者详细分析了以10000为基数的设计原理,这是基于整数类型的安全计算范围。文中比较了加法、减法、乘法的实现方式,特别指出乘法采用类似小学竖式的方法,而除法则采用近似搜索算法。虽然当前实现存在一些边界问题,如加法进位丢失和除法相等判断等,但这种基于基本运算组合的思路具有教学价值。文章强调,这种底层算法设计能力对于处理企业系统中的边界情况具有重要意义,同时也指出了需要改进的方向以实

2007 年 ~ 2025 年,深耕 SAP 技术 18 年 794

RAIL让网页更丝滑:web性能优化

一说到性能优化,大家可能立马就会想到和加载相关的时间了,比如首字节时间、白屏时间、首屏时间、用户可交互时间、DOMContentLoaded时间、onLoad时间等等,但是不同的人也许会有不同的衡量标准,比如有些人比较重视白屏时间,有的比较关注首屏时间等,这并非完全一致的。假设渲染管道的布局与绘制耗费了10ms,那么加上样式计算与合成的时间,则留给JS处理动画的时间就只有几毫秒,如果JS的执行超过了几毫秒那么该动画每一帧所耗费的时间就会超过16ms,这时候动画一定会丢帧,用户用肉眼就可以看到明显的卡顿。

coinisi_li的博客 451

tuts4you-lena151-Crackme-tutorial06

一、前言      本次研究的是lena151-Crackme-tutorial06,也是一个应用程序,但因为平台迭代的关系,程序不能正常运行,只能完成部分破解。 (一)·本次我们要破解的目标是个应用程序,如下图 (二)、使用工具:x32dbg 二、过程 这个程序的破解的方法很多,首先最简单的一种不外乎就是搜索字符串,我就按照这个思路来完成。 (一)查找字符串&lt;Unregis...

h123120的专栏 518

Web 前端性能优化之一:性能模型及网页原理

Web 前端性能优化之一:性能模型及网页原理

碳学长的博客 2219

TL3562/3568内核驱动移植实战:解决无锡沐创N500L-AM4网口异常问题

本文详细介绍了在TL3562/3568平台上移植无锡沐创N500L-AM4网卡驱动的实战经验,重点解决了第四个网口通讯异常问题。通过升级驱动版本至rnpgbe-0.2.3,生成关键头文件并正确配置内核,最终实现四个网口稳定工作。文章还提供了性能优化建议和避坑指南,为类似硬件驱动移植项目提供参考。

weixin_28273593的博客 180

Qt中常见的面试题总结

基于Qt开发的一些常用面试题

一名热爱编程的程序员 8492

RAIL模型的简单介绍

RAIL, 是 Response, Animation, Idle, 和 Load 的首字母缩写, 是一种由Google Chrome团队与2015年提出的性能模型, 用于提升浏览器内的用户体验和性能. RAIL模型的理念是 "以用户为中心;最终目标不是让您的网站在任何特定设备上都能运行很快,而是使用户满意。 也就是说,RAIL模型的目的是通过合理的处理手段提高用户的使用体验。 缩写 全称 描述 R Response 在100ms内响应用户的操作。虽说是100ms,但预算只有50m.

willemwei023的博客 1478

正弦波产生电路_文氏桥振荡

本文以文氏桥振荡为基础产生正弦波,介绍了原理、计算、应用时需要注意的一些点,并给出了实测可用的电路模板

白鹤忘机的博客 3万+

web性能优化——使用RAIL模型评估性能

RAIL 简介 RAIL 是一种以用户为中心的性能模型。每个网络应用均具有与其生命周期有关的四个不同方面,且这些方面以不同的方式影响着性能: RAIL核心思想是以用户为中心;最终目标不是让您的网站在任何特定设备上都能运行很快,而是使用户满意。主要包含以下几个方面: 立即响应用户;在 100 毫秒以内确认用户输入。 设置动画或滚动时,在 ...

weixin_34041003的博客 350

从共现矩阵到共现图一步到位——详解版

1.共现矩阵 判断大量不同文本之间,相邻词的联系,两词在所有文本中相邻的次数在矩阵中用数值表示。(参考此) 例子如下: 1.1 文本 • I like deep learning. • I like NLP. • I enjoy flying. 1.2 共现矩阵 2.共现图 2.1 数据预处理(节点和边) 获取文件node.csv和edge.csv。代码详见github仓库 2.2 共现图的制作 2.2.1 gephi的安装(参考此) (1)先下载gephi (2) 再配置java环境(下载java1.8

微乐的博客 4401

IAR9.4报错之编码方式

IAR9.40编码方式错误导致的报错

qq_36081075的博客 2626

Web性能优化之如何评估网页性能——性能指标和度量工具介绍

对于大部分网站来说,性能是影响用户满意度和转化率的重要因素。关于web性能优化的书和文章有很多,本文主要从 web 性能的主要指标开始介绍、说明FP/FMP/HRT等主要性能指标的定义及场景,另外介绍了 RAIL 模型及各主流仿真/真实性能测量工具

qq_24357165的博客 7094

【SABRE 3D, SABRE 3DxT,LAM设备】2025年9月10日

前文:SABRE 3D系列机台简介本章节详细阐述了在维护期间锁定电气、机械、热力学及重力组件以及化学管线输入的锁定操作流程,旨在降低人员受伤风险。p42~p55。

weixin_46735260的博客 1615

Web性能测试及优化

本文会通过三部分来介绍web性能相关。1、为什么web性能重要2、怎么测试web性能3、怎么改善性能

软件测试技术交流分享 502

Weka学习笔记01:初探Weka世界

下载、安装和启动Weka、Weka数据格式

howard2005的专栏 1471

深度学习工具包 DeepLearningToolbox

深度学习工具包Deprecation notice.-----This toolbox is outdated and no longer maintained.There are much better tools available for deep learning than this toolbox, e.g. [Theano](http://deeplearning.net/software/theano/), [torch](http://torch.ch/) or [tensorflow](http://www.tensorflow.org/)I would suggest you use one of the tools mentioned above rather than use this toolbox.Best, Rasmus.DeepLearnToolbox================A Matlab toolbox for Deep Learning.Deep Learning is a new subfield of machine learning that focuses on learning deep hierarchical models of data.It is inspired by the human brain's apparent deep (layered, hierarchical) architecture.A good overview of the theory of Deep Learning theory is[Learning Deep Architectures for AI](http://www.iro.umontreal.ca/~bengioy/papers/ftml_book.pdf)For a more informal introduction, see the following videos by Geoffrey Hinton and Andrew Ng.* [The Next Generation of Neural Networks](http://www.youtube.com/watch?v=AyzOUbkUf3M) (Hinton, 2007)* [Recent Developments in Deep Learning](http://www.youtube.com/watch?v=VdIURAu1-aU) (Hinton, 2010)* [Unsupervised Feature Learning and Deep Learning](http://www.youtube.com/watch?v=ZmNOAtZIgIk) (Ng, 2011)If you use this toolbox in your research please cite [Prediction as a candidate for learning deep hierarchical models of data](http://www2.imm.dtu.dk/pubdb/views/publication_details.php?id=6284)```@MASTERSTHESIS\{IMM2012-06284, author = "R. B. Palm", title = "Prediction as a candidate for learning deep hierarchical models of data", year = "2012",}```Contact: rasmusbergpalm at gmail dot comDirectories included in the toolbox-----------------------------------`NN/` - A library for Feedforward Backpropagation Neural Networks`CNN/` - A library for Convolutional Neural Networks`DBN/` - A library for Deep Belief Networks`SAE/` - A library for Stacked Auto-Encoders`CAE/` - A library for Convolutional Auto-Encoders`util/` - Utility functions used by the libraries`data/` - Data used by the examples`tests/` - unit tests to verify toolbox is workingFor references on each library check REFS.mdSetup-----1. Download.2. addpath(genpath('DeepLearnToolbox'));Example: Deep Belief Network---------------------```matlabfunction test_example_DBNload mnist_uint8;train_x = double(train_x) / 255;test_x = double(test_x) / 255;train_y = double(train_y);test_y = double(test_y);%% ex1 train a 100 hidden unit RBM and visualize its weightsrand('state',0)dbn.sizes = [100];opts.numepochs = 1;opts.batchsize = 100;opts.momentum = 0;opts.alpha = 1;dbn = dbnsetup(dbn, train_x, opts);dbn = dbntrain(dbn, train_x, opts);figure; visualize(dbn.rbm{1}.W'); % Visualize the RBM weights%% ex2 train a 100-100 hidden unit DBN and use its weights to initialize a NNrand('state',0)%train dbndbn.sizes = [100 100];opts.numepochs = 1;opts.batchsize = 100;opts.momentum = 0;opts.alpha = 1;dbn = dbnsetup(dbn, train_x, opts);dbn = dbntrain(dbn, train_x, opts);%unfold dbn to nnnn = dbnunfoldtonn(dbn, 10);nn.activation_function = 'sigm';%train nnopts.numepochs = 1;opts.batchsize = 100;nn = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.10, 'Too big error');```Example: Stacked Auto-Encoders---------------------```matlabfunction test_example_SAEload mnist_uint8;train_x = double(train_x)/255;test_x = double(test_x)/255;train_y = double(train_y);test_y = double(test_y);%% ex1 train a 100 hidden unit SDAE and use it to initialize a FFNN% Setup and train a stacked denoising autoencoder (SDAE)rand('state',0)sae = saesetup([784 100]);sae.ae{1}.activation_function = 'sigm';sae.ae{1}.learningRate = 1;sae.ae{1}.inputZeroMaskedFraction = 0.5;opts.numepochs = 1;opts.batchsize = 100;sae = saetrain(sae, train_x, opts);visualize(sae.ae{1}.W{1}(:,2:end)')% Use the SDAE to initialize a FFNNnn = nnsetup([784 100 10]);nn.activation_function = 'sigm';nn.learningRate = 1;nn.W{1} = sae.ae{1}.W{1};% Train the FFNNopts.numepochs = 1;opts.batchsize = 100;nn = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.16, 'Too big error');```Example: Convolutional Neural Nets---------------------```matlabfunction test_example_CNNload mnist_uint8;train_x = double(reshape(train_x',28,28,60000))/255;test_x = double(reshape(test_x',28,28,10000))/255;train_y = double(train_y');test_y = double(test_y');%% ex1 Train a 6c-2s-12c-2s Convolutional neural network %will run 1 epoch in about 200 second and get around 11% error. %With 100 epochs you'll get around 1.2% errorrand('state',0)cnn.layers = { struct('type', 'i') %input layer struct('type', 'c', 'outputmaps', 6, 'kernelsize', 5) %convolution layer struct('type', 's', 'scale', 2) %sub sampling layer struct('type', 'c', 'outputmaps', 12, 'kernelsize', 5) %convolution layer struct('type', 's', 'scale', 2) %subsampling layer};cnn = cnnsetup(cnn, train_x, train_y);opts.alpha = 1;opts.batchsize = 50;opts.numepochs = 1;cnn = cnntrain(cnn, train_x, train_y, opts);[er, bad] = cnntest(cnn, test_x, test_y);%plot mean squared errorfigure; plot(cnn.rL);assert(er<0.12, 'Too big error');```Example: Neural Networks---------------------```matlabfunction test_example_NNload mnist_uint8;train_x = double(train_x) / 255;test_x = double(test_x) / 255;train_y = double(train_y);test_y = double(test_y);% normalize[train_x, mu, sigma] = zscore(train_x);test_x = normalize(test_x, mu, sigma);%% ex1 vanilla neural netrand('state',0)nn = nnsetup([784 100 10]);opts.numepochs = 1; % Number of full sweeps through dataopts.batchsize = 100; % Take a mean gradient step over this many samples[nn, L] = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.08, 'Too big error');%% ex2 neural net with L2 weight decayrand('state',0)nn = nnsetup([784 100 10]);nn.weightPenaltyL2 = 1e-4; % L2 weight decayopts.numepochs = 1; % Number of full sweeps through dataopts.batchsize = 100; % Take a mean gradient step over this many samplesnn = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.1, 'Too big error');%% ex3 neural net with dropoutrand('state',0)nn = nnsetup([784 100 10]);nn.dropoutFraction = 0.5; % Dropout fraction opts.numepochs = 1; % Number of full sweeps through dataopts.batchsize = 100; % Take a mean gradient step over this many samplesnn = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.1, 'Too big error');%% ex4 neural net with sigmoid activation functionrand('state',0)nn = nnsetup([784 100 10]);nn.activation_function = 'sigm'; % Sigmoid activation functionnn.learningRate = 1; % Sigm require a lower learning rateopts.numepochs = 1; % Number of full sweeps through dataopts.batchsize = 100; % Take a mean gradient step over this many samplesnn = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.1, 'Too big error');%% ex5 plotting functionalityrand('state',0)nn = nnsetup([784 20 10]);opts.numepochs = 5; % Number of full sweeps through datann.output = 'softmax'; % use softmax outputopts.batchsize = 1000; % Take a mean gradient step over this many samplesopts.plot = 1; % enable plottingnn = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.1, 'Too big error');%% ex6 neural net with sigmoid activation and plotting of validation and training error% split training data into training and validation datavx = train_x(1:10000,:);tx = train_x(10001:end,:);vy = train_y(1:10000,:);ty = train_y(10001:end,:);rand('state',0)nn = nnsetup([784 20 10]); nn.output = 'softmax'; % use softmax outputopts.numepochs = 5; % Number of full sweeps through dataopts.batchsize = 1000; % Take a mean gradient step over this many samplesopts.plot = 1; % enable plottingnn = nntrain(nn, tx, ty, opts, vx, vy); % nntrain takes validation set as last two arguments (optionally)[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.1, 'Too big error');```[![Bitdeli Badge](https://d2weczhvl823v0.cloudfront.net/rasmusbergpalm/deeplearntoolbox/trend.png)](https://bitdeli.com/free "Bitdeli Badge")

怎样正确做 Web 应用的压力测试?

提到压力测试,我们想到的是服务端压力测试,其实这是片面的,完整的压力测试包含服务端压力测试和前端压力测试。

软件自动化测试技术交流、资源分享 892

Devexpress16.2.6破解工具

Devexpress16.2.6破解工具Devexpress16.2.6破解工具Devexpress16.2.6破解工具Devexpress16.2.6破解工具

(二)性能优化的指标和工具 (告别前端小白,成为大神的必经之路)

性能优化的指标和工具

lj1530562965的博客 2311

最新的sdio 4.0 spec 协议标准 带书签 高清完整PDF版

Part-E1-SDIO-Specification-Ver4.00-Final-120220.pdf:最新的sdio 4.0 spec 协议标准 带书签 高清完整PDF版,包括SDIO 接口的外设,SDIO 接口官方协议等。

IDEA的使用指南

IDEA基于java的使用手册,可以最快速的上手,在使用中不断的丰富自己的使用技巧.

js和java 性能优化,JavaScript 性能优化技巧分享

原标题:JavaScript 性能优化技巧分享来自:葡萄城控件链接:cnblogs.com/powertoolsteam/p/java-performance-optimization.html原文:sitepoint.com/java-performance-optimization-tips-an-overview/Java 作为当前最为常见的直译式脚本语言,已经广泛应用于 Web 应用开发中...

weixin_34660766的博客 522

JavaScript 性能优化技巧分享

JavaScript 作为当前最为常见的直译式脚本语言,已经广泛应用于 Web 应用开发中。为了提高Web应用的性能,从 JavaScript 的性能优化方向入手,会是一个很好的选择。本文从加载、上下文、解析、编译、执行和捆绑等多个方面来讲解 JavaScript 的性能优化技巧,以便让更多的前端开发人员掌握这方面知识。什么是高性能的 JavaScript 代码?尽管目前没有...

weixin_34367845的博客 74

React 渐进式 Web 应用(三)

在第二章,使用 Webpack 入门,当我们设置我们的 Webpack 构建配置时,我们确保我们的构建过程生成了一个资产清单,文件名为。这个文件包含了我们的应用程序使用的 JavaScript 文件列表。如果我们愿意,我们可以配置它来列出我们使用的 CSS 和图像文件。这个资产清单让我们了解了清单的用途–描述应用程序的某个部分。我们的 Web 应用清单类似,但简单地描述了我们的应用程序从更高层面上的全部内容,以一种类似于应用商店对本地应用的描述的方式。

龙哥盟 1095

前端学习笔记-性能相关知识

建议直接阅读谷歌原文: https://developers.google.cn/web/fundamentals/performance/rendering/?hl=zh-cn https://web.dev/rail/ 本站博客: https://blog.youkuaiyun.com/qweKelliy/article/details/107395628 https://blog.youkuaiyun.com/csdnnews/article/details/95267307 R响应:立即响应用户;在 100 毫秒以.

KL's Notebook 403

360前端星计划学习笔记--0411

360前端星计划学习笔记(七)前端工程化浅析–田东东老师 360前端星计划学习笔记(八)前端动画–吴亮老师 360前端星计划学习笔记(九)前端性能优化–饶占平老师 前端工程化 什么是前端工程化? 工程化: 目标:方案,开发各个阶段,解决低效问题 技术:工程化是一种思想,技术是一种实践,思想的落地离不开行动 原因:为了提效,提效体现在项目的开发、测试及维护阶段 规范化、模块化、组件化...

11wy11的博客 1079

前端基础知识:理解 Web Worker

保持应用程序的流畅(smooth)和灵敏(responsive)是具有好的性能的应用程序的目标。按照RAIL 模型,灵敏意味着响应用户行为的时间控制在 100ms 内,而流畅意味着屏幕上任何元素移动时稳定在 60 fps。“帧预算”(frame budget)对应的每一帧的时长为1000ms/60 = 16.6ms 。 RAIL 作为一个指导框架至今已经 6 年了。实际上 60fps 只是一个占位值,它表示的是用户的显示设备原生刷新率。例如,新的智能手机 有 90Hz 的屏幕 而 iPad Pro 的.

薛定谔的猫-前端领域 1794

什么是Rail性能模型,前端如何量化

oad),并为每个阶段设定明确的性能目标。通过量化这些目标,开发者可以系统性地优化网页性能,提升用户体验。通过 RAIL 模型,开发者可以系统性地将性能优化融入开发流程,避免“头痛医头,脚痛医脚”的碎片化优化。是谷歌提出的一种以用户为中心的网页性能优化框架,其核心思想是将用户体验分解为四个关键阶段(

qq_50708187的博客 1018

前端性能优化02_RAIL测量模型

前端性能优化02RAIL测量模型什么是RAILRAIL的目标 RAIL测量模型 RAIL是google提出的一个量化性能测试的标准,我们通过这个模型就可以指导我们性能优化的目标。我们可以看到许多测试优化的建议,但是始终没有一个量化的结果。我们需要有人告诉我们,我们做什么可以,做到怎样才算好。这个就是RAIL测量模型给我们带来的东西。一些量化的指标。它不光有指导性的作用,并且也是后面优化必备知识点的基础。 什么是RAIL 我们的web出现了已经有二三十年的背景,在过去很长的一段时间里,技术工程师不断的去追求让

frontendchen的博客 663

前端性能优化 - 用RAIL模型分析性能

RAIL是一个以用户为中心的性能模型,它把用户的体验拆分成几个关键点(例如,tap,scroll,load),并且帮你定义好了每一个的性能指标。 有以下四个方面: Response Animation Idle Load 聚焦用户 以下是用户对性能延迟的感知: 延迟时间 用户感知 0-16ms 很流畅 0-100ms 基本流畅 100-1000ms 感觉到网站上有一些加载任务 1000ms or more 失去耐心了 10000ms or more 直接离开,不会再访问

找到Web 662
上一篇: 状态码表
下一篇: 如何做一个对账系统
weixin_33728708
博客等级 码龄11年 5472粉丝 1452原创
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付:10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值