前端优化 - 打开速度1s

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

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

上一篇:iOS路径沙盒文件管理(转载)


下一篇:iOS 沙盒(sandbox)机制和文件操作