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. Linux系统下安装rz/sz命令

    执行命令 yum install -y lrzsz rz -be本地上传文件到服务器

  2. WPF中，如何将Vista Aero效果扩展到整个窗口

    原文:WPF中,如何将Vista Aero效果扩展到整个窗口   WPF中,如何将Vista Aero效果扩展到整个窗口                                         ...

  3. git 本地分支与远程分支 新建/删除/合并

    github上已经有master分支 和dev分支 在本地 git checkout -b dev 新建并切换到本地dev分支 git pull origin dev 本地分支与远程分支相关联 在本地 ...

  4. MySQL server has gone away 错误处理

    解决方案1: 这个是mysql自身的一个机制:     mysql连接的空闲时间超过8小时后 MySQL自动断开该连接解决办法有两个:     1.修改mysql 配置               增 ...

  5. RTSC和XDCTool的理解

    1. 在使用TI的开发工具CCS中,里面有几个重要的概念,一直不太清晰,RTSC是什么,XDCTool是什么?包是什么?包的版本为啥都是4位的(比如mathlib_c66x_3_0_1_1)?star ...

  6. 1072 Gas Station （30 分）（最短路径）

    #include<bits/stdc++.h> using namespace std; ; int n,m,k,Ds; int mp[N][N]; int dis[N]; int vis ...

  7. Visual Studio 2014安装包

    点击下载

  8. Dispose的调用顺序

    非托管资源的释放顺序. 这是应该先释放 reader  再释放 stream. 或者直接使用using,防止出错 .

  9. SQL Server 监测语句

    qs.creation_time, last_execution_time, total_physical_reads, total_logical_reads, total_logical_writ ...

  10. thinkphp3.2 常用单字母函数

    U函数:用来生成url U('地址表达式',['参数'],['伪静态后缀'],['显示域名'] 例如: U('Blog/read?id=1') // 生成Blog控制器的read操作 并且id为1的U ...