1. 基本要求

前端界面显示的速度一般要求是：60fps

2. 根据要求 1s / 60 = 16.67ms 即：处理一个界面的时间，除了浏览器自己需要的时间，开发者能使用的时间大概10ms

10ms中处理的流程为：

javascript > style > layout > paint > composite

如果JS的操作影响到了界面样式的变化，则有上面的处理流程

如果style的操作影响到布局，则会进入layout，反之亦然；style改了transform属性，在blink和edge浏览器里面不需要layout和paint

3. 减少渲染堵塞

避免head标签JS堵塞

异步加载JS: HTML5 的script 属性 defer

JS写在body后面

Tips: 可能有时候JS库，还没加载完就要执行了，可能会报错

减少 head 中的 CSS 资源

CSS 会影响到 layout ，写在Body里面会界面闪烁，但写在Head里面如果太多会影响渲染

不要写太多base64，虽然很方便，但会改变文件大小

如果CSS文件没有达到三位数的大小，可以直接写到Html界面中，因为如果使用外链样式，则可能会花费更多时间，如DNS解析，建立链接，下载等

优化图片，使用响应式图片，图片的srcset 属性，会有兼容问题

<img srcset='photo_w350.jpg 1x photo_w640.jpg 2x' src='phtot_w350.jpg' alt=''>

使用picture按需加载，需要写在HTML中，如果使用JS来调用，则无效

<picture>

<source srcset='baner_w1000.jpg' media="(min-width:801px)"> # source 还有其它的优化属性，不过会有兼容问题: type='image/webp'

<source srcset='baner_w800.jpg' media="(max-width:800px)">

<img src='baner_w800.jpg' alt=''> # picture 必需有 img 标签，只有img标签才会触发onload事件; picture 与 source 都不触发 layout

</picture>

判断浏览器是否支持：

var supportSrcset = 'srcset' in document.createElement('img');

var surportPicture = 'HTMLPictureElement' in window;

延迟加载

<picture>

<source data-srcset="photo_w350.jpg 1x, photo_w640.jpg 2x">

<img data-src="photo_w350.jpg" src="about:blank" alt=""> # src 写为此值不会报错，也对浏览器友好

</picture>

监听Scroll事件

showImage(leftSpace = 500){

var scrollTop = $window.scrollTop(), $containers = this.$imgContainers, scrollPosition = $window.scrollTop() + $window.height();

for(var i = 0; i < $containers.length; i++){

//如果快要滑到图片的位置了

var $container = $containers.eq(i);

if($container.offset().top - scrollPosition < leftSpace) {

this.ensureImgSrc($container);

}

}

}

ensureImgSrc($container) {

var $source = $container.find("source");

if($source.length && !$source.attr("srcset")){

$source.attr("srcset", $source.data("srcset"));

}

var $img = $container.find("img:not(.loading)");

if($img.length && $img.attr("src").indexOf("//") < 0){

$img.attr("src", $img.data("src"));

this.shownCount++;

}

}

init(){

//初始化

var leftSpace = 0;

this.showImage(leftSpace);

//滑动

$window.on("scroll", this, this.throttleShow);

}

ensureImgSrc($container){

//如果全部显示，off掉window.scroll

if(this.shownCount >= this.allCount){

$window.off("scroll", this.throttleShow);

}

}

指定图片尺寸，避免 reflow

4. 压缩与缓存

作用

第一个是把200变成304，避免资源重新传输，

第二个是让浏览器直接从缓存取，连http请求都不用了，这样对于第二次访问页面是极为有利的。

开启压缩 gzip

server {

gzip on;

gzip_types text/plain application/javascript application/x-javascript text/html text/css text/xml text/javascript

}

缓存 Cache-Control

location ~* \.(jpg|gif|png|webp) {

expires 30d;

}

location ~* \.(css|js) {

expires 1d;

}

此方法会在返回的请求响应头中添加 Cache-Control: max-age=604800 ， 且 max-age 的优先级会大于 last-modified

开启 nginx last-modified 字段，在响应头中： last-modified 字段接收nginx的数据，在请求头中： If-Modified-Since 字段返回给nginx

这个办法得查手册

使用etag，在响应头中是： Etag 字段 ，在请求头中会记录在 If-None-Match 字段

server {

etag on;

}

5. 其它优化

DNS预读取

<link rel="dns-prefection" href="https://www.google.com"> # 在Head标签中添加相应的域名，由于它是并行的，不会堵塞页面渲染

HTML优化

删除注释、缩进，除了 pre 或 code 这样的标签不能删除，其它的都可以

代码优化

例如说html别嵌套太多层，否则加重页面layout的压力

CSS的选择器别写太复杂，不然匹配的计算量会比较大

JS的滥用闭包，闭包会加深作用域链，加长变量查找的时间

6. 利用HTML5或CSS3

代替图片 或 LocalStorage、 Offline Storage