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. 利用nodejs实现商品管理系统（一）

    一.界面分类:用户登录界面,商品管理界面(包含商品编辑,创建,删除,列表界面) 功能实现:1.用户输入用户名与密码,通过加密,与数据库校验,如果正确,则跳转到商品管理界面,否则一直停留在用户界面. 2 ...

  2. 异步消息处理(Message, Handler, MessageQueue, Looper)

    AsyncTask 适用于单线程任务处理,多任务处理还是 Message/Handler 处理方便一些 主要使用方式: 1,创建子类继承自 Handler 类,覆盖 handleMessage(Mes ...

  3. Mysql综合练习作业50题

    #作业库create database db8 charset utf8; #年级表create table class_grade(gid int not null primary key auto ...

  4. 29、phonegap入门

    0. PhoneGap介绍 0.1  什么是PhoneGap? PhoneGap是一个基于HTML.CSS.JS创建跨平台移动应程序的快速开发平台.与传统Web应用不同的是,它使开发者能够利用iPho ...

  5. Qt BarChart实践

    按照帮助文档编写 运行截图 上代码 #include "widget.h" #include "ui_widget.h" Widget::Widget(QWid ...

  6. Python 3基础教程31-urllib模块

    本文介绍Python里的urllib模块,这个urllib主要处理web服务的,如果需要做接口测试,或者写Python的网络爬虫,这个urllib就是最底层的库.需要用到里面的请求方法等. 1. 先看 ...

  7. Word2vec之CBOW

    一.Word2vec word2vec是Google与2013年开源推出的一个用于获取word vecter的工具包,利用神经网络为单词寻找一个连续向量看空间中的表示.word2vec是将单词转换为向 ...

  8. C++STL——概述

    一.相关介绍 STL 标准模板库 在编写代码的过程中有一些程序经常会被用到,而且需求特别稳定,所以C++中把这些常用的模板做了统一的规范,慢慢的就形成了STL 提供三种类型的组件: 容器.迭代器和算法 ...

  9. Python如何进行中文注释

    最近,由于实习工作的需要,开始接触Python,但是第一个大的脚本写下来之后,连中文注释都没办法加,很郁闷,遂在网上找解决办法,在Python 官网上看到这个页面:http://www.python. ...

  10. [android]不解锁刷机

    本人因为误操作进入andriod recovery模式,显示failed to boot 2,致手机无法恢复出厂值, 当时那叫一个郁闷.上论坛搜寻无数,唉让刷底包的无数(在此不解释),万恶的刷底包. ...