页面加快优化

2019年8月26日 162次阅读 来源: yexiaobai

内联 CSS

长处

  1. 运用内联 CSS 能够削减浏览器去效劳端去下载 CSS 文件
  2. 症结 CSS 内联到 HTML 文件中

瑕玷

  1. CSS 文件没法被缓存

注重：该要领只适用于很小的 CSS 文件，假如你的 CSS 文件足够大以及庞杂，应当运用外部 CSS 的要领。

优化 CSS 托付

优化战略

  1. 外部的 CSS 不要凌驾一个，大小应当小于 50k
  2. 关于下拉地区以上的内容，运用 style 标记内联小 CSS 到 HTML
  3. 不要运用 @import 挪用 CSS
  4. 不要把 CSS 元素放在 HTML 的 divs 或许 你的 h1s 中

以上步骤能够最小化衬着壅塞 CSS，使得页面加载异常疾速。

假如你有多个 CSS 文件，应当把他们合并成一个。

耽误加载 javascript

  1. 当我们挪用外部 javascript 的时刻，运用 “onload” 事宜
  2. 在页面内部被加载前，外部 javascript 将不被加载T
  3. External javascript will then run and affect page

剧本挪用外部 javascript 文件

<script type="text/javascript">
function downloadJSAtOnload() {
var element = document.createElement("script");
element.src = "defer.js";
document.body.appendChild(element);
}
if (window.addEventListener)
window.addEventListener("load", downloadJSAtOnload, false);
else if (window.attachEvent)
window.attachEvent("onload", downloadJSAtOnload);
else window.onload = downloadJSAtOnload;
</script>
  1. 拷贝以上代码。
  2. 把代码粘贴到你的 HTML，安排在 </body> 标签之前（接近 HTML 文件的底部）。
  3. 把 “defer.js” 变更为你外部 JS 文件的名字。
  4. 确保文件途径是准确的。比方：假如你仅仅安排 “defer.js”，这时候 “defer.js” 必需与你的 HTML 文件在统一目次下面。

把 javascript 分为两组，一组是加载页面必需的，一组是加载完成页面后须要运用到的（比方剖析数据的 js，交互用的等等）。

示例证实：

  1. Page with script inline – here
  2. Page with external script using “defer” – here
  3. Page using the recommended code above – here

耽误图片

能够存在的题目

  1. 耽误加载会引起机能题目
  2. 耽误加载关于某些页面是不可行的
  3. 耽误加载关于 mobile 机能是不抱负的

不运用耽误加载或 jQuery 耽误图片

耽误加载现实会做的事变：

  1. 视察一个转动位置
  2. 监控一个转动位置
  3. 对一个转动位置起作用R
  4. 耽误图片

在以上 4 个事变中，仅仅只要一个是耽误图片。

HTML 代码：

<img src="data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=" data-src="your-image-here">

javascript 代码片断：

<script>
function init() {
var imgDefer = document.getElementsByTagName('img');
for (var i=0; i<imgDefer.length; i++) {
if(imgDefer[i].getAttribute('data-src')) {
imgDefer[i].setAttribute('src',imgDefer[i].getAttribute('data-src'));
} } }
window.onload = init;
</script>

组合外部 CSS

东西列表

扩大浏览

    原文作者：yexiaobai
    原文地址: https://segmentfault.com/a/1190000002921625
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞