网页设计欲加载 第1篇
用户与你网站服务器的接近程度会影响响应时间的长短，把网站内容分散到多个、处于不同地理位置的服务器上可以加快下载速度。CDN由一系列分散到各个不同地理位置上的Web服务器组成，它根据和用户在网络上的靠近程度来指定某台服务器响应用户的请求。
现在市面上有很多第三方CDN产品，比如加速乐、安全宝等，可以根据公司的情况来选择。
注：该部分内容参考书籍《后端产品经理宝典》。
网页设计欲加载 第2篇
跳转本身也占用一定时间，因此也可以为加载争取时间。比如加入购物车的动效。
3. 加载时需支持及时退出
用户有选择退出加载的权利，同时也可以设置默认时间内加载无法进行提示用户重新加载。
三、PC端页面加载的机制 1. 页面加载速度的影响
假如用户试图访问你的网站，那么你的网站最好能在10秒之内打开，如果超过这个时间，他就会放弃任务的执行。
许多研究表明，用户最满意的打开页面时间是2秒以下。如果等待12秒以上，网页还没有载入，那么99%以上的用户会关闭这个网页。
Google曾经做过的一个实验，显示10条搜索结果的页面载入需要秒，显示30条搜索结果的页面载入需要秒，采用后面一个方案的话，流量和收入各减少20%。
这就是为什么许多电商后台管理系统中，默认加载数据条数是10条，而不是15或者30。
2. 了解页面加载的过程
用户打开一个页面，首先是页面的框架，那些不需要加载的内容呈现出来，再逐步拉取服务器的数据，在PC端就会出现页面部分内容为空白的情况。在APP端使用H5技术打开web页面的话一般会给予加载条。
我们可以这样理解，打开一个html为基础的静态页面，然后里面夹杂着调用服务器运算规则的元素，不断渲染和加载，就呈现了我们期望中的样子。
用户等待的时间主要花费在下载网页元素，即HTML、CSS、JavaScript、Flash、图片等。
统计显示，每增加一个元素，网页载入的时间就增加25-40毫秒（取决于用户的带宽情况）。
打开页面→HTML写出的静态页面→javascript／VBScript／ajax（AJAX即“Asynchronous Javascript And XML”（异步JavaScript和XML）等渲染→对提交的表单进行数据处理，向后端发起ajax请求对应PHP的api接口→PHP在接收到数据后对连接服务器，服务器再通过PHP中的SQL语句对数据库关键字进行处理返回给PHP，再由PHP返回给前端，前端通过JS处理将数据渲染在HTML中，最终呈现给用户。
如果数据库语句执行成功，那么数据库中该用户的购物车表就多了一项刚加入的商品数据，同时服务器也会向PHP返回执行成功信息（及一条不为空的数据串），而用户的界面就会显示”成功加入购物车”等字样。
若执行失败，也会将失败信息（err）传给PHP，用户界面也会显示相应的提示。
由于现在的web页面中，大量使用JS，导致浏览器打开页面，就会占用大量的内存，服务端的压力是减轻了，但压力转移到了客户端。
3. 如何优化页面打开速度
网页设计欲加载 第3篇
尽管将样式表和JS脚本直接写入网页HTML中，可以减少外部文件调用数量，从而增加HTTP请求数。但是，这样做会增加网页的文件大小。综合来看，将样式表和JS脚本放到外部文件中，也许用户首次访问时会有点慢，但是后续在访问网站时，页面内容通过浏览器缓存来减少HTTP请求，从而达到快速显示的目的。
网页中的每个元素越小，下载所需的时间就越少，这个很好理解。现在比较成熟和流程的压缩网页的方式，是通过Gzip，我自己的实操经验来看，一般可以将网页文本内容减少70%以上。
在提升网页打开速度的同时也不能忽视另一个问题：响应。
对于用户来说，每次的操作，不管返回结果是慢、还是快，都要及时予以响应。曾经就有过一次用户始终在等待处理中，开始一位是网速问题，最后开发查了代码知道这个用户根本没有操作权限，如果能够果断提醒无权限，用户也知道离开或求助，不至于一直等下去。
四、PC端页面加载的方案 1. PC页面加载设计
1）用户做完某些操作（如发布评论），页面需要自动刷新。
当数据获取较慢，或网络状况不佳时，要有统一的加载方案图示告诉用户“数据正在加载中……”如：漏斗、菊花、进度条等具体图文可参与UI设计效果。
3）失败/空页面
当页面没有数据、加载失败或出错时，要有统一的提示文案图标告诉用户“页面加载失败/暂无数据/页面出错”，具体图文可参与UI设计效果。
2. PC端页面的加载策略
网页设计欲加载 第4篇
预加载是一种浏览器机制，使用浏览器空闲时间来预先下载/加载用户接下来很可能会浏览的页面/资源，当用户访问某个预加载的链接时，如果从缓存命中,页面就得以快速呈现。
五、总结
让加载时间变得更有价值——减少等待时间。
让加载变得更加有趣——忘记等待。
保证用户对加载的可控性——及时退出加载，减少等待时间。
#专栏作家#
题图来自Unsplash，基于CC0协议
网页设计欲加载 第5篇
通常选择传统的菊花动效就可以。
如果我们更进一步，可以将品牌基因植入指示器的设计中。以飞猪的loading动效为例，无疑体现产品之间的差异性。
我们可以花点心思，选择通过一些有趣的动效分散用户在等待过程中的注意力。
2）loading图标展示位置
网页设计欲加载 第6篇
使用 preload 后，Chrome 会有一个警告： 如上文所言，若不确定资源是必定会加载的，则不要错误使用 preload，以免本末导致，给页面带来更沉重的负担。
当然，可以在 PC 中使用 preload 来刷新资源的缓存，但在移动端则需要特别慎重，因为可能会浪费用户的带宽。
preload 是告诉浏览器：“这份资源目前是页面必要的，我马上就要用到，请用最快的速度下载它。”（指定的）。 比如：在我们的场景中， 初始化后一定会加载 和 , 则可以预先 preload 这些资源。
preload 可以预加载几乎所有类型的资源，由 as 属性设置，在 preload 规范中可以看到 as 对应的属性值。
虽然浏览器可以先扫一遍 HTML 提早发现资源，但是有些隐藏在 CSS/JS 内的资源(CSS 中的字体图片，script 中动态加载其他 script/css)就没有办法了，这时候用 preload 就非常有帮助。preload 能够让你在 HTML 页面中元素内部书写一些声明式的资源获取请求，可以指明哪些资源是在页面加载完成后即刻需要的。对于那些重要的资源，你可能希望在页面加载的生命周期的早期阶段就开始获取，在浏览器的主渲染机制介入前就进行预加载。
这里的 defer 是降级方案，以兼容不支持 preload 属性的浏览器。
preload 与 defer 的区别：
prefetch 是告诉浏览器：“这个资源我等会儿会用到，有空的话帮我先下载下来。”（预测的）。 比如：如在我们的场景中，我们在页面加载后会初始化首屏组件，当用户滚动页面时，会拉取第二屏的组件，若能预测用户行为，则可以 prefetch 下一屏的组件。
prefetch(链接预取）是一种浏览器机制，其利用浏览器空闲时间来下载或预取用户在不久的将来可能访问的文档。网页向浏览器提供一组预取提示，并在浏览器完成当前页面的加载后以 Lowest 优先级拉取指定的文档并将其存储在缓存中。当用户访问其中一个预取文档时，便可以快速的从浏览器缓存中得到。
静态渲染(VuePress, bootstrap)类型的网站非常适合将其他链接目录页面用 prefetch 来优化加载效果。
【注意】
【拓展】介绍一个插件 preload-webpack-plugin 是一款脚本预加载的插件，它可以在项目编译打包的时候，自动的将资源类型添加 preload/prefetch 标识。下面的示例是将所有通过路由拆分的异步 chunk 资源加上 。
由 vue-cli3 创建的 Vue 应用会为所有的初始化渲染所需要的文件自动生成 preload 标识，会对所有的 async chunk 生成的 js 文件自动生成 prefetch 提示，这些标识是通过 @vue/preload-webpack-plugin 注入的，可以通过 进行修改和删除。
在 script 标签上设置 defer 和 async 属性可以让同步脚本变成异步脚本，这两个属性告诉浏览器，它可以在加载脚本的同时继续解析 HTML，并在脚本加载完成之后在执行。这两个属性之间的不同是他们开始执行脚本的时机不同。
defer 脚本会在 html 解析完成之后才开始执行，不会中断 DOM 的构建，DOMContentLoaded 事件在 defer 脚本执行完成后发生，脚本会按照它在 HTML 中出现的顺序执行。defer 脚本拥有 low 加载优先级和 lowest 执行优先级。 async 脚本会在异步加载完成后的第一时间执行，会中断 DOM 的构建，window 的 load 事件在 async 脚本执行完成后发生，这也意味着脚本不会按照他们在 HTML 中出行的顺序执行， async 脚本拥有 low 加载优先级和 high 执行优先级。 在资源的下载过程中确实同步脚本和异步脚本都可以并行下载，但预测解析算法并不一定会让所有的同步脚本都并行下载，如果前面的脚本更改了 HTML 结构，这还会导致预测的浪费。指定了 defer 和 async 脚本相当于显式的告诉浏览器这是异步脚本，你可以放心的并行下载。
【参考文章】
网页设计欲加载 第7篇
顾名思义在需要的时候才加载,这样做效率会比较低,但是占用内存也低。页面有大量不同的模块组成，很多可能暂时不用或根本就没用到。
就像图片的延迟加载，在图片出现在可视区域内时（在滚动条下拉）才加载显示图片。用户滚动到它们之前，视口外的图像不会加载。在某些情况下，它还可以帮助减少服务器负载。
举个例子来说明，当打开淘宝首页的时候，只有在浏览器窗口里的图片才会被加载，当你滚动首页向下滑的时候，进入视口内的图片才会被加载，而其它从未进入视口的图像不会也不会加载。