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. shell重温---基础篇（shell变量&字符串以及git GUI运行shell脚本方式）

    既然是基础篇那肯定是需要对shell的各种需要注意的基本点进行说明了.接下来就是show time...    shell呢,是一个用C语言编写的应用程序,是用户使用linux的桥梁.所以呢,他既是一 ...

  2. Eclipse报错:An internal error occurred during: "Building workspace". Java heap space），卡死解决办法

    在项目工程的根目录下,找到.project,用记事本打开,把两处删除掉: 第一处: <buildCommand> <name>org.eclipse.wst.jsdt.core ...

  3. 源码解析：解析掌阅X2C 框架

    前言 掌阅出品了X2C 框架,听说可以加快性能.喜欢研究源码的我,肯定要来看下是怎么回事. 作为一个开发,应该不屑于只会使用开源框架. OK,来尝试下. 项目地址: https://github.co ...

  4. pytest 测试报告

    测试报告 运行测试用例后,为了保存结果,我们需要生成测试报告,同时可以把运行的测试报告发送相关人员查阅,这时需要安装一个插件(pytest-html) pytest-html插件安装 pip inst ...

  5. 梳理 Opengl ES 3.0 （一）宏观着眼

    Opengl ES 可以理解为是在嵌入式设备上工作的一层用于处理图形显示的软件,是Opengl 的缩水版本. 下图是它的工作流程示意图: 注意图中手机左边的EGL Layer Opengl ES是跨平 ...

  6. web3无法安装的额解决方案-----yarn命令安装web3

    凡是可以用 JavaScript 来写的应用,最终都会用 JavaScript 来写. --Atwood定律(Jeff Atwood在2007年提出) yarn命令详解 https://yarnpkg ...

  7. DFS实现模板

    以如下图的无向图G4为例,进行图的深度优先搜索: 假设从顶点v1出发进行搜索,在访问了顶点v1之后,选择邻接点v2.因为v2未曾访问,则从v2出发进行搜索.依次类推,接着从v4 .v8 .v5出发进行 ...

  8. JDBC数据源的驱动问题

    classes12.jar,ojdbc14.jar,ojdbc5.jar和ojdbc6.jar的区别,之间的差异 在使用Oracle JDBC驱动时,有些问题你是不是通过替换不同版本的Oracle  ...

  9. [C/C++] “箭头（->）”和“点号（.）”的区别

    转自:http://blog.csdn.net/gyymen/article/details/4962873 首先介绍一下C++中的结构.对于一个结构: struct MyStruct { int m ...

  10. jloi2017（shoi2017?）六省联考酱油记

    Day -n 听说了4.22.4.23的省选,而且还是六省联考. 压力山大. 尽管我只是一名高一的simple OIer,在省选到来之前,心里还是很紧张的. 毕竟自己也知道南方dalao们都是神犇,像 ...