a.css

html, body {

    padding:;

    margin: 0

}

ol.menu {

    width: 100%;

    text-align: left;

    padding: 0 !important;

    list-style: none;

    border: 0.1rem solid #ddd;

    border-radius: 0.3rem;

    margin-top: 2rem !important;

    max-width: 40rem;

    margin: 0 auto

}

ol.menu li {

    border-bottom: 0.1rem solid #ddd;

    padding: 0.2rem 0.5rem

}

ol.menu li.active {

    background-color: #F7F7F7

}

ol.menu a {

    display: block

}

index.html

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="utf-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>测试</title>

    <link rel="stylesheet" href="css/a.css">

</head>

<body>

<main class="markdown-body">

    <nav>

        <ol class="menu">

            <li class="">

                <a href="a.html">a页面</a>

            </li>

            <li class="">

                <a href="b.html">b页面</a>

            </li>

            <li class="">

                <a href="c.html">c页面</a>

            </li>

        </ol>

    </nav>

    <div id="barba-wrapper">

        <div class="barba-container homepage">

            <p>首页的内容</p>

        </div>

    </div>

</main>

<script>

    (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){

        (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),

        m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)

    })(window,document,'script','//www.google-analytics.com/analytics.js','ga');

    ga('create', 'UA-73202407-1', 'auto');

    ga('send', 'pageview');

</script>

<script src="js/barba.min.js" type="text/javascript"></script>

<script src="js/main.js" type="text/javascript"></script>

</body>

</html>

a.html

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="utf-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>测试</title>

    <link rel="stylesheet" href="css/a.css">

</head>

<body>

<main class="markdown-body">

    <nav>

        <ol class="menu">

            <li class="">

                <a href="a.html">a页面</a>

            </li>

            <li class="">

                <a href="b.html">b页面</a>

            </li>

            <li class="">

                <a href="c.html">c页面</a>

            </li>

        </ol>

    </nav>

    <div id="barba-wrapper">

        <div class="barba-container homepage">

            <p>A 页面的内容</p>

        </div>

    </div>

</main>

<script>

    (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){

        (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),

        m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)

    })(window,document,'script','//www.google-analytics.com/analytics.js','ga');

    ga('create', 'UA-73202407-1', 'auto');

    ga('send', 'pageview');

</script>

<script src="js/barba.min.js" type="text/javascript"></script>

<script src="js/main.js" type="text/javascript"></script>

</body>

</html>

barba 页面渲染的更多相关文章

  1. 【前端性能】高性能滚动 scroll 及页面渲染优化

    最近在研究页面渲染及web动画的性能问题,以及拜读<CSS SECRET>(CSS揭秘)这本大作. 本文主要想谈谈页面优化之滚动优化. 主要内容包括了为何需要优化滚动事件,滚动与页面渲染的 ...

  2. 【前端性能】高性能滚动 scroll 及页面渲染优化--转发

    本文主要想谈谈页面优化之滚动优化. 主要内容包括了为何需要优化滚动事件,滚动与页面渲染的关系,节流与防抖,pointer-events:none 优化滚动.因为本文涉及了很多很多基础,可以对照上面的知 ...

  3. 高性能滚动 scroll 及页面渲染优化

    最近在研究页面渲染及web动画的性能问题,以及拜读<CSS SECRET>(CSS揭秘)这本大作. 本文主要想谈谈页面优化之滚动优化. 主要内容包括了为何需要优化滚动事件,滚动与页面渲染的 ...

  4. 加载 CSS 时不影响页面渲染

    转自:http://www.oschina.net/translate/loading-css-without-blocking-render 本文展示了一种技术,它能通过异步下载样式表,以阻止它们的 ...

  5. 我是怎么发现并解决项目页面渲染效率问题的（IE调试工具探查器的使用）

    #我是怎么发现并解决项目页面渲染效率问题的(IE调试工具探查器的使用) ##背景 之前的项目中,有很多的登记页面,一般都有100-200甚至更加多的字段,而且还涉及到字典.日期及其他效果的显示,载入时 ...

  6. 前端高性能滚动 scroll 及页面渲染优化

    前言 最近在研究页面渲染及web动画的性能问题,以及拜读<CSS SECRET>(CSS揭秘)这本大作.本文主要想谈谈页面优化之滚动优化. 主要内容包括了为何需要优化滚动事件,滚动与页面渲 ...

  7. 微信小程序--ajax服务器交互及页面渲染

    网上找的帖子大多是直接在onload中请求数据.而我想实现的是点击按钮,然后请求服务器,接着返回数据,前端页面渲染.所以搞了挺久的,在此记录一下. 请求是按照微信官方给出的,wx.request 在这 ...

  8. 多进程浏览器、多线程页面渲染与js的单线程

    线程与进程 说到单线程,就得从操作系统进程开始说起.在早期的操作系统中并没有线程的概念,进程是能拥有资源和独立运行的最小单位,也是程序执行的最小单位.任务调度采用的是时间片轮转的抢占式调度方式,而进程 ...

  9. JS学习笔记：（一）浏览器页面渲染机制

    浏览器的内核主要分为渲染引擎和JS引擎.目前市面上常见的浏览器内核可以分为这四种:Trident(IE).Gecko(火狐).Blink(Chrome.Opera).Webkit(Safari).这里 ...

随机推荐

  1. Verilog学习笔记基本语法篇（七）········ 生成块

    生成块可以动态的生成Verilog代码.可以用于对矢量中的多个位进行重复操作.多个模块的实例引用的重复操作.根据参数确定程序中是否包含某段代码.生成语句可以控制变量的声明.任务和函数的调用.还能对实例 ...

  2. SELECT(データ取得)

    WHERE 句は.満たすべき条件を指定することにより選択される行数を制限します. WHERE 句は.SELECT 命令と同様に OPEN CURSOR.UPDATE.および DELETE 命令でも使用 ...

  3. 如何将h5网页改成微信网页

    1.如何将h5网页改成微信网页 1.设置安全域名          先登录微信公众平台进入“公众号设置”的“功能设置”里填写“JS接口安全域名”.         备注:登录后可在“开发者中心”查看对 ...

  4. HBase 伪分布式环境搭建及基础命令使用

    一.前提条件: (1)文件存储在HDFS文件系统之上.因此必须启动hadoop服务.(namenode,datanode,resourcemanager,nodemanager,historyserv ...

  5. DDL失败案例

    问题描述 今天对线上某个业务的大表120G进行重建表操作时遇到报错,该表有个比较显著的特征是*写入量比较大,每天写入加更新的频率在数千万级别.大致的环境 1 版本:Percona 5.6.24 2 操 ...

  6. webapi到处excel

    最近项目用的webapi前几天做了个导出excel功能,给大家分享下,自己也记录下... 在用的过程中,可以直接请求就可以得到下载的excel文件,在实际的项目中可以通过js打开新页面,encodeU ...

  7. PHP通过copy()函数来复制一个文件

    PHP通过copy()函数来复制一个文件.用法如下: bool copy(string $source, string $dest) 其中$source是源文件的路径,$dest是目的文件的路径.函数 ...

  8. mysql 大数据分页查询优化

    应用场景: 当有一张表的数据非常大,需要使用到分页查询,分页查询在100w条后查询效率非常低: 解决方案: 1.业务层解决:只允许用户翻页一百页以内,十条一页: 2.使用where id > 5 ...

  9. springmvc基础篇—使用注解方式为前台提供数据

    一.新建一个Controller package cn.cfs.springmvc.service; import java.util.ArrayList; import java.util.Hash ...

  10. 剑指offer-树的子结构17

    题目描述 输入两棵二叉树A,B,判断B是不是A的子结构.(ps:我们约定空树不是任意一个树的子结构) class Solution: def issubTree(self,pRoot1,pRoot2) ...