我最近碰到一些任务网站的性能改善，但由于概念来above和below的问题我感到困惑意识到发生了什么被要求使用。 （ーー）
请问倍意味着在页面分成两个部分？ （通过设计和CSS规则），以便将溶液是检测css用于第二部分，并在页面底部加载它？
任务
下面在style.css中的折叠样式延迟屏内容的呈现。 提高对屏内容的加载速度。
您的解决方案应内嵌CSS仅用于屏内容，并确保的main.css的负载不会阻止页面的渲染。
document.addEventListener('DOMContentLoaded', () => { document.getElementById('scroll-button').addEventListener('click', () => { document.getElementsByClassName('conversation-headline')[0] .scrollIntoView(true); }); }); html { background-color: #FFF; } body { background-color: #FFF; color: #848484; font-family: "Helvetica","Arial",sans-serif; margin: 0; min-height: 100vh; } h1 { font-size: 28px; font-weight: 100; } h2 { color: #FFF; font-size: 38px; font-weight: 100; } h3 { color: #000; font-size: 38px; font-weight: 100; line-height: 125%; margin: 0 40px; } .card { margin: 0 auto; max-width: 79%; } .card-content { align-items: center; box-shadow: 0 4px 5px 0 rgba(0,0,0,.14), 0 1px 10px 0 rgba(0,0,0,.12), 0 2px 4px -1px rgba(0,0,0,.2); display: flex; justify-content: space-around; padding: 10px; } .conversation-diag { align-items: center; display: flex; flex-direction: row; flex-wrap: wrap; } .conversation-headline { color: #000; font-size: 38px; font-weight: 100; line-height: 125%; margin: 0 40px; } .conversation-pane { display: flex; flex-direction: column; height: 40vh; justify-content: space-around; padding: 40px; } .flipped { transform: scaleX(-1); } .header { align-items: center; box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12); display: flex; height: 10vh; padding: 0 16px; } .ribbon { align-items: center; background-color: #848484; display: flex; flex-direction: column; height: 90vh; justify-content: space-around; } .ribbon button { background-color: #FFF; box-shadow: 0 2px 2px 0 rgba(0,0,0,0.14), 0 3px 1px -2px rgba(0,0,0,0.2), 0 1px 5px 0 rgba(0,0,0,0.12); color: #848484; cursor: pointer; font-size: 25px; padding: 0.7em 0.57em; } <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Socializer</title> <link rel="stylesheet" href="styles/main.css"> <script src="scripts/app.js" type="text/javascript"></script> </head> <body> <header class="header"> <svg fill="#848484" height="48" viewbox="0 0 24 24" width="48" xmlns="http://www.w3.org/2000/svg"> <path d="M0 0h24v24H0z" fill="none"/> <path d="M21 5v14h2V5h-2zm-4 14h2V5h-2v14zM14 5H2c-.55 0-1 .45-1 1v12c0 .55.45 1 1 1h12c.55 0 1-.45 1-1V6c0-.55-.45-1-1-1zM8 7.75c1.24 0 2.25 1.01 2.25 2.25S9.24 12.25 8 12.25 5.75 11.24 5.75 10 6.76 7.75 8 7.75zM12.5 17h-9v-.75c0-1.5 3-2.25 4.5-2.25s4.5.75 4.5 2.25V17z"/> </svg> <h1>Socializer</h1> </header> <div class="ribbon"> <div class="ribbon-text-container"> <h2>Really talk to your friends.</h2> <h2>Really.</h2> </div> <button id="scroll-button">Learn More</button> </div> <div> <section class="conversation-pane"> <h3 class="conversation-headline">Make social media mean something again.</h3> <div class="conversation-diag"> <div class="card"> <div class="card-content"> <svg fill="#000000" height="128" viewbox="0 0 24 24" width="128" xmlns="http://www.w3.org/2000/svg"> <circle cx="9" cy="9" r="4"/> <path d="M9 15c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4zm7.76-9.64l-1.68 1.69c.84 1.18.84 2.71 0 3.89l1.68 1.69c2.02-2.02 2.02-5.07 0-7.27zM20.07 2l-1.63 1.63c2.77 3.02 2.77 7.56 0 10.74L20.07 16c3.9-3.89 3.91-9.95 0-14z"/> <path d="M0 0h24v24H0z" fill="none"/> </svg> <div class="text-container"> <h3>Miss you!</h3> </div> </div> </div> <div class="card"> <div class="card-content"> <div class="text-container"> <h3>Miss you toooo!</h3> </div> <svg class="flipped" fill="#000000" height="128" viewbox="0 0 24 24" width="128" xmlns="http://www.w3.org/2000/svg"> <circle cx="9" cy="9" r="4"/> <path d="M9 15c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4zm7.76-9.64l-1.68 1.69c.84 1.18.84 2.71 0 3.89l1.68 1.69c2.02-2.02 2.02-5.07 0-7.27zM20.07 2l-1.63 1.63c2.77 3.02 2.77 7.56 0 10.74L20.07 16c3.9-3.89 3.91-9.95 0-14z"/> <path d="M0 0h24v24H0z" fill="none"/> </svg> </div> </div> </div> </section> </div> </body> </html> 
