前端优化

技术

防抖和节流

图片懒加载

将页面内未出现的可视区域内的图片先不加载，等到滚动到可视区的时候再去加载。
优点：提高页面的加载速度
原理：图片的加载是由src的值引起的，当对src赋值时，浏览器会请求图片资源
利用html5的自定义data-xxx属性来保存图片路径，当需要加载图片的时候，将data-xx的值赋给src，就能实现图片的按需加载

移动端分页：滚动条触底，数据刷新

前端需要注意哪些SEO

1. 合理的title、description、keywords：搜索对这三项的权重逐个减小。title值强调重点即可，重要关键词出现不要超过2次，而且要靠前，不同页面title要有所不同；description把页面内容高度概括，长度合适，不可过分堆砌关键词，不同页面description有所不同；keywords列举出重要关键词即可

<title>深入了解 head 元素</title>/*文档标题（浏览器标签中显示的文本）*/
 <meta name="description" content=“帮助你深层次了解HTML文档结构”>/*搜索引擎优化相关内容：*/

2. 语义化的HTML代码，符合W3C规范：语义化代码让搜索引擎容易理解网页
3. 重要内容HTML代码放在最前：搜索引擎抓取HTML顺序是从上到下，有的搜索引擎对抓取长度有限制，保证重要内容一定会被抓取
4. 重要内容不要用js输出：爬虫不会执行js获取内容
5. 少用iframe：搜索引擎不会抓取iframe中的内容
6. 非装饰性图片必须加alt
7. 提高网站速度：网站速度是搜索引擎排序的一个重要指标

你如何对网站的文件和资源进行优化？

期待的解决方案包括：

1. 文件合并
2. 文件最小化/文件压缩
3. 使用 CDN 托管
4. 缓存的使用（多个域名来提供缓存）

CDN的全称是Content Delivery Network，即内容分发网络。
CDN是构建在网络之上的内容分发网络，依靠部署在各地的边缘服务器，通过中心平台的负载均衡、内容分发、调度等功能模块，使用户就近获取所需内容，降低网络拥塞，提高用户访问响应速度和命中率。CDN的关键技术主要有内容存储和分发技术。

减少页面加载时间的方法

1. 优化图片
2. 图像格式的选择（GIF：提供的颜色较少，可用在一些对颜色要求不高的地方）
3. 优化 CSS（压缩合并 css，如 margin-top, margin-left…)
4. 网址后加斜杠（如 www.campr.com/目录，会判断这个目录是什么文件类型，或者是目录。）
5. 标明高度和宽度（如果浏览器没有找到这两个参数，它需要一边下载图片一边计算大小，如果图片很多， 浏览器需要不断地调整页面。这不但影响速度，也影响浏览体验。 当浏览器知道了高度和宽度参数后，即使图片暂时无法显示，页面上也会腾出图片的空位，然后继续加载 后面的内容，从而加载时间快了，浏览体验也更好了）
6. 减少 http 请求（合并文件，合并图片）

如何进行网站性能优化

雅虎Best Practices for Speeding Up Your Web Site：

• content方面

  1. 减少HTTP请求：合并文件、CSS精灵、inline Image
  2. 减少DNS查询：DNS查询完成之前浏览器不能从这个主机下载任何任何文件。方法：DNS缓存、将资源分布到恰当数量的主机名，平衡并行下载和DNS查询
  3. 避免重定向：多余的中间访问
  4. 使Ajax可缓存
  5. 非必须组件延迟加载
  6. 未来所需组件预加载
  7. 减少DOM元素数量
  8. 将资源放到不同的域下：浏览器同时从一个域下载资源的数目有限，增加域可以提高并行下载量
  9. 减少iframe数量
  10. 不要404

• Server方面

  1. 使用CDN
  2. 添加Expires或者Cache-Control响应头
  3. 对组件使用Gzip压缩（gzip能在webpack压缩的基础上再进行压缩50%以上！！！）
  4. 配置ETag
  5. Flush Buffer Early
  6. Ajax使用GET进行请求
  7. 避免空src的img标签

• Cookie方面

  1. 减小cookie大小
  2. 引入资源的域名不要包含cookie

• css方面

  1. 将样式表放到页面顶部
  2. 不使用CSS表达式
  3. 使用< link>，不使用@import
  4. 不使用IE的Filter

• Javascript方面

  1. 将脚本放到页面底部
  2. 将javascript和css从外部引入
  3. 压缩javascript和css
  4. 删除不需要的脚本
  5. 减少DOM访问
  6. 合理设计事件监听器

• 图片方面

  1. 优化图片：根据实际颜色需要选择色深、压缩
  2. 优化css精灵（CSSSprites）
  3. 不要在HTML中拉伸图片
  4. 保证favicon.ico小并且可缓存

• 移动方面

  1. 保证组件小于25k
  2. Pack Components into a Multipart Document

gzip压缩原理
如何知道客户端浏览器是否支持gzip呢，请求头中有个Accept-Encoding来标识对压缩的支持。当客户端请求到服务端的时候，服务器解析请求头，如果客户端支持gzip压缩，响应时对请求的资源进行压缩并返回给客户端，浏览器按照自己的方式解析，在http响应头，我们可以看到content-encoding:gzip，这是指服务端使用了gzip的压缩方式。

VUE项目中的优化

1.不要在模板里面写过多表达式
2.循环调用子组件时添加key
3.频繁切换的使用v-show，不频繁切换的使用v-if
4.尽量少用float，可以用flex
5.按需加载，可以用require或者import()按需加载需要的组件
6.路由懒加载
7. 对于图片过多的页面，为了加速页面加载速度，所以很多时候我们需要将页面内未出现在可视区域内的图片先不做加载， 等到滚动到可视区域后再去加载。这样对于页面加载性能上会有很大的提升，也提高了用户体验。我们在项目中使用 Vue 的 vue-lazyload 插件：
（1）安装插件
npm install vue-lazyload --save-dev
（2）在入口文件 man.js 中引入并使用
import VueLazyload from ‘vue-lazyload’
然后再 vue 中直接使用
Vue.use(VueLazyload)
或者添加自定义选项

Vue.use(VueLazyload, {
	preLoad: 1.3,
	error: 'dist/error.png',
	loading: 'dist/loading.gif',
	attempt: 1
})

（3）在 vue 文件中将 img 标签的 src 属性直接改为 v-lazy ，从而将图片显示方式更改为懒加载显示：

8. Vue 会通过 Object.defineProperty 对数据进行劫持，来实现视图响应数据的变化，然而有些时候我们的组件就是纯粹的数据展示，不会有任何改变，我们就不需要 Vue 来劫持我们的数据，在大量数据展示的情况下，这能够很明显的减少组件初始化的时间，那如何禁止 Vue 劫持我们的数据呢？可以通过 Object.freeze 方法来冻结一个对象，一旦被冻结的对象就再也不能被修改了。

9. 减少 ES6 转为 ES5 的冗余代码
   （1）首先，安装 babel-plugin-transform-runtime ：
   npm install babel-plugin-transform-runtime --save-dev
   （2）然后，修改 .babelrc 配置文件为：
   “plugins”: [
   “transform-runtime”
   ]