前言 阿里无线前端团队在过去一年对所负责业务进行了全面的性能优化.以下是我们根据实际经验总结的优化指南,希望对大家有所帮助. 第一部分仅包括数据加载期优化. 图片控制 对于网页特别是电商类页面来说,图片通常会占据了大量的视觉空间,是页面中最为重要的展现内容,并且占据网页传输字节的大部分.因此,对图片的优化是我们性能优化的重点. 启用WebP WebP是一种支持有损压缩和无损压缩的图片文件格式,派生自视频编码格式 VP8.根据 Google 官方的数据,无损压缩后的 WebP 比 PNG 文件少了…

本文由葡萄城技术团队原创并首发 转载请注明出处:葡萄城官网,葡萄城为开发者提供专业的开发工具.解决方案和服务,赋能开发者. 最近我司因业务需求,需要在一个内部数据分析平台集成在线Excel功能,既然我们自己就是做开发工具的,所以目光自然就落在了我司自研的前端表格产品上. 项目的目的是要通过数据透视表和Excel公式来分析公司的各项运营数据.不过在集成后,在开发环境页面运行流畅,大量数据加载处理也很快.但是发布生产后,在用户每次打开页面时,加载时间上相较开发阶段均有所降低,经过排查速度变慢是由于发…

vue.js是一个比较流行的前端框架,与react.js.angular.js相比来说,vue.js入手曲线更加流畅,不管掌握多少都可以快速上手.但是单页面应用也都有其弊病,有时候首屏加载慢的让人捏舌.今天我们以vue cli3.x来说一说如何行之有效的缓解此问题! 方法一 路由懒加载 首屏加载慢的原因无非就是单页面应用需要加载完整个路由表上的页面,而路由懒加载就是来解决这个问题的.如果我们能把不同路由对应的组件分割成不同的代码块,然后当路由被访问的时候才加载对应组件,这样就更加高效了.下面这个…

互联网应用或者访问量大的应用,对js的加载优化是不可少的.下面记录几种优化方法 CDN  + 浏览器缓存 CDN(content delivery network)内容分发网络, 最传统的优化方式.其实就是将自己页面所依赖的js(静态的)放置到CDN上,或者使用一些CDN库,以此降低对应用服务器的请求,而浏览器缓存也是不重复加载js文件的性质. 优点: 1.简单.容易维护 2.304 cache 简单来说就是转掉请求,缓存不重加载. 缺点: 1.缓存会失效,当用户强制刷新时会有请求 2.无法增量…

问题 单页面应用的一个问题就是首页加载东西过多,加载时间过长.特别在移动端,单页面应用的首屏加载优化更是绕不开的话题.下面我会写出我在项目中做的一些优化,希望大家能够相互讨论,共同进步. 我的项目vue-cli3构建的,vue+vue-router+vuex,UI框架选用 element-ui,ajax方案选用 axios,服务器使用Nginx.用到的这些技术都是现在用的比较广泛的,看到这篇文章,我估计你和我用的技术应该差不多. 第一步:webpack-bundle-analyzer 分析 首页…

懒加载 存在于外键和多对多关系不检索关联对象的数据调用关联对象会再次查询数据库 问题根源 查看django orm的数据加载,两次. 查询user,查询menu 预加载的方法 预加载单个关联对象--select_related!!!预加载多个关联对象--prefetch_related 性能对比:测试时 预加载快了三倍左右 # 懒加载def lazy_load(): for user in User.objects.all(): print(user.menu.all()) # 预加载def p…

Multidex(二)之Dex预加载优化 https://www.jianshu.com/p/2891599511ff…

react 首屏加载优化,原本是在入口HTML文件中加载loading动画,但是部署在测试环境上的时候一直无法显示loading的部分,也是奇怪了,我们测试环境的部署一直跟本地的都不太一样,内外网的转发多次,总感觉会丢掉一些文件. 本次采取的优化方法就是,按需加载,首先需要下载依赖,yarn add react-loadable, index.js页面代码如下: import React from 'react'; import ReactDOM from 'react-dom'; import…

库使用情况 vue vue-router axios muse-ui material-icons vue-baidu-map 未优化前 首先我们在正常情况下build 优化 1. 按需加载 当前流行的UI框架如iview,muse-ui,Element UI都支持按需加载,只需稍微改动一下代码. 修改前: import MuseUI from 'muse-ui' import 'muse-ui/dist/muse-ui.css' import 'muse-ui/dist/theme-light…

写在前面 本文记录笔者在Vue SPA项目首屏加载优化过程中遇到的一些坑及优化方案! 我们以 vue-cli 工具为例,使用 vue-router 搭建SPA应用,UI框架选用 element-ui , ajax方案选用 axios, 并引入 vuex ,使用 vuex-router-sync 将 router 同步到 store ,服务器使用本地Nginx服务. 构建项目 vue-init webpack vue-spa-starter-kit cd vue-spa-starter-kit n…

vuejs学习之 项目打包之后的首屏加载优化 一:使用CDN资源 我们在打包时,会将package.json里,dependencies对象里插件打包起来,我们可以将其中的一些使用cdn的方式加载,例如不想把vue,axios,vuex,vue-router打包到我们项目中,我们需要这样: 1:打开webpack.base.conf.js module.exports = { externals: { 'vue': 'Vue', 'axios': 'axios', 'vuex': 'Vuex',…

Laya 分帧加载优化 @author ixenos Flash中的EnterFrame事件在Laya中等同于Laya.timer.frameLoop(1,...) Laya.timer.frameLoop(1, this, onFrame); var curIdx:int = 0; var st:Number = 0; var tLimit:Number = 1000/Laya.timer.currFrame*0.25;//最大时间不超过一帧所需时间的25%(可调整) function onF…

Laya 类列表加载优化 @author ixenos 类列表:在一个页面展示的大量的零散单元的集合(聊天面板.背包) 一.按展示优化1.展示内容少,即使大量数据,但用户只看到少量信息的时候,考虑按需加载2.展示内容多,此时不仅要按需加载,还要在渲染时进行分帧优化(或者多线程) 二.实例分析1.聊天面板(1)单页展示内容少,按需加载2.背包(1)单页展示内容多,按需加载,分帧优化…

文章目录 tip:没有耐心的可以直接看:正式在hexo next中加入懒加载(最下面) 废话 背景 懒加载简单介绍 引入js 重点!敲黑板了!!! 完善懒加载函数 懒加载函数可配置的参数 正式在hexo next中加入懒加载 1: 2: 3:按我的步骤来,不要问为什么. 个人博客:https://mmmmmm.me 源码:https://github.com/dataiyangu/dataiyangu.github.io tip:没有耐心的可以直接看:正式在hexo next中加入懒加载(最下面…

Vue 网站首页加载优化 本篇主要讲解 Vue项目打包后 vendor.js 文件很大 如何对它进行优化 以及开启Vue的压缩 和 nginx gzip 压缩的使用, 其他就是对接口优化等  1. vendor.js 优化  由于Vue项目随着功能变多 依赖也会随之变多,减少vendor.js的主要方法就是将其 不打包依赖!!   1.1 第一步.cdn引入各种包   index.html中cdn的方式引入vue.vuex.axios.iview.等包,如下图:   1.2 第二步.在使用vue…

项目经理要求做首页加载优化,打包后从十几兆优化到两兆多,记下来怕下次忘记 运行report脚本 可看到都加载了那些内容,在从dist文件中index.html 查看首次加载都加载了那些东西,如下图:然后首次加载不需要用到的插件可不用在main.js中引入 "dev": "vue-cli-service serve", "pro": "vue-cli-service serve --open --mode production"…

前言:  在同样的网络环境下,两个同样能满足你的需求的网站,一个“Duang”的一下就加载出来了,一个纠结了半天才出来,你会选择哪个?研究表明:用户最满意的打开网页时间是2-5秒,如果等待超过10秒,99%的用户会关闭这个网页.也许这样讲,各位还不会有太多感触,接下来我列举一组数据:Google网站访问速度每慢400ms就导致用户搜索请 求下降0.59%;Amazon每增加100ms网站延迟将导致收入下降1%;雅虎如果有400ms延迟会导致流量下降5-9%.网站的加载速度严重影响了用户体验,也决…

前言:  在同样的网络环境下,两个同样能满足你的需求的网站,一个"Duang"的一下就加载出来了,一个纠结了半天才出来,你会选择哪个?研究表明:用户最满意的打开网页时间是2-5秒,如果等待超过10秒,99%的用户会关闭这个网页.也许这样讲,各位还不会有太多感触,接下来我列举一组数据:Google网站访问速度每慢400ms就导致用户搜索请 求下降0.59%;Amazon每增加100ms网站延迟将导致收入下降1%;雅虎如果有400ms延迟会导致流量下降5-9%.网站的加载速度严重影响了用户…

一.什么是按需加载 和异步加载script的目的一样(异步加载script的方法),按需加载/代码切割也可以解决首屏加载的速度. 什么时候需要按需加载 如果是大文件,使用按需加载就十分合适.比如一个近1M的全国城市省市县的json文件,在我首屏加载的时候并不需要引入,而是当用户点击选项的时候才加载.如果不点击,则不会加载.就可以缩短首屏http请求的数量以及时间. 如果是小文件,可以不必太在意按需加载.过多的http请求会导致性能问题. 二.实现按需加载的方法 Webpack打包模块工具实现 R…

前端工程性能优化一说意义深远悠长,本章主要介绍除了一些基础优化外如何实行路由懒加载.Gzip加速.CDN加速,让网页飞的快一些. 基础优化 老生常谈的一些: 不要在模板中写复杂的表达式 慎用watch尤其是deep 合理的使用v-if/v-show/v-for 善用keep-alive 使用Object.freeze() ... 这里不再细开展~主要说下以下几点: 一. 开启GZIP 体积对比图: 1541KB vs 466KB 耗时对比图: 333ms vs 225ms 操作步骤: 1.安装包…

本文主要介绍preload的使用,以及与prefetch的区别.然后会聊聊浏览器的加载优先级. preload 提供了一种声明式的命令,让浏览器提前加载指定资源(加载后并不执行),在需要执行的时候再执行.提供的好处主要是 将加载和执行分离开,可不阻塞渲染和 document 的 onload 事件 提前加载指定资源,不再出现依赖的font字体隔了一段时间才刷出 如何使用 preload 使用 link 标签创建 <!-- 使用 link 标签静态标记需要预加载的资源 --><link r…

http://www.cnblogs.com/radom/archive/2011/04/26/2028886.html ontrolJS 主要为了是解决网页加载中Js文件的性能问题,ControlJS的原理 ControlJS本身是异步进行加载的,首先将script的标签type属性值更改为浏览器无法识别的类型,这样浏览器不会认为这是一个脚本.本身异 步加载的ControlJS执行时开始遍历type=”text/cjs”的script标签(包括内嵌脚本),如果存在”DATA-CJSSRC”属性…

  1. 尽可能的减少 HTTP 的请求数 [content] 2. 使用 CDN(Content Delivery Network) [server] 3. 添加 Expires 头(或者 Cache-control ) [server] 4. Gzip 组件 [server] 5. 将 CSS 样式放在页面的上方 [css] 6. 将脚本移动到底部(包括内联的) [javascript] 7. 避免使用 CSS 中的 Expressions [css] 8. 将 JavaScript 和 C…

WeTest 导读 现在app越来越炫,动不动就搞点动画,复杂的动画用原生实现起来挺复杂,如是就搞起gif播放动画的形式,节省开发成本.   背 景 设计同学准备给一个png序列,开发读取png序列,一帧一帧的播放出来,实现一个动画的效果. 为什么不直接使用gif,github上有好的开源库可以直接播放gif的,为嘛?大部分原因还是要回答,项目需求决定. 实现思路: 1.比较偷懒的方式,将设计同学给的png序列直接放到一个 animation-list中,就像这样子: 然后直接,放在设置为一个I…

最近听了阿里一位大牛的讲座,讲web架构优化对网页加载的影响,看完之后对他所讲的一些优化方法进行一些总结和整理,发现收获还是蛮多的,下面多为个人整理和个人见解,希望有说的不对的,能及时指出 1.DNS解析优化 1.1利用TTL:利用TTL:因为DNS解析时,都是逐层查找DNS缓存,最后去跟服务器查询,而缓存有是有一定的生命周期,即Time To Live,而如果能快速的拿到缓存A记录,也就避免了我们逐层慢慢的查询了 1.2拆分域名:浏览器对于同一域名下文件同步请求是有上限的,比如ie8,同一域名…

Javascript性能优化之异步加载和执行 Author:小欧2013-09-17 随着科技的发展,如今的网站和五六年前相比,现在的人们对web的要求越来越高了,用户体验,交互效果,视觉效果等等都有很高的要求,要实现这些功能我们最就需要用到javascript,这时候JS的性能优化就越来越重要了,今天在这里给大家转载一篇IBM开发人员写的怎么优化javascript文章,我觉得写的挺好,希望对大家有所帮助. 无论当前JavaScript代码是内嵌还是在外链文件中,页面的下载和渲染都必须停下来等…

上个月上线了一个vue小项目,刚做完项目,打包上线之后,传到服务器上发现首页加载巨慢. 由于开发时间比较紧,我想着怎么快怎么来,因而在开发过程中没考虑过优化性能问题,酿成最后在带宽5M的情况下页面加载巨慢. 用户体验至上,因而必须对象进行优化,我总结一下我都做了哪些优化. 1.路由懒加载,首页加载的时候,不让其他页面加载,减缓首页加载压力. 2.element-ui按需加入.element-ui需要哪部分,就使用哪部分. 3.将组件写的css整合到一个css页面里. 4.图片进行压缩或者上传到C…

优化目的: 1. 减少load量. 2. 优化js,加快页面加载速度. 网站中最影响网站打开速度的是什么?我会告诉是网站中的javascript,简称JS.模板中引用的JS文件越多,打开速度越慢,细读完这篇文章,够你优化大半天的了,关于JS优化方法大都脱离不了这三种方法. 方法一:把不重要的JS放在页面最底部 这是最简单,也是效果最好的优化方法,把不重要的JS通通放到页面的最下面body的上面,实现异步加载,也就是等网页都加载完了,最后在加载这些不重要的JS,这样就不影响网页速度了.如公共的co…

从网络中加载图片主要要注意两个方面的问题: 1.内存管理:图片占的内存很大,假如图片数量多,很容易让系统抛出out of memory的异常. 同时我们也要注意不同android版本中内存管理的区别. 2.性能:图片的加载速度,和加载图片时不影响UI的流畅性 尤其是在ViewPager,GridView 和ListView等等需要在短时间内加载大量图片时,上面两个问题就更加突出了... 要解决上面这个两个问题,我们要用到的技术 1.缩减加载的图片的bitmap 可以通过实现显示图片的view的大…

网络图片显示大体步骤: 1.下载图片: 2.图片处理(裁剪,边框等): 3.写入磁盘: 4.从磁盘读取数据到内核缓冲区: 5.从内核缓冲区复制到用户空间(内存级别拷贝): 6.解压缩为位图(耗cpu较高): 7.如果位图数据不是字节对齐的,CoreAnimation会copy一份位图数据并进行字节对齐: 8.CoreAnimation渲染解压缩过的位图. 以上4.5.6.7.8步是在UIImageView的setImage时进行的,所以默认在主线程进行(iOS UI操作必须在主线程执行). 一些…