整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
昨天的文章《经典面试题-Web前端性能优化方法（1）》中，我们讲解了几个Web前端性能优化的措施，今天我们继续来学习下其他性能优化的方法。
延迟加载
一个页面的展示如果每次都要等到所有内容都加载完毕，页面的加载速度势必会受到很大影响，这个时候延迟加载的优势就体现出来了。
延迟加载是保证页面初次加载时，所需要的最小内容集，其他的内容在需要的时候再进行加载，这可以保证页面只需加载最少的资源，加快响应速度。
JS延迟加载
Javascript文件延迟加载有几种方法，这里我就简单的表述几种
让js最后加载
在引入外部js文件时，我们将js文件放在<body>的结束标签之前，这样可以让js文件在最后引入，从而可以加快页面加载速度。下面这张图就是百度首页的js文件，可以看到这些文件是放在页面的底部的
让js文件最后加载
使用setTimeout方法
使用setTimeout方法，动态的添加js脚本到head中
setTimeout方法
Google帮助页面的推荐方案
将下面代码添加至</body>标签之前，然后修改defer.js为项目中具体的js文件路径。
Google帮助页面推荐方案
需要注意的是这个外部引入的文件中不应该包含页面正常加载需要的js代码，而应该是一些在页面加载后才执行的js代码，例如绑定的click，change事件。
使用lazyload.js插件
lazyload.js是一款jQuery插件，使用方法如下
lazyload.js插件
图片延迟加载
现在很多的Web或者App应用中的图片都是进入可视区域时才去加载，这就用到了延迟加载的知识，图片的延迟加载也有几种方法，这里也总结一下。
使用lazyload.js插件
lazyload.js是一款jQuery插件，需要在lazyload.js之前引入jQuery文件，如下图所示
lazyload延迟加载
原生Javascript代码图片滚动加载
使用Javascript代码控制图片在滚动到可视区域时才加载，代码如下
Javascript实现图片延迟加载
CSS文件延迟加载
CSS文件的延迟加载同样有几种方法，这里做下总结
使用lazyload.js插件
这里同js文件的延迟加载一样，引入lazyload.js
lazyload延迟加载
使用setTimeout方法实现
我们同样可以使用setTimeout方法去实现css的延迟加载
setTimeout实现css延迟加载
总结
今天这篇文章主要针对延迟加载来实现Web性能优化的，后面会继续更新Web性能优化的文章。
您将了解到11个非常有用的单行代码，它能帮助我们做很多事，不要小瞧了HTML哦!!!
HTML 和 CSS 是前端开发世界的支柱。虽然精通 CSS 和 JavaScript 对于创建出色的网站至关重要，但人们经常低估您仅使用一个普通的旧 HTML 文件就可以完成的工作。从延迟加载图像到为视频添加字幕，HTML 能够完成大多数开发人员并不完全了解的许多事情。以下是您可以立即使用的 11 个 HTML 单行代码
向 HTML 元素添加简单的工具提示不需要 CSS 或 JavaScript。 使用 title 属性，您可以轻松添加工具提示以向用户提供额外信息。
<body>
<p>
<abbr title="World Health Organization">WHO</abbr> was founded in 1948.
</p>
<p title="Free Web tutorials">W3Schools</p>
</body>
当您希望用户下载链接而不是导航到文件时，下载属性非常有用。 此外，您还可以设置用户将下载的文件的文件名
<a href="/images/myw3schoolsimage.jpg" download>
<a href="link/to/your/file" download="filename">Download link</a>
没有人喜欢HTML在不该打断的地方打断文字。 使用<wbr>，您可以轻松地找到可以打断单词的点(机会)。 当单词太长，浏览器很有可能会在不正确的地方打断它时，这很有用。
<p>This is a veryveryveryveryveryveryveryveryveryveryveryveryveryveryveryveryveryvery<wbr>longwordthatwillbreakatspecific<wbr>placeswhenthebrowserwindowisresized.</p>
使用DIR =“AUTO”，浏览器将根据内容的语言更改文本对齐。当您处理不遵循左边的语言时，这非常有用。使用此属性的潜在地点是社交媒体聊天应用程序。
<p dir="auto">This text is following dir=auto</p>
通过使用细节和摘要语义元素，您可以创建一个非常基本但很容易的手风琴。将accordion元素与details元素打包，而标题则使用summary元素。最后，使用p段落元素来编写手风琴的主要内容。
<details>
<summary>Epcot Center</summary>
<p>Epcot is a theme park at Walt Disney World Resort featuring exciting attractions, international pavilions, award-winning fireworks and seasonal special events.</p>
</details>
通过将contentteditable属性设置为true，可以使任何内容都可编辑。 不管它是div还是p，它都是可编辑的。 此外，还可以使用isContentEditable属性来查找某个元素是否可编辑。
<p contenteditable='true'>This is a paragraph. Click the button to make me editable.</p>
只需使用 HTML，您就可以使用 <track> 元素为视频文件添加字幕。 使用 src 属性指向字幕文件，使用 srclang 属性设置语言。
<video width="320" height="240" controls>
<source src="forrest_gump.mp4" type="video/mp4">
<source src="forrest_gump.ogg" type="video/ogg">
<track src="fgsubtitles_en.vtt" kind="subtitles" srclang="en" label="English">
<track src="fgsubtitles_no.vtt" kind="subtitles" srclang="no" label="Norwegian">
</video>
你可以通过设置加载属性为“lazy”来按需加载图片(也叫惰性加载)。 这是一种简单但非常有效的优化技术，只加载对用户可见的部分，其他图像稍后根据用户的需要加载。
<img src="/w3images/wedding.jpg" alt="Wedding" style="width:100%">
<img src="/w3images/rocks.jpg" alt="Rocks" style="width:100%">
<!-- off-screen images -->
<img src="/w3images/paris.jpg" alt="Paris" style="width:100%" loading="lazy">
<img src="/w3images/nature.jpg" alt="Nature" style="width:100%" loading="lazy">
<img src="/w3images/underwater.jpg" alt="Underwater" style="width:100%" loading="lazy">
<img src="/w3images/ocean.jpg" alt="Ocean" style="width:100%" loading="lazy">
<img src="/w3images/mountainskies.jpg" alt="Mountains" style="width:100%" loading="lazy">
如果您在您的网站上多次调用一个公共域，您可以使用**<base>**元素来设置一个基本URL，如下面提供的代码片段所示。 现在，src在图像元素中的实际值是“www.w3schools.com/images/stic… 如果您使用过像Axios这样的库，那么设置基URL是一种非常常见的做法。
<head>
<base href="https://www.w3schools.com/" target="_blank">
</head>
<body>
<img src="images/stickman.gif" width="24" height="39" alt="Stickman">
<a href="tags/tag_base.asp">HTML base Tag</a>
</body>
您可以在使用右键单击时收听事件，也可以尝试使用OnContextMenu和OnPaste属性粘贴内容并处理这些事件。如果您不希望用户能够粘贴到密码等某些字段上，则可以在该输入字段上写入Onpaste =“返回false”，用户将无法粘贴到那里。同样，oncontextmenu在用户右键单击该元素时会触发。
<input type="text" onpaste="return false" value="Paste something in here">
<div oncontextmenu="myFunction()" contextmenu="mymenu">
当设置为 true 时，拼写检查属性会告诉浏览器必须检查用户在此元素中输入的语法和拼写错误。 这是一个方便的属性，可帮助用户编写正确无误的内容。
是我们的*Vue.js Performance系列中的第1部分。
虽然移动优先方法成为标准且不确定的网络条件是我们应该始终考虑的事情，但是保持应用程序快速加载变得越来越困难。在本系列中，我将深入研究我们在Vue Storefront中使用的Vue性能优化技术，并且您可以在Vue.js应用程序中使用它们使它们立即加载并顺利执行。我的目标是让这个系列成为关于Vue应用程序性能的完整而完整的指南。
Webpack bundling如何工作？
本系列中的大多数技巧都将集中在使我们的JS包。要了解它，首先我们需要了解Webpack如何捆绑所有文件。
捆绑我们的资源时，Webpack正在创建一个称为依赖图的东西（点击这里查看它的样子）。它是一个基于导入链接所有文件的图表。假设我们main.js在webpack配置中有一个被指定为入口点的文件，它将成为我们依赖图的根。现在，我们将在此文件中导入的每个js模块将成为图中的节点，并且在这些节点中导入的每个模块都将成为其节点。
Webpack使用此依赖关系图来检测它应该包含在输出包中的文件。输出包只是一个（或我们将在后面的部分中看到的多个）javascript文件，其中包含依赖图中的所有模块。
该捆绑包本质上是我们整个应用程序的JavaScript。
我们可以用下图来说明这个过程：
现在我们知道捆绑是如何工作的，很明显我们的项目越大，初始JavaScript包就越大。
更大的捆绑包，下载和解析我们的用户所需的时间越长。用户必须等待的时间越长，他离开我们网站的可能性就越大。事实上，根据谷歌的数据，53％的移动用户留下的页面加载时间超过3秒。
总而言之，更大的捆绑=更少的用户，这可以直接转化为潜在收入的损失。Bing就是一个很好的例子 - 延迟2秒导致每位访客的收入损失4.3％ 。
延迟加载
那么当我们仍然需要添加新功能并改进我们的应用程序时，我们如何切断捆绑包大小？答案很简单 - 延迟加载和代码分割。
顾名思义，延迟加载是延迟加载应用程序的部件(块)的过程。换句话说，只有在我们真正需要的时候才加载它们。代码分割就是将应用程序分割成这些延迟加载的块的过程。
在大多数情况下，当用户访问您的网站时，您不需要立即使用Javascript包中的所有代码。
例如，我们不需要花费宝贵的资源来为首次访问我们网站的访客加载“我的页面”区域。或者可能存在每个页面上不需要的模态，工具提示和其他零件和组件。
当只需要几个部分时，在每个页面加载时下载，解析和执行整个包的所有内容都是浪费。
延迟加载允许我们拆分捆绑包并仅提供所需的部分，这样用户就不会浪费时间下载和解析不会使用的代码。
要查看我们网站中实际使用了多少JavaScript代码，我们可以转到devtools -> cmd + shift + p -> type coverage - >hit ‘record’.。现在我们应该能够看到实际使用了多少下载的代码。
标记为红色的所有内容都是当前路线上不需要的东西，可以延迟加载。如果您正在使用源映射，则可以单击此列表中的任何文件，并查看未调用哪些部分。正如我们所看到的，甚至vuejs.org还有很大的改进空间。
通过延迟加载适当的组件和库，我们设法将Vue Storefront的捆绑大小减少了60％！这可能是获得性能提升的最简单方法。
好的，我们知道延迟加载是什么，它非常有用。现在是时候看看我们如何在我们自己的Vue.js应用程序中使用延迟加载。
动态导入
我们可以使用webpack动态导入轻松地加载我们应用程序的某些部分。让我们看看它们的工作原理以及它们与常规进口的区别。
如果我们以这样的标准方式导入JavaScript模块：
// cat.js
const Cat = {
meow: function () {
console.log("Meowwwww!")
}
}
export default Cat
// main.js
import Cat from './cat.js'
Cat.meow()
它将作为main.js依赖关系图中的a的节点添加并与其捆绑在一起。
但是，如果我们Cat仅在某些情况下需要我们的模块，例如对用户交互的响应，该怎么办？将此模块与我们的初始捆绑包捆绑在一起是一个坏主意，因为它始终不需要。我们需要一种方法告诉我们的应用程序什么时候应该下载这段代码。
这是动态导入可以帮助我们的地方！现在看一下这个例子：
// main.js
const getCat = () => import('./cat.js')
// later in the code as a response to some user interaction like click or route change
getCat()
.then({ meow } => meow())
我们来看看这里发生的事情：
Cat我们创建了一个返回import()函数的函数，而不是直接导入模块。现在，webpack会将动态导入的模块的内容捆绑到一个单独的文件中。表示动态导入模块的函数返回一个Promise，它将使我们在解析时访问模块的导出成员。
然后，我们可以在需要时下载此可选块。例如，作为对某个用户交互的响应（如路由更改或单击）。
通过动态导入，我们基本上隔离了Cat将被添加到依赖图中的给定节点（在这种情况下）并在我们决定需要时下载该部分（这意味着我们也切断了导入的模块Cat.js）。
让我们看另一个更好地说明这种机制的例子。
假设我们有一个非常小的网上商店，有4个文件：
如果不深入研究细节，让我们看看这些文件是如何在整个应用程序中分布的：
// category.js
const category = {
init () { ... }
}
export default category
// product.js
import gallery from ('./productGallery.js')
const product = {
init () { ... }
}
export default product
// main.js
const getProduct = () => import('./product.js')
const getCategory = () => import('./category.js')
if (route === "/product") {
getProduct()
.then({init} => init()) // run scripts for product page
}
if (route === "/category") {
getCategory()
.then({init} => init()) // run scripts for category page
}
在上面的代码中，根据当前路由，我们动态导入其中的一个product或category模块，然后运行init由它们两者导出的函数。
知道动态导入是如何工作的我们知道product并且category最终会以单独的捆绑包结束，但是productGallery未动态导入的模块会发生什么？正如我们所知，通过使模块动态导入，我们正在削减依赖图的一部分。在此部件中导入的所有内容都将捆绑在一起，因此productGallery最终将与product模块捆绑在一起。
换句话说，我们只是为依赖图创建某种新的入口点。
延迟加载Vue组件
现在我们知道延迟加载是什么以及为什么需要它。现在是时候看看我们如何在Vue应用程序中使用它了。
好消息是它非常简单，我们可以懒得加载整个单一文件组件，它的CSS和HTML使用与以前相同的语法！
const lazyComponent = () => import('Component.vue')
......这就是你所需要的！现在只有在请求时才会下载组件。以下是调用Vue组件动态加载的最常用方法：
const lazyComponent = () => import('Component.vue')
lazyComponent()
<template>
<div>
<lazy-component />
</div>
</template>
<script>
const lazyComponent = () => import('Component.vue')
export default {
components: { lazyComponent }
}
// Another syntax
export default {
components: {
lazyComponent: () => import('Component.vue')
}
}
</script>
请注意，仅当请求组件在模板中呈现时，才会调用lazyComponent函数。例如这段代码：
<lazy-component v-if="false" />
在DOM中需要组件之前，组件将不会加载，只要v-if值更改为true即可。
总结和接下来会发生什么
延迟加载是使您的Web应用程序更高效并减少捆绑包大小的最佳方法之一。我们学习了如何使用Vue组件进行延迟加载。
在本系列的下一部分中，我将向您展示在任何Vue.js应用程序上获得显着性能提升的最有用（也是最快）的方法。
您将学习如何使用异步路由拆分Vue代码以及此过程的建议最佳实践。
翻译自：https://vueschool.io/articles/vuejs-tutorials/lazy-loading-and-code-splitting-in-vue-js/?source=post_page---------------------------
*请认真填写需求信息，我们会在24小时内与您取得联系。
