做出Uber移动网页版还不够 极致性能打造才见真章

之前分享过几篇关于React技术栈的原创文章:

今天进一步剖析一个实际案例:Uber APP 移动网页版。

如果你对React技术栈没有多大兴趣,或者不是很了解,也没有关系。因为读下来,你会发现,这篇文章的真谛其实在于性能优化上。

本文灵感和主体内容翻译自Narendra N Shetty的文章:How I built a super fast Uber clone for mobile web,同时进行了大量扩充以及深挖。

出发点和产品雏形

很早以来,相信大家都会认同一个观点:移动端流量超越PC端是不争的事实。对于前端开发者来说,移动端web的开发同样非常有趣,也充满挑战。

这不,Uber最近发布了最新版本APP,全新样式,体验超棒。于是,笔者决定使用React来从零开始构建一个新的属于自己的Uber。

开发期间,笔者花费了很多时间在基础组件和样式搭建上。这环节中,主要应用了Uber官方开放的React地图库,并在地图上“目的地”和“起始点”之间采用svg-overlay和html-overlay去绘制路线。

最终的基本交互可以参考下面Gif图:

uber.gif

走上优化之路

现在,我们有基本的产品形态了。目前面临的问题在于提高产品的各方面性能体验。我使用了Chrome Lighthouse去检验产品的性能表现。最终得到的结果为:

结果1.png

wow...
第一次绘制时间就已经接近2秒,后面的时间惨不忍睹就不要看了吧。
想象一下,一个用户拿出手机,企图叫车。主屏时间的绘制就超过了19189.9ms,这是极其不能忍受的。

接下来,什么也不说了,撸起袖子,想办法去优化吧。

优化方法1-代码分离(Code Splitting)

我最开始想到并使用的方法就是:Code Splitting(代码分离),正好我们可以借助webpack来实现这项技术。
什么是webpack code splitting呢? 您可以参考这里,如果英语阅读吃力,可以参考下面引文:

code splitting就是指将文件分割为块(chunk),webpack使我们可以定义一些分割点(split point),根据这些分割点对文件进行分块,并实现按需加载。

因为笔者使用了React技术栈,并采用了react-router,所以代码的划分(split)就可以按照路由和加载时机进行。具体操作可以使用react-router的getComponent api来实现:

<Route path="home" name="home" getComponent={(nextState, cb) => {
    require.ensure([], (require) => {
        cb(null, require('../components/Home').default);
    }, 'HomeView');
}}> 

只有当对应路由被请求时,相应的组件才会被加载呈现。

同时,笔者使用了webpack的CommonChunkPlugin插件提取第三方代码。这是出于什么考虑呢?

细心的读者可能会发现上面的code splitting也许会存在一个问题:
按需(按路由)引入资源后,这些资源可能存在大量重复代码。尤其是我们使用的第三方资源。
想明白这个问题,这时候,你应该就会明白CommonChunkPlugin这个插件的意义了。关于这个插件配置方法有多种,这里我们采用了:有选择性的提取(对象方式传参):

{
    'entry': {
        'app': './src/index.js',
        'vendor': [
            'react',
            'react-redux',
            'redux',
            'react-router',
            'redux-thunk'
        ]
    },
    'output': {
        'path': path.resolve(__dirname, './dist'),
        'publicPath': '/',
        'filename': 'static/js/[name].[hash].js',
        'chunkFilename': 'static/js/[name].[hash].js'
    },
    'plugins': [
        new webpack.optimize.CommonsChunkPlugin({
            name: ['vendor'], // 公共块的块名称
            minChunks: Infinity, // 最小被引用次数,最小是2。传递Infinity只是创建公共块,但不移动模块。 
            filename: 'static/js/[name].[hash].js', // 公共块的文件名
        }),
    ]
}

这样子,我们把公共代码(react、react-redux、redux、react-router、redux-thunk)专门抽取到vendor模块中。

通过上述方法,笔者欣喜地发现:
First meaningful paint时间由19189.9ms缩短到4584.3ms:

结果2

这无疑是激动人心的。

优化方法2-Server side rendering(服务端直出)

也许你一直在听说过“服务端渲染”或者“服务端直出”这样的名词。但是从未实践过,也从来没有了解过他的意义。好吧,这里我先描述一下,到底什么是服务端直出。

服务端直出,其实简单总结为服务器在接到来自浏览器第一次请求时,便返回一个“初步最终”HTML文档。这个HTML文档已经进行了数据拼接。这样用户能以最快的时间看到首屏的效果,当然这个效果是“阉割版”的,非最终版本。

这种方式主要是针对“前后分离”的传统模式。传统模式中,服务器返回HTML文档,之后浏览器解析文档标签,拉取CSS,之后拉取JS文件。JS文件加载完成之后,执行JS内容,并发送请求获取数据。最终,将数据渲染在页面上。

由此,Server side rendering方式将JS请求数据的过程放在了服务器上,甚至对于数据与HTML结合处理也可以在服务器上做。

这样一来,主要就是加快了首屏渲染时间。当然,使用服务端渲染,还能够优化前端渲染难以克服的SEO问题。

理论理解起来很简单,难处就在于服务器端环境的前端脚本如何处理,如何与客户端保持一致。

在这个项目中,我使用了Express作为nodeJS框架,结合react-router完成:

server.use((req, res)=> {
    match({
    'routes': routes,
    'location': req.url
    }, (error, redirectLocation, renderProps) => {
        if (error) {
            res.status(500).send(error.message);
        } 
        else if (redirectLocation) {
            res.redirect(302, redirectLocation.pathname + redirectLocation.search);
        } 
        else if (renderProps) {
            // Create a new Redux store instance
            const store = configureStore();

            // Render the component to a string
            const html = renderToString(<Provider store={store}><RouterContext {...renderProps} /></Provider>);

            const preloadedState = store.getState();

            fs.readFile('./dist/index.html', 'utf8', function (err, file) {
                if (err) {
                    return console.log(err);
                }
                let document = file.replace(/<div id="app"><\/div>/, `<div id="app">${html}</div>`);
                document = document.replace(/'preloadedState'/, `'${JSON.stringify(preloadedState)}'`);
                res.setHeader('Cache-Control', 'public, max-age=31536000');
                res.setHeader("Expires", new Date(Date.now() + 2592000000).toUTCString());
                res.send(document);
            });
        } 
        else {
            res.status(404).send('Not found')
        }
    });
});

通过上述方法,我们欣喜地发现:
First meaningful paint时间已经缩短到921.5ms:

结果3

这无疑是令人振奋的。

优化方法3-Compressed static assets(压缩静态文件)

压缩文件,当然是一个容易想到而且行之有效的措施。为此,我使用了webpack的CompressionPlugin插件:

{
    'plugins': [
        new CompressionPlugin({
            test: /\.js$|\.css$|\.html$/
        })
    ]
}

同时,使用express-static-gzip来对服务端进行配置:

server.use('/static', expressStaticGzip('./dist/static', {
    'maxAge': 31536000,
    setHeaders: function(res, path, stat) {
    res.setHeader("Expires", new Date(Date.now() + 2592000000).toUTCString());
        return res;
    }
}));

express-static-gzip是一个处于express.static之上的中间件。如果对于指定路径的文件没有找到压缩版本,就使用为压缩版本进行返回。

经过此处理,我们缩短了400ms时间,OK,现在First meaningful paint时间为546.6ms.

结果4

优化方法4-Caching(缓存)

截止到此,我们已经从最初的19189.9ms已经优化到546ms,我们当然继续可以在客户端进行静态文件缓存来使得加载时间变得更短。

笔者使用了sw-toolbox搭配service workers进行。

sw-toolbox:A collection of service worker tools for offlining runtime requests.
Service Worker Toolbox provides some simple helpers for use in creating your own service workers. Specifically, it provides common caching strategies for dynamic content, such as API calls, third-party resources, and large or infrequently used local resources that you don't want precached.

简单翻译下:
Service Worker实现常见运行时缓存模式,例如动态内容、API调用以及第三方资源,实现方法就像编写README一样简单。

也许到这里你一头雾水,没关系,我们从最初开始,了解一下什么是service worker:

在2014年,W3C公布了service worker的草案,service worker提供了很多新的能力,使得web app拥有与native app相同的离线体验、消息推送体验。
service worker是一段脚本,与web worker一样,也是在后台运行。
作为一个独立的线程,运行环境与普通脚本不同,所以不能直接参与web交互行为。native app可以做到离线使用、消息推送、后台自动更新,service worker的出现是正是为了使得web app也可以具有类似的能力。

而sw-toolbox,顾名思义,就是service worker一个toolbox,具体我们看代码:

toolbox.router.get('(.*).js', toolbox.fastest, {
    'origin':/.herokuapp.com|localhost|maps.googleapis.com/,
    'mode':'cors',
    'cache': {
        'name': `js-assets-${VERSION}`,
        'maxEntries': 50,
        'maxAgeSeconds': 2592e3
    }
});

上面代码的意思是,我们对于get类型的请求,当请求内容为js脚本时,应用toolbox.fastest handler处理。
toolbox.fastest指示:对于这个请求,我们既从缓存中获取,也同时通过正常的请求network获取。这两种方式哪个返回快,就应用哪一个。
另外,toolbox.router.get的第三个参数表示配置项。

考虑周到的读者可能会想,上面是对于支持Service worker的浏览器,那么对于不支持的浏览器呢?我们干脆设置:

res.setHeader("Expires", new Date(Date.now() + 2592000000).toUTCString());

通过这样处理,我们来直观感受一下页面加载瀑布流:

使用Service worker
不使用Service worker

优化方法5-Preload and then load(预加载/延后加载)

如果你还没听说过“Preload”,不要紧。我们这就来了解一下:

Preload作为一个新的web标准,旨在提高性能和为web开发人员提供更细粒度的加载控制。Preload使开发者能够自定义资源的加载逻辑,且无需忍受基于脚本的资源加载器带来的性能损失。

换成你能听明白的话来说:
preload建议允许始终预加载某些资源,浏览器必须请求preload标记的资源。

这样子,究竟有什么意义呢?
举个例子:比如一些隐藏在CSS和Javascript中的资源。
当浏览器发现自己需要这些资源时已经为时已晚,所以大多数情况,这些资源的加载都会对页面渲染造成延迟。

preload的出现就是为了优化这个过程。
对于preload的兼容性,可以参考这里。

对于不支持preload的浏览器,笔者使用了prefetch来处理。
但于preload不同,prefetch的作用是告诉浏览器加载下一页面可能会用到的资源,注意,是下一页面,而不是当前页面。因此该方法的加载优先级非常低。

这些新标准其实很有意思,里面的内容远不止这些。有兴趣的同学可以自行了解,也欢迎与我讨论。

回到正题,我在head标签中使用:

<link rel="preload" ... as="script">

最终优化的结果如图:

最终结果

总结

其实,使用React+Webpack做出一个Uber已经不是重点了。真正激动人心的是整套流程的优化之路。我们使用了大量成熟的、未成熟(新技术),希望对读者有所启发!

Happy Coding!

PS: 作者Github仓库,欢迎通过代码各种形式交流。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 206,839评论 6 482
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 88,543评论 2 382
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 153,116评论 0 344
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 55,371评论 1 279
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 64,384评论 5 374
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 49,111评论 1 285
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,416评论 3 400
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 37,053评论 0 259
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 43,558评论 1 300
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,007评论 2 325
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,117评论 1 334
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,756评论 4 324
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,324评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,315评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,539评论 1 262
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 45,578评论 2 355
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,877评论 2 345

推荐阅读更多精彩内容