我使用 Bootstrap 编写了一个基本的 HTML 和 CSS 文件，它在我的 Chrome 版本 27.0.1453.110 的工作计算机上运行良好，但是当我尝试在我的个人 Mac 上的 Chrome 中打开文件时(不知道Chrome 版本)它打开非常慢，并且在滚动时滞后(就像几乎根本不滚动一样!)。我可能做错了什么，或者从编码中排除了什么？这是一个简单的测试页面，带有背景图片、导航栏、页脚和一些文本。
/*
* Globals
*/
/* Links */
a,
a:focus,
a:hover {
color: #fff;
}
/* Custom default button */
.btn-default,
.btn-default:hover,
.btn-default:focus {
color: white;
font-size: 18px;
text-shadow: none; /* Prevent inheritence from `body` */
background-color: rgba(96,96,96.75);
border: 1px solid #fff;
}
/*
* Base structure
*/
html,
body {
height: 100%;
background: url(back1.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
body {
color: #fff;
text-align: center;
text-shadow: 0 1px 3px rgba(0,0,0,.5);
}
/* Extra markup and styles for table-esque vertical and horizontal centering */
.site-wrapper {
display: table;
margin-top: -10px;
width: 100%;
height: 120%; /* For at least Firefox */
min-height: 100%;
-webkit-box-shadow: inset 0 0 400px rgba(0,0,0,.6);
box-shadow: inset 0 0 400px rgba(0,0,0,.6);
}
.site-wrapper-inner {
display: table-cell;
vertical-align: top;
}
.cover-container {
margin-right: auto;
margin-left: auto;
}
/* Padding for spacing */
.inner {
padding: 30px;
}
/*
* Header
*/
.masthead-brand {
color: white;
font-size: 30px;
margin-top: -15px;
margin-bottom: 50px;
}
.masthead-nav > li {
display: inline-block;
margin-bottom: 30px;
}
.masthead-nav > li + li {
margin-left: 20px;
}
.masthead-nav > li > a {
padding-right: 0;
padding-left: 0;
font-size: 16px;
font-weight: bold;
color: #B8B8B8; /* IE8 proofing */
color: rgba(184,184,184.4);
border-bottom: 2px solid transparent;
}
.masthead-nav > li > a:hover,
.masthead-nav > li > a:focus {
color: white;
background-color: transparent;
border-bottom-color: white;
border-bottom-color: rgba(255,255,255,1);
}
.masthead-nav > .active > a,
.masthead-nav > .active > a:hover,
.masthead-nav > .active > a:focus {
color: white;
border-bottom-color: rgba(255,255,255,1);
}
@media (min-width: 768px) {
.masthead-brand {
float: left;
}
.masthead-nav {
margin-top: -20px;
float: right;
}
}
/*
* Cover
*/
.cover {
color: black;
padding: 0 20px;
}
.cover .btn-lg {
border-radius: 4px;
padding: 10px 20px;
font-weight: bold;
}
.blockquote-reverse {
font-weight: bold;
color: white;
text-align: right;
}
.lead {
text-align: center;
}
/*
* Footer
*/
.mastfoot {
color: #999; /* IE8 proofing */
color: rgba(255,255,255,.5);
}
.mastfoot a {
text-decoration: none;
}
/*
* Affix and center
*/
@media (min-width: 768px) {
/* Pull out the header and footer */
.masthead {
position: fixed;
background: -webkit-linear-gradient(rgba(0,0,0,1), rgba(0,0,0,.9),rgba(0,0,0,.8),rgba(0,0,0,.8),rgba(54,54,54,.75), rgba(54,54,54,0)); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(rgba(0,0,0,1), rgba(0,0,0,.9),rgba(0,0,0,.8),rgba(0,0,0,.8),rgba(54,54,54,.75), rgba(54,54,54,0)); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(rgba(0,0,0,1), rgba(0,0,0,.9),rgba(0,0,0,.8),rgba(0,0,0,.8),rgba(54,54,54,.75), rgba(54,54,54,0)); /* For Firefox 3.6 to 15 */
background: linear-gradient(rgba(0,0,0,1), rgba(0,0,0,.9),rgba(0,0,0,.8),rgba(0,0,0,.8),rgba(54,54,54,.75), rgba(54,54,54,0)); /* Standard syntax */
top: 0;
left: 0;
}
.mastfoot {
bottom: 0;
}
/* Start the vertical centering */
.site-wrapper-inner {
vertical-align: middle;
}
/* Handle the widths */
.masthead,
.mastfoot,
.cover-container {
width: 100%; /* Must be percentage or pixels for horizontal alignment */
}
}
@media (min-width: 992px) {
.masthead,
.mastfoot,
.cover-container {
width: 100%;
}
}<!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">
<meta name="description" content="">
<meta name="author" content="">
<link rel="icon" href="../../favicon.ico">
<title>Cover Template for Bootstrap</title>
<!-- Bootstrap core CSS -->
<link href="../../dist/css/bootstrap.min.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="cover.css" rel="stylesheet">
<!-- Just for debugging purposes. Don't actually copy these 2 lines! -->
<!--[if lt IE 9]><script src="../../assets/js/ie8-responsive-file-warning.js"></script><![endif]-->
<script src="../../assets/js/ie-emulation-modes-warning.js"></script>
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div class="site-wrapper">
<div class="site-wrapper-inner">
<div class="cover-container">
<div class="masthead clearfix">
<div class="inner">
<h3 class="masthead-brand">Pith and Prose</h3>
<nav>
<ul class="nav masthead-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Blog</a></li>
<li style="margin-right: 13px"><a href="#">Contact</a></li>
</ul>
</nav>
</div>
</div>
<div class="inner cover">
<div class="container"><div class="row"><div class="col-sm-12" style="display: table; padding-top: 200px; width: 104%; height: 750px; margin-left: -20px">
<h1 class="cover-heading">Landing page.</h1>
<p class="lead">This is where everyone will "land" when they come to your page. We can put a little introduction to the whole blog and everything.</p>
<br/><br/><br/><blockquote class="blockquote-reverse"><p>"The business of life is the aquisition of memories...in the end, that is all there is."</p><footer><cite>Unknown</cite></footer><br/><br/>
<p class="lead">
<a href="#" class="btn btn-lg btn-default">Learn more</a>
</p>
</div></div></div>
<div class="container"><div class="row"><div class="col-sm-12" style="display: table; padding: 30px 30px 100px; background-color: rgba(0,0,0,.8); width: 98%; height: 500px; margin-left: -20px">
<h1 class="cover-heading" style="color: white; font-weight: bold;">Latest Post</h1>
<p class="lead" style="color: white; font-weight: bold;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi vestibulum orci nec risus pulvinar, nec mattis ipsum accumsan.
Nam faucibus, velit sed laoreet aliquam, mi dolor vestibulum orci, rutrum volutpat libero libero in justo. Praesent tincidunt,
lorem pretium pharetra congue, dolor arcu fermentum nibh, non finibus nisi metus auctor nisi. Nulla bibendum urna a lacus auctor, sit amet
vulputate lacus finibus. Morbi vel felis sit amet odio condimentum ullamcorper ac in mauris. Proin vitae vestibulum felis, ac ornare sapien.
Praesent sit amet mi elementum, porta turpis quis, varius nisl. Interdum et malesuada fames ac ante ipsum primis in faucibus. Suspendisse
commodo sed lectus id tempor. Vivamus ultrices ullamcorper augue vitae condimentum. Nulla gravida imperdiet molestie. Donec sed imperdiet
tellus. Nulla fringilla nunc vel ex fringilla semper.<br/><br/>Donec sit amet tincidunt dui. Suspendisse ex ex, luctus non imperdiet a, ornare
sed massa. Proin eget ultricies tellus. Quisque nec orci vel augue tristique tincidunt vel id ligula. Duis tincidunt placerat rhoncus. Aenean
eget ligula vel ligula hendrerit consequat. Suspendisse potenti. Aenean massa magna, volutpat sit amet ligula id, convallis fringilla ante.
Sed semper porttitor nisi, sit amet dignissim nulla lobortis a. Suspendisse hendrerit cursus sapien eu dignissim. Quisque pretium, nulla
ut malesuada luctus, enim sapien vulputate diam, efficitur maximus elit metus at lacus. Curabitur iaculis lobortis odio et porttitor. Sed
et congue ipsum.<br/><br/>Nulla ut dictum neque. Etiam placerat eros et mattis facilisis. Curabitur rutrum interdum est ornare suscipit. Nullam
mauris tortor, porta at cursus quis, finibus vel tortor. Nullam aliquam hendrerit nunc in tristique. Proin a leo risus. Maecenas interdum
pellentesque dui, rhoncus hendrerit massa scelerisque ut.<br/><br/>Nulla tempor congue tellus ac imperdiet. Ut facilisis erat eget porta bibendum.
Vivamus vitae nulla nec dolor laoreet finibus. Sed diam nibh, ornare nec maximus a, accumsan vitae diam. In convallis lobortis dolor a varius.
Sed a nisl in diam dapibus maximus ut sit amet mauris. Nulla tincidunt, nisl et dignissim mollis, sapien massa fermentum leo, volutpat porta
quam sem a erat. Pellentesque malesuada lectus sit amet dolor sollicitudin, vitae finibus magna molestie. Cras a ultrices libero. Etiam iaculis
sodales fringilla. Praesent commodo efficitur eros eu tincidunt. Ut ultricies aliquam tincidunt. Etiam feugiat elit in scelerisque vehicula.
Curabitur semper diam a erat finibus pretium.<br/><br/>Aenean sed est porttitor, bibendum lectus vehicula, facilisis lectus. Nam vehicula ligula
venenatis, lobortis lorem eu, fringilla nunc. Vestibulum ullamcorper sem vitae arcu suscipit iaculis. Etiam sodales nisl felis, nec tincidunt
arcu auctor nec. Sed suscipit hendrerit molestie. Vivamus finibus fermentum nunc non auctor. Mauris odio massa, dapibus quis fringilla in,
facilisis vel arcu. Nulla velit velit, tempor sit amet lacus quis, molestie condimentum sem. Vivamus a laoreet orci. Vestibulum dignissim ipsum
in quam placerat vulputate. Nullam malesuada et tortor vitae vestibulum. Aenean id mattis odio. Donec nec turpis lobortis, hendrerit nunc a,
vehicula odio. Pellentesque et ex ipsum. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</p>
</div></div></div>
</div>
<div class="mastfoot">
<div class="inner">
<p>Built and designed for <a href="#">Pith and Prose</a>, by <a href="#">Paraclete</a>.</p>
</div>
</div>
</div>
</div>
</div>
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="../../dist/js/bootstrap.min.js"></script>
<script src="../../assets/js/docs.min.js"></script>
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<script src="../../assets/js/ie10-viewport-bug-workaround.js"></script>
</body>
</html>最佳答案
Box shadows take a long time to paint.最好使用带有 background-repeat-y 的单行图像来获得嵌入阴影效果。这样 Chrome 就知道它不需要重新绘制背景并浪费所有时间来计算巨大的区域阴影效果。或者，上面的链接显示仅减少阴影模糊半径就可以极大地缩短绘制时间。
关于html - Mac 上的 Chrome 中的 Bootstrap 延迟，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/28748565/