通过这种技术优化前端加载。
我读到了facebook的页面和Quora更快的油漆。
我最理解的是：
- 尽快开始发送(分块的传输)
- 首先用内联css和分页的形式发送页面的基本布局。
- 在获取响应时，继续填充这些页面(连同css)。
- 然后下载脚本和其他资源。
这种方法似乎是有效的。在此中还可以添加/省略哪些内容？
我明白这是很广泛的，但如何落实呢？
我们需要为此发送流响应吗？
前端是如何处理响应的？
如果您也能分享一些文章以供进一步阅读，将不胜感激。
回答 1
Stack Overflow用户
发布于 2018-02-21 08:00:07
前端优化提示，以提高web性能。
由于各种原因，每天有数以百万计的网站被访问。不幸的是，许多网站的优化效果很差。
-poorly优化后的网站存在加载速度慢、浏览器不兼容等问题。
下面提到的技术将帮助您改进前端优化。
清理Html文档，努力以既简洁又有效的方式编写。
->proper css布局。将所有外部样式表放在Html文档标题的顶部，以确保渐进式呈现。
<head><link href='https://yourwebsite.com/css/style.css' rel='stylesheet'type='text/css'></head>适当的Javascript安置
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
< =========== >
<!-- For laoding js related files -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</body>
</html>此外，在使用javascript时，您应该总是更喜欢加载“异步”脚本。例如，这将防止任何标记在文档中间遇到html呈现过程时阻塞它。
<script src="demo_defer.js" async></script>什么是异步脚本？ 使用异步加载脚本(AKA异步)意味着脚本的加载过程不会中断网页的呈现。这允许您的网页呈现更快，因为解析不是每次必须加载脚本时暂停。这还允许同时加载多个脚本，这是有益的，因为一个脚本不依赖于另一个脚本。
同步加载和异步加载的区别？？
同步脚本加载的工作方式如下：
- 当HTML解析遇到一个同步加载的标记时，它会被暂停。
- 请求获取文件(如果是外部的)
- 该脚本将立即下载并执行HTML解析。
异步脚本加载的工作方式如下：
- HTML解析在遇到异步加载的标记时继续进行。
- 请求获取文件(如果是外部的)
- 脚本将在后台下载并在完成后执行。
缩小CSS、JS和HTML
缩小技术可以帮助您消除文件中不必要的字符。在编辑器中编写代码时，可能会使用缩进和注释。这些方法无疑是保持代码整洁和可读性的最佳实践，但它们也会为文档添加额外的字节。
例如，在应用小型化之前，请检查下面的css代码，在这里您会注意到额外的空间、缩进和注释。
.navbar-default{
border-radius: 0px;
background: -webkit-linear-gradient(to right,#dd4959, #852742 ); /*
Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to right,#dd4959, #852742); /* W3C, IE 10+/
Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ *
}
#menu {
border-radius: NaNpx;
margin-top: 69px;
margin-left: 66px;
margin-bottom: 48px;
background: -webkit-linear-gradient(to right,#dd4959, #b852742 ); /*
Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to right,#dd4959, #852742); /* W3C, IE
10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}
#form{
/* fallback for old browsers */
background: -webkit-linear-gradient(to right,#dd4959, #852742 );
/* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to right,#dd4959, #852742); /* W3C, IE
10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
padding-top: 10px;
padding-left: 120px;
}
#form h1 {
color: white;
font-family: 'Poppins';
font-size: 60px;
margin-left: 11px;
}这里是同样的片段，在小型化已经被应用之后。
.navbar-default{border-radius:0;
background:-webkit-linear-gradient(toright,#dd4959,#852742);
background:linear-gradient(to right,#dd4959,#852742);
background:linear-gradient(to right,#dd4959,#852742)}
#form{background:-webkit-linear-gradient(to right,#dd4959,#852742);
background:linear-gradient(to right,#dd4959,#852742);
padding-top:10px;padding-left:120px}
#form h1{color:white;font-family:'Poppins';
font-size:60px;margin-left:11px}- 使用CDN和缓存提高速度。CDN允许您的站点访问者从最近的服务器加载数据。如果您使用CDN，您的站点的文件将自动被压缩，以便在全球范围内快速传送。
- 压缩你的文件。
虽然许多CDN服务会为您压缩您的文件，但是如果您不使用CDN，请考虑在原始服务器上使用文件压缩方法来改进您的前端优化。文件压缩将使您的网站的内容轻松和易于管理。最常用的文件压缩方法之一是Gzip。这是一种很好的方法，用于缩小尚未压缩的文档、音频文件、PNG图像和其他大型文件。 Brotli是另一个仍然相当新的文件压缩算法，尽管它越来越受欢迎。这种开源算法由谷歌和其他组织的软件工程师定期更新。它已经证明自己可以比其他现有的方法更好地压缩文件。虽然对该算法的支持仍然很小，但它很好地定位为下一个默认文件压缩算法。
- 优化你的形象
对于那些不习惯前端优化方法的人来说，图像可能是一个网站杀手。大量的相册和大的高分辨率图像在你的网站上可以堵塞渲染过程。未经优化的高清晰度图像可重达数兆字节。因此，适当地优化这些将使您能够提高您的网站的前端性能。
https://stackoverflow.com/questions/47346893
复制相似问题
腾讯云开发者
