一、懒加载/按需加载
-
原理：先将img标签中的src链接设为同一张图片（空白图片），将其真正的图片地址存储在img标签的自定义属性中（比如data-src）。当js监听到该图片元素进入可视窗口时，即将自定义属性中的地址存储到src属性中，达到懒加载的效果
-
这样做能防止页面一次性向服务器响应大量请求导致服务器响应慢，页面卡顿或崩溃等问题。
-
vue项目按需加载
主要是在加载路由的时候，使用webpack提供的异步加载方式：
const Main = r => require.ensure([], () => r(require(‘../views/main/Main’)))
二、减小资源大小
- webpack，gulp等打包工具的使用
压缩代码，减少了代码体积。可以把多个css文件，多个js文件，合并为一个css文件/js文件。合并文件，让我们减少了http请求数。
- html代码压缩，css压缩，包括无效代码删除与css语义合并
三、优化资源加载
- 优化资源加载位置，更改资源加载时机，是尽可能快的展示页面内容
(1)客户端渲染
前端去取后端的数据生成DOM树，加载过来后，自己在浏览器由上而下跑执行JS，随后就会生成相应的DOM
- 优点：
- 客户端的渲染使得前后端分离，开发效率高
- 用户体验更好，我们将网站做成SPA(单页面应用)或者部分内容做成SPA，当用户点击时，不会形成频繁的跳转
- 缺点：
- 前端响应速度慢，特别是首屏，这样用户是受不了的
- 不利于SEO优化，因为爬虫不认识SPA，所以它只是记录了一个页面
(2)服务端渲染
DOM树在服务端生成，然后返回给前端，页面上展现的内容，我们在HTML源文件也能找到。
- 优点：
- 服务端渲染尽量不占用前端的资源，前端这块耗时少，速度快
- 利于SEO优化，因为在后端有完整的html页面，所以爬虫更容易爬取信息
- 缺点：
-
不利于前后端分离，开发的效率降低了
-
对html的解析，对前端来说加快了速度，但是加大了服务器的压力
-
资源加载时机 异步script标签，defer async
四、减少回流重绘
- 样式设置：
- 避免使用层级较深的选择器，提高css渲染效率
- 给图片设置尺寸。如果图片不设置尺寸，首次载入时，占据空间会从0到完全出现，上下左右都可能位移，发生回流
- 元素适当地定义高度或最小高度，否则元素的动态内容载入时，会出现页面元素的晃动或位置，造成回流
- Dom优化
- 缓存dom
- 减少dom深度及数量的操作
- 避免频繁操作dom，可以批量操作dom
- 使用防抖与节流，限制某一事件的频繁触发
- 及时清理环境，消除引用对象，定时器，事件监听等
五、浏览器存储
- cookie
- 因为 http 请求无状态，所以需要 cookie 去维持客户端状态
- cookie 生成方式：http response header 中的 set-cookie； js 中可以通过document.cookie读写cookie
- 使用：用于浏览器端和服务器端的交互；客户端自身数据的存储
- 过期时间：expire
- 存储限制：作为浏览器存储，大小4kb左右；需要设置过期时间 expire
- cookie 存储能力被 localstorage 代替
- cookie 中在相关域名下面 --- cdn的流量损耗 。 解决：cdn 的域名和主站的域名要分开
- localStorage
- HTML5 设计出来专门用于浏览器存储的
- 大小为 5M 左右
- 仅在客户端使用，不和服务端进行通信
- 浏览器本地缓存方案
- sessionStorage
- 会话级别的浏览器存储
- 大小为 5M 左右
- 仅在客户端使用，不和服务端进行通信
- 对于标表单信息的维护
- indexedDB
- 用于客户端存储大量结构化数据
- 为应用创建离线版本
- http缓存
- Cache-Control
- expires
- Last-Modified / If-Modified-Since
- etag
