首屏作为直面用户的第一屏, 其重要性不言而喻, 如何加快加载的速度是非常重要的一课.
本文讲解的是: 笔者对自己搭建的个人博客网站的速度优化的经历.
效果体验地址: http://biaochenxuying.cn/
1. 用户期待的速度体验
2018 年 8 月, 百度搜索资源平台发布的《百度移动搜索落地页体验白皮书 4.0 》中提到: 页面的首屏内容应在 1.5 秒内加载完成.
也许有人有疑惑: 为什么是 1.5 秒内? 哪些方式可加快加载速度? 以下将为您解答这些疑问!
移动互联网时代, 用户对于网页的打开速度要求越来越高. 百度用户体验部研究表明, 页面放弃率和页面的打开时间关系如下图所示:
根据百度用户体验部的研究结果来看, 普通用户期望且能够接受的页面加载时间在 3 秒以内. 若页面的加载时间过慢, 用户就会失去耐心而选择离开, 这对用户和站长来说都是一大损失.
百度搜索资源平台有 "闪电算法" 的支持, 为了能够保障用户体验, 给予优秀站点更多面向用户的机会,"闪电算法" 在 2017 年 10 月初上线.
- // Source maps are resource heavy and can cause out of memory issue for large source files.
- const shouldUseSourceMap = process.env.GENERATE_SOURCEMAP !== 'false';
- // 把上面的代码修改为:
- const shouldUseSourceMap = process.env.NODE_ENV === 'production' ? false : true;
- {
- test: [/\.bmp$/, /\.gif$/, /\.jpe?g$/, /\.PNG$/,/\.jpg$/,/\.svg$/],
- loader: require.resolve('url-loader'),
- options: {
- limit: 40000, // 把默认的 10000 修改为 40000
- name: 'static/media/[name].[hash:8].[ext]',
- },
- }
- import { combineReducers } from 'redux'
- import { connectRouter } from 'connected-react-router'
- // import { home } from './module/home'
- import { user } from './module/user'
- import { articles } from './module/articles'
- const rootReducer = (history) => combineReducers({
- // home,
- user,
- articles,
- router: connectRouter(history)
- })
- // fn 是事件回调, delay 是时间间隔的阈值
- function throttle(fn, delay) {
- // last 为上一次触发回调的时间, timer 是定时器
- let last = 0,
- timer = null;
- // 将 throttle 处理结果当作函数返回
- return function() {
- // 保留调用时的 this 上下文
- let context = this;
- // 保留调用时传入的参数
- let args = arguments;
- // 记录本次触发回调的时间
- let now = +new Date();
- // 判断上次触发的时间和本次触发的时间差是否小于时间间隔的阈值
- if (now - last <delay) {
- // 如果时间间隔小于我们设定的时间间隔阈值, 则为本次触发操作设立一个新的定时器
- clearTimeout(timer);
- timer = setTimeout(function() {
- last = now;
- fn.apply(context, args);
- }, delay);
- } else {
- // 如果时间间隔超出了我们设定的时间间隔阈值, 那就不等了, 无论如何要反馈给用户一次响应
- last = now;
- fn.apply(context, args);
- }
- };
- }
- // 获取可视区域的高度
- const viewHeight = Windows.innerHeight || document.documentElement.clientHeight;
- // 用新的 throttle 包装 scroll 的回调
- const lazyload = throttle(() => {
- // 获取所有的图片标签
- const imgs = document.querySelectorAll('#list .wrap-img img');
- // num 用于统计当前显示到了哪一张图片, 避免每次都从第一张图片开始检查是否露出
- let num = 0;
- for (let i = num; i <imgs.length; i++) {
- // 用可视区域高度减去元素顶部距离可视区域顶部的高度
- let distance = viewHeight - imgs[i].getBoundingClientRect().top;
- // 如果可视区域高度大于等于元素顶部距离可视区域顶部的高度, 说明元素露出
- if (distance>= 100) {
- // 给元素写入真实的 src, 展示图片
- let hasLaySrc = imgs[i].getAttribute('data-has-lazy-src');
- if (hasLaySrc === 'false') {
- imgs[i].src = imgs[i].getAttribute('data-src');
- imgs[i].setAttribute('data-has-lazy-src', true); //
- }
- // 前 i 张图片已经加载完毕, 下次从第 i+1 张开始检查是否露出
- num = i + 1;
- }
- }
- }, 1000);
- // 待返回的字段
- let fields = {
- title: 1,
- // author: 1,
- // keyword: 1,
- // content: 1,
- desc: 1,
- img_url: 1,
- tags: 1,
- category: 1,
- // state: 1,
- // type: 1,
- // origin: 1,
- // comments: 1,
- // like_User_id: 1,
- meta: 1,
- create_time: 1,
- // update_time: 1,
- };
- gzip on;
- # 该指令用于开启或关闭 gzip 模块(on/off)
- gzip_buffers 16 8k;
- # 设置系统获取几个单位的缓存用于存储 gzip 的压缩结果数据流. 16 8k 代表以 8k 为单位, 安装原始数据大小以 8k 为单位的 16 倍申请内存
- gzip_comp_level 6;
- #gzip 压缩比, 数值范围是 1-9,1 压缩比最小但处理速度最快, 9 压缩比最大但处理速度最慢
- gzip_http_version 1.1;
- # 识别 http 的协议版本
- gzip_min_length 256;
- # 设置允许压缩的页面最小字节数, 页面字节数从 header 头得 content-length 中进行获取. 默认值是 0, 不管页面多大都压缩. 这里我设置了为 256
- gzip_proxied any;
- # 这里设置无论 header 头是怎么样, 都是无条件启用压缩
- gzip_vary on;
- # 在 http header 中添加 Vary: Accept-Encoding , 给代理服务器用的
- gzip_types
- text/xml application/xml application/atom+xml application/rss+xml application/xhtml+xml image/svg+xml
- text/JavaScript application/JavaScript application/x-JavaScript
- text/x-JSON application/JSON application/x-web-App-manifest+JSON
- text/CSS text/plain text/x-component
- font/opentype font/ttf application/x-font-ttf application/vnd.ms-fontobject
- image/x-icon;
- # 进行压缩的文件类型, 这里特别添加了对字体的文件类型
- gzip_disable "MSIE [1-6]\.(?!.*SV1)";
- # 禁用 IE 6 gzip
- server {
- listen 80;
- server_name localhost;
- location / {
- root /home/blog/blog-react/build/;
- index index.HTML;
- try_files $uri $uri/ @router;
- autoindex on;
- expires 7d; # 缓存 7 天
- }
- }
来源: https://www.cnblogs.com/biaochenxuying/p/11422115.html