百度移动端首页秒开学习

xuhong 发布于2019-08-22 11:22 / 891人阅读

摘要：百度首页秒开我们打开手机端看百度首页，搜索框，新闻，图片，标签秒开那他是怎么做到呢静态文件放置百度首页是没有外链的，，代码在上线之前都编译到了里缓存对于一些页面不变的静态文件，例如如果有些不变的，就会把它存到本地，例如，可以通过对标签添加一

百度首页秒开

我们打开手机端看百度首页，搜索框，新闻，图片，tab标签... 秒开... 那他是怎么做到呢？

静态文件放置

百度首页是没有外链的，js，css代码在上线之前都编译到了html里

缓存

对于一些页面不变的静态文件，例如html/css/javascript如果有些不变的，就会把它存到本地，例如localStorage，可以通过对标签添加一些属性data-local="aaa",来标识内容，等到，再次加载的时候，就从localStorage中找到对应的内容，进行渲染

存：

取：

外链
如果都存本地的话，那手机内存会暴，所以有些静态文件又通过一个借口返回，通过外链一些静态资源和本地存的资源减少了页面加载的时间，但是问题又来了，如果请求的资源不同于本地存的，那岂不又炸了...
所以，会给每个文件以自己的内容生成的版本号为戳，标识自己的唯一性，每次服务端返回页面时，会把当前在服务器上的所有静态文件版本号，返给前端，首屏加载完成后，会用这些版本号与local中进行一一比较，如果发现不一致，就发起一个合并请求，这样可以保证每个文件的缓存与版本迭代，同时，避免了过多的外链。

缓存Dom
不变的数据，例如dom就缓存，render树基本不发生变化就进行缓存，对于可变的就不能缓存

使用iconfont
如果有很多icon图标我们最好使用iconfont，节省一些资源

卡片的异步加载与缓存
首屏显示几个卡片，等到下拉的时候在加载更多的卡片

不在首屏的就要异步化
当然，这种是我们经常用到的，首屏人人都会看到但是滑到底部就人少了，所以这种情况我们就按需加载

少量静态文件的域名
例如一些iconfont，图片就放在别的域名下，虽然节省了DNS的解析，但请求图片的时候会携带cookie所以我们要减少cookie，来提升性能

极小的图片base64化
小的图片我们base64化存到本地localStorage中，又可以节省网络请求

原文 https://segmentfault.com/a/11...

GPU云服务器云服务器 html百度首页百度K首页 php访问百度首页 html5编百度首页

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/92279.html

[聊一聊系列]聊一聊百度移动端首页前端速度那些事儿

摘要：要快，但是我们的服务也必须万无一失，后续我会分享百度移动端首页的前端架构设计那么这样的优化，是如何做到的呢，又如何兼顾稳定性，架构性，与速度呢别急，让我们把这些优化一一道来。百度移动端首页的很多就是这样缓存在客户端的。欢迎大家收看聊一聊系列，这一套系列文章，可以帮助前端工程师们了解前端的方方面面（不仅仅是代码）：https://segmentfault.com/blog/fronte...

The question 2019-06-24 17:50 评论0 收藏0
结合 Google quicklink，react 项目实现页面秒开

摘要：最后，状态管理与同构实战这本书由我和前端知名技术大佬颜海镜合力打磨，凝结了我们在学习实践框架过程中的积累和心得。对于前端资讯比较敏感的同学，可能这两天已经听说了 GoogleChromeLabs/quicklink这个项目：它由 Google 公司著名开发者 Addy Osmani 发起，实现了：在空闲时间预获取页面可视区域内的链接，加快后续加载速度。如果你没有听说过 Addy Os...

warkiz 2019-08-23 14:07 评论0 收藏0
vue项目首页加载速度优化

摘要：凡是做的项目，特别是移动端的项目，首屏加载速度必定是一个绕不过去的话题。大家知道这些依赖库的文件都会被一起打包到那个文件里面，如果这些你的第三方依赖库很多，很大的话，那就会导致这个文件很大，那首屏加载的速度肯定会被拖慢。凡是做SPA的项目，特别是移动端的SAP项目，首屏加载速度必定是一个绕不过去的话题。接下来我就我们项目里的一些实践来做一下总结。希望抛砖引玉，如果各位有更好的方案，不...

rickchen 2019-08-21 17:06 评论0 收藏0
性能优化全新思路！实践腾讯、字节、阿里、百度、网易等互联网公司项目实战+案例分析（附PDF源码）

摘要：不努力不奋斗，可能就会在基层一辈子止步不前。不过，只一句，如果你还在做这一行，还是一名程序猿媛，想走上坡路的你，也许我这到手的十几家一线互联网公司性能优化项目实战可能会对你有所帮助。 ...

ytwman 2021-09-24 09:48 评论0 收藏0