先看一下网页的加载流程:

1.解析html结构
2.加载外部脚本和样式表文件
3.解析并执行脚本(脚本会阻塞页面的加载)
4.DOM树构建完成 (DOMContentLoaded)
5.加载图片等外部文件
6.页面加载完毕 (load事件)

THE WAY: 减少请求数量、减小请求大小

减少请求数量
1.将小图合并成雪碧图(sprite)或者iconfont字体文件
2.使用base64减少请求(把图片转换成base64)
3.图片延迟加载
4.JS/CSS按需打包
......

减小请求大小
1.JS/CSS/HTML 压缩
2.gzip压缩
3.图片压缩、JPG优化
4.webp优化
5.JS/CSS按需加载 (require)
......

NEXT讲一下具体的实现

减少请求数量-->
1.sprite图
  可以使用构建工具(gulp.spritesmith插件)自动化生成。
2.base64
  即把小图,没必要发请求的转成base64格式
3.图片延迟加载
  图片延迟加载的原理就是先不设置img的src属性,等合适的时机(比如滚动、滑动、出现在视窗内等)再把图片真实url放到img的src属性上。
  (1) 固定宽高的图片
  可以使用lazysizes:  

// 引入js文件
<script src="lazysizes.min.js" async=""></script> // 非响应式 例子
<img src="" data-src="data:image.jpg" class="lazyload" /> // 响应式 例子,自动计算合适的图片
<img
data-sizes="auto"
data-src="data:image2.jpg"
data-srcset="image1.jpg 300w,
image2.jpg 600w,
image3.jpg 900w" class="lazyload" />
// iframe 例子
<iframe frameborder="0"
class="lazyload"
allowfullscreen=""
data-src="//www.youtube.com/embed/ZfV-aYdU4uE">
</iframe>  

  (2) 固定宽高比的图片
  不同设备的宽度不同导致高度也相应的不同,所以单个图片从上往下加载完都会有抖动,每次抖动都会造成reflow(重绘),严重影响性能
  对此有两种解决方案:

  1⃣️第一种方案使用padding-top或者padding-bottom来实现固定宽高比。优点是纯CSS方案,缺点是HTML冗余,并且对输出到第三方不友好。

<div style="padding-top:75%">
<img data-src="" alt="" class="lazyload">
<div>

  2⃣️第二种方案在页面初始化阶段利用ratio设置实际宽高值,优点是html干净,对输出到第三方友好,缺点是依赖js,理论上会至少抖动一次。

<img data-src="" alt="" class="lazyload" data-ratio="0.75">

  那么,这个padding-top: 75%;和data-ratio="0.75"的数据从哪儿来呢?在你上传图片的时候,需要后台给你返回原始宽高值,计算得到宽高比,然后保存到data-ratio上。

  好奇心日报采用的第二种方案,主要在于第一种方案对第三方输出不友好:需要对img设置额外的样式,但第三方平台通常不允许引入外部样式。

  确定第二种方案之后,我们定义了一个设置图片高度的函数:

// 重置图片高度,仅限文章详情页
function resetImgHeight(els, placeholder) {
var ratio = 0,
i, len, width; for (i = 0, len = els.length; i < len; i++) {
els[i].src = placeholder; width = els[i].clientWidth; //一定要使用clientWidth
if (els[i].attributes['data-ratio']) {
ratio = els[i].attributes['data-ratio'].value || 0;
ratio = parseFloat(ratio);
} if (ratio) {
els[i].style.height = (width * ratio) + 'px';
}
}
}

  我们将以上代码的定义和调用都直接放到了HTML中,就为了一个目的,第一时间计算图片的高度值,降低用户感知到页面抖动的可能性,保证最佳效果。

  注意事项
  1⃣️、避免图片过早加载,把临界值调低一点。在实际项目中,并不需要过早就把图片请求过来,尤其是Mobile项目,过早请求不仅浪费流量,也会因为请求太多,导致页面加载速度变慢。
  2⃣️、为了最好的防抖效果,设置图片高度的JS代码内嵌到HTML中以便第一时间执行。
  3⃣、根据图片宽度设置高度时,使用clientWidth而不是width。这是因为Safari中,第一时间执行的JS代码获取图片的width失败,所以使用clientWidth解决这个问题。

4.JS/CSS按需打包
  推荐前端构建工具webpack
  http://webpack.github.io/docs/
  好奇心日报是典型的多页应用,为了缓存通用代码,我们使用webpack按需打包的同时,还利用webpack的CommonsChunkPlugin 插件抽离出公用的JS/CSS代码,便于缓存,在请求数量和公用代码的缓存之间做了一个很好的平衡。

减小请求大小-->
1.JS/CSS/HTML压缩
  这也是常规手段,就不介绍太多,主要的方式有:
  (1) 通过构建工具实现,比如webpack/gulp/fis/grunt等。
  (2) 后台预编译。
  (3) 利用第三方online平台,手动上传压缩。

  无论是第二种还是第三种方式,都有其局限性,第一种方法是目前的主流方式,凭借良好的插件生态,可以实现丰富的构建任务。
  在好奇心日报的项目中,使用webpack & gulp作为构建系统的基础。
  1⃣️: JS压缩:使用webpack的UglifyJsPlugin插件,同时做一些代码检测。

new webpack.optimize.UglifyJsPlugin({
mangle: {
except: ['$super', '$', 'exports', 'require']
}
})

  2⃣️: CSS压缩:使用cssnano压缩,同时使用postcss做一些自动化操作,比如自动加前缀、属性fallback支持、语法检测等。

var postcss = [
cssnano({
autoprefixer: false,
reduceIdents: false,
zindex: false,
discardUnused: false,
mergeIdents: false
}),
autoprefixer({ browers: ['last 2 versions', 'ie >= 9', '> 5% in CN'] }),
will_change,
color_rgba_fallback,
opacity,
pseudoelements,
sorting
];

  3⃣️: HTML压缩:使用htmlmin压缩HTML。

// 构建视图文件-build版本
gulp.task('build:views', ['clean:views'], function() {
return streamqueue({ objectMode: true },
gulp.src(config.commonSrc, { base: 'src' }),
gulp.src(config.layoutsSrc, { base: 'src' }),
gulp.src(config.pagesSrc, { base: 'src/pages' }),
gulp.src(config.componentsSrc, { base: 'src' })
)
.pipe(plumber(handleErrors))
.pipe(logger({ showChange: true }))
.pipe(preprocess({ context: { PROJECT: project } }))
.pipe(gulpif(function(file) {
if (file.path.indexOf('.html') != -1) {
return true;
} else {
return false;
}
}, htmlmin({
removeComments: true,
collapseWhitespace: true,
minifyJS: true,
minifyCSS: true,
ignoreCustomFragments: [/<%[\s\S]*?%>/,
/<\?[\s\S]*?\?>/,
/<meta[\s\S]*?name="viewport"[\s\S]*?>/]
})))
.pipe(gulp.dest(config.dest));
});

2.gzip压缩
  gzip压缩也是比较常规的优化手段。前端并不需要做什么实际的工作,后台配置下服务器就行,效果非常明显。如果你发现你的网站还没有配置gzip,那么赶紧行动起来吧。
  如果浏览器支持gzip压缩,在发送请求的时候,请求头(request Headers)中会带有Accept-Encoding:gzip。然后服务器会将原始的response进行gzip压缩,并将gzip压缩后的response传输到浏览器,紧接着浏览器进行gzip解压缩,并最终反馈到网页上。
  但需要注意,gzip压缩会消耗服务器的性能,不能过度压缩。
  所以推荐只对JS/CSS/HTML等资源做gzip压缩。图片的话,托管到第三方的图片建议开启gzip压缩,托管到自己应用服务器的图片不建议开启gzip压缩。
3.JS/CSS按需加载
  webpack的require
4.图片压缩和JPG优化

  https://tinypng.com/ (近乎于无损压缩)

参考:http://www.jianshu.com/p/d857c3ff78d6

前端优化 - 打开速度1s的更多相关文章

  1. dede 优化打开速度

    织梦DedeCMS本地后台运行速度慢 不知道从什么时候开始,织梦DedeCMS在本地PHP环境进行测试的时候,后台的运行反应会非常的慢,经常过了很久都没有反应.运行很久之后,还会出现了“\includ ...

  2. 优化Laravel网站打开速度

    Laravel是一个功能强大的框架,组件很多,代码也很庞大,它的易用方便是牺牲了性能的,即便如此它仍然是一个优秀的框架,但在正式环境下要做好优化提升网站的打开速度. 1.关闭debug 打开.env文 ...

  3. Angular4--提速--提升Angular项目的首页打开速度(包含微信登录优化)

    Angular项目的首页打开速度很慢,有时候会有几秒的加载时间.如果在手机端访问的话,怕是要等待十多秒,这对用户体验很差.下面参考http://www.cnblogs.com/feiyu159/p/8 ...

  4. 进一步优化SPA的首屏打开速度(模块化与懒载入) by 嗡

    前言 单页应用的优点在于一次载入全部页面资源,利用本地计算能力渲染页面.提高页面切换速度与用户体验.但缺点在于全部页面资源将被一次性下载完,此时封装出来的静态资源包体积较大,使得第一次打开SPA页面时 ...

  5. 前端优化系列之一:dns预获取 dns-prefetch 提升页面载入速度

    问题:怎么做到dns域解析?   用于优化网站页面的图片   问题:怎么提升网站性能? dns域解析,是提升网站的一个办法.   DNS Prefetch,即DNS预获取,是前端优化的一部分. 一般来 ...

  6. 提高网站打开速度的7大秘籍---依据Yslow工具的优化【转】

    很多站长使用虚拟主机来做网站,网页内容一旦很多,网站打开速度就会特别慢,如果说服务器.带宽.CDN这类硬指标我们没有经济实力去做,不妨通过网页代码优化的方式来提高速度,卢松松总结了一些可行性的方法. ...

  7. 【前端优化之渲染优化】大屏android手机动画丢帧的背后

    前言 上周我与阿里的宇果有一次技术的交流,然后对天猫H5站点做了一些浅层次的分析,后面点时间基本天天都会有联系,中途聊了一些技术细节.聊了双方团队在干什么,最后聊到了前端优化.因为我本身参与了几次携程 ...

  8. 关于大型网站技术演进的思考(二十一)--网站静态化处理—web前端优化—下【终篇】(13)

    本篇继续web前端优化的讨论,开始我先讲个我所知道的一个故事,有家大型的企业顺应时代发展的潮流开始投身于互联网行业了,它们为此专门设立了一个事业部,不过该企业把这个事业部里的人事成本,系统运维成本特别 ...

  9. 转:浅谈CSS在前端优化中一些值得注意的关键点

    前端优化工作中要考虑的元素多种多样,而合理地使用CSS脚本可以在很大程度上优化页面的加载性能,以下我们就来浅谈CSS在前端优化中一些值得注意的关键点: 当谈到Web的“高性能”时,很多人想到的是页面加 ...

随机推荐

  1. CH模拟赛 拆地毯

    /* MST,注意只能加K条边,但是备选是M条边 */ #include<iostream> #include<cstdio> #include<string> # ...

  2. [Windows] win7 配置Java开发环境

    Installed Softwares Git for windows 64 bit Java 7 & 8 64 bit apache maven 3.3.3 Intellij Idea ID ...

  3. jvm--2.类加载机制

    3.JVM类加载机制 (1)类加载机制 虚拟机把描述类的数据从Class文件,用ClassLoader ,加载到内存,并对数据进行校验.转换解析和初始化,最终形成虚拟机直接使用的java类型, 这就是 ...

  4. IOS与Android APP界面设计规范要点

    IOS篇 一.尺寸及分辨率 iPhone界面尺寸:320*480.640*960.640*1136 iPhone6:4.7英寸(1334×750),iPhone6 Plus:5.5英寸(1920×10 ...

  5. Django Restful Framework (二): ModelSerializer

    时常,你需要对django model 的实例进行序列化.ModelSerializer 类提供了一个捷径让你可以根据 Model 来创建 Serializer. ModelSerializer 类和 ...

  6. docker版wordpress

    拉取wordpress镜像 docker pull wordpress:latest 创建mysql 容器docker run --name wordpress-mysql -e MYSQL_ROOT ...

  7. Cordova环境搭建 & HelloWorld

    目前的手机APP有三类:原生APP,WebAPP,HybridApp:HybridApp结合了前两类APP各自的优点,越来越流行. Cordova就是一个中间件,让我们把WebAPP打包成Hybrid ...

  8. Circular Buffer

    From:http://bradforj287.blogspot.com/2010/11/efficient-circular-buffer-in-java.html import java.util ...

  9. connect/express 的参考

    1.Node.js[5] connect & express简介    对connect中间件的分类比较容易理解. http://www.cnblogs.com/luics/archive/2 ...

  10. MVC 定时执行任务

    环境:.net4.5 需求:需要一个方法定时执行任务 解决: System.Threading.Timer 提供以指定的时间间隔执行方法的机制. 此类不能被继承,有10多种实例化方法,满足多种情况. ...