因为专注,所以专业
2005 - 2020

提高网站加载速度的一些小技巧

时间:2020-03-10 02:21:48    作者:八叔模板堂
翻译:疯狂的技术宅
原文:https://likegeeks.com/improve...

为你的页面元素选择正确的加载顺序

服务器性能可能会导致页面加载问题

优化代码很重要

优化之前:

function test(node) { var parent = node.parentNode; if (0) {
        alert( "Hello Everybody" );
    } else {
        alert( "We love Websites" );
    } return;
    alert( 1 );
}

优化后:

function test(){alert("We love Websites")}

了解延迟和异步标记

<html> <head> <script src="big.js"></script> </head> <body>
    </body> </html>
<html> <head> <script src="big.js" async></script> </head> <body>
    </body> </html>

注意复杂的文件格式和大图像

未使用的 .JS 库组件

使用 GZIP 模块是理想的选择

const gzip = zlib.createGzip(); const fs = require('fs'); const inp = fs.createReadStream('input.txt'); const out = fs.createWriteStream('input.txt.gz');
 
inp.pipe(gzip).pipe(out);

Be Aware of Code Density

意识到代码密度

处理太多文件请求

避免使用太多插件

适当的用 CSS3 效果而不是 JavaScript

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>CSS Slider</title> </head> <body> <base href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/"> <div id="slider"> <figure> <img src="austin-fireworks.jpg" alt> <img src="taj-mahal_copy.jpg" alt> <img src="ibiza.jpg" alt> <img src="ankor-wat.jpg" alt> <img src="austin-fireworks.jpg" alt> </figure> </div> </body> </html>
@keyframes slidy { 
    0% { left: 0%; }
    20% { left: 0%; }
    25% { left: -100%; }
    45% { left: -100%; }
    50% { left: -200%; }
    70% { left: -200%; }
    75% { left: -300%; }
    95% { left: -300%; }
    100% { left: -400%; }
} body { margin: 0; } div#slider { overflow: hidden; } div#slider figure img { width: 20%; float: left; } div#slider figure { position: relative; width: 500%; margin: 0; left: 0 text-align: left; font-size: 0; animation: 30s slidy infinite;
}

定期更新内容管理系统

赞(0
免费拨打  111-1111-1111
免费拨打  111-1111-1111免费拨打 111-1111-1111
微信二维码
手机二维码
返回顶部
返回顶部返回顶部