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. Python自动化运维——IP地址处理模块

    Infi-chu: http://www.cnblogs.com/Infi-chu/ 模块:IPy 功能:辅助我们高效的完成IP的规划工作 安装: wget https://pypi.python.o ...

  2. SIMD数据并行（三）——图形处理单元（GPU）

    在计算机体系中,数据并行有两种实现路径:MIMD(Multiple Instruction Multiple Data,多指令流多数据流)和SIMD(Single Instruction Multip ...

  3. 42-EF Core Migration

    1-常用命令 1-由于2.1版本有点不一样,不会自动创建ApplicationUser类,发现合并没效果.暂时略 增加一个字段 E:\coding\netcore\IdentitySample> ...

  4. Java线程：概念与使用

    Java线程大总结 原文章地址:一篇很老的专栏,但是现在看起来也感觉深受启发,知识点很多,很多线程特点我没有看,尴尬.但是还是整理了一下排版,转载一下. 操作系统中线程和进程的概念 在现代操作系统中, ...

  5. c#获取当前运行程序所在的目录

    C#获取项目程序及运行路径的方 1.asp.net webform用“Request.PhysicalApplicationPath获取站点所在虚拟目录的物理路径,最后包含“\”:   2.c# wi ...

  6. jmeter接口测试--响应结果Unicode转码成中文

    jmeter接口测试-响应结果Unicode转码成中文 一般情况下,接口返回数据都会经过加密,所以有时相应结果会显示为Unicode,因此,需添加BeanShell PostProcessor,加入代 ...

  7. Python全栈 MongoDB 数据库（聚合、二进制、GridFS、pymongo模块）

    断网了2天  今天补上     聚合操作: 对文档的信息进行整理统计的操作 返回:统计后的文档集合 db.collection.aggregate() 功能:聚合函数,完成聚合操作 参数:聚合条件,配 ...

  8. C# 删除文件错误 access denied

    使用以下代码正常删除整个文件夹内容时,报错如下: if (backupPathDir.Exists) { System.IO.DirectoryInfo di = new DirectoryInfo( ...

  9. adb usage

    使用安卓调试及自动化,不可避免的要使用adb,说明看起来很麻烦,进行简单记录,以便时候不时之需. usb连接手机调试就很简单了.首先,在手机端开启usb调试,即点击安卓版本项7次,就可以显示开发者菜单 ...

  10. 用Fluent实现MySQL到ODPS数据集成

    安装ruby 首先通过 /etc/issue 命令查看当前使用centos是哪个版本: [hadoop@hadoop03 ~]$  cat /etc/issue 由于centos版本是6.6,安装ru ...