网页

http请求优化（减少cookie体积，减少http请求次数）

合并文件：合并文件是通过把所有的脚本放到一个文件中来减少HTTP请求的方法，例如可以简单地把所有的CSS文件都放入一个样式表中。当脚本或者样式表在不同页面中使用时需要做不同的修改
雪碧图：把所有的背景图像都放到一个图片文件中，然后通过CSS的background-image和background-position属性来显示图片的不同部分
cookie内的有关信息是通过HTTP文件头来在web服务器和浏览器之间进行交流的。因此保持coockie尽可能的小以减少用户的响应时间十分重要

已缓存资源不再发起http请求，即HTTP的Expires和Cache-Control。对一个网站而言，CSS、JavaScript、图片等静态资源更新的频率都比较低，而这些文件又几乎是每次HTTP请求都需要的，如果将这些文件缓存在浏览器中，可以极好的改善性能。通过设置http头中的cache-control和expires的属性，可设定浏览器缓存，将静态内容设为永不过期，或者很长时间后才过期。

DNS查询也消耗响应时间，若网页内容来自各个不同的域名，则客户端首次解析这些域名需要消耗一定的时间，但由于DNS查询结果会缓存在本地系统和浏览器中一段时间（IE对DNS记录默认的缓存时间为30分钟，Firefox对DNS记录默认的缓存时间为1分钟，Chrome对DNS记录默认的缓存时间为1分钟），所以DNS查询一般只是对首次访问时的速度有影响。

懒加载也叫延迟加载，指的是在长网页中延迟加载图像，是一种很好优化网页性能的方式。
用户滚动到它们之前，可视区域外的图像不会加载。这与图像预加载相反，在长网页上使用延迟加载将使网页加载更快。
在某些情况下，它还可以帮助减少服务器负载。常适用图片很多，页面很长的电商网站场景中。
优点
- 能提升用户的体验，用户打开像手机淘宝长页面的时候，如果页面上所有的图片都需要加载，由于图片数目较大，等待时间很长，严重影响用户体验。
- 减少无效资源的加载，这样能明显减少了服务器的压力和流量，也能够减小浏览器的负担。
- 防止并发加载的资源过多会阻塞js的加载，影响网站的正常使用。
原理
- 首先将页面上的图片的 src 属性设为空字符串，而图片的真实路径则设置在data-original属性中。
- 当页面滚动的时候需要去监听scroll事件，在scroll事件的回调中，判断我们的懒加载的图片是否进入可视区域,如果图片在可视区内将图片的 src 属性设置为data-original 的值，这样就可以实现懒加载。

为给客户更好的客户体验，首屏组件加载速度更快一些，解决白屏问题。
懒加载简单来说就是延迟加载或按需加载，即在需要的时候的时候进行加载。
常用的懒加载方式有两种：即使用vue异步组件和 ES中的import 　
预加载
预加载简单来说就是将所有所需的资源提前请求加载到本地，这样后面在需要用到时就直接从缓存取资源。
优点
- 在网页全部加载之前，对一些主要内容进行加载，以提供给用户更好的体验，减少等待的时间。否则，如果一个页面的内容过于庞大，没有使用预加载技术的页面就会长时间的展现为一片空白，直到所有内容加载完毕。
原理
- 用CSS和JavaScript实现预加载，html中img标签最初设置为display:none；
- 仅使用JavaScript实现预加载，js脚本中使用image对象动态创建好图片；
- 使用Ajax实现预加载，使用XMLHttpRequest对象可以更加精细的控制预加载过程，缺点是无法跨域：

在所有CSS加载并解析完之后才会呈现内容，减少白屏
现代浏览器为了更好的用户体验,渲染引擎将尝试尽快在屏幕上显示的内容。它不会等到所有HTML解析之前开始构建和布局渲染树。部分的内容将被解析并显示。也就是说浏览器能够渲染不完整的dom树和css结合，尽快的减少白屏的时间

当页面被加载时，link引用的CSS会同时被加载，而@import引用的CSS则是等待主页面全部被加载完后才会被加载，所以当网速较慢时，可能会只出现页面而没有样式，等一段时间后样式才会被加载出来

骨架屏
- 在数据加载时显示骨架，优化用户体验
缓存路由组件keep-alive
- 默认情况下, 被切换的路由组件对象会死亡释放, 再次回来时是重新创建的
- keep-alive可以缓存路由组件对象, 可以提高用户体验