前端优化方案

精简HTML代码

• 减少HTML的嵌套
• 减少DOM节点数
• 减少无语义的代码
• 删除http或者https，如果URL的协议头和当前页面的协议头一致，或者此URL在多个协议都是可用的，侧可以考虑删除协议
• 删除多余空格，换行符吗，缩进和不必要的注释
• 省略不必要的标签和属性
• 使用相对路径的URL

文件放在合适位置

• css样式文件链接尽量放在页面头部

  • CSS加载不会阻塞DOM tree 解析，但是会阻塞DOM Tree渲染，也会阻塞JS执行。任何body元素之前，可以确保在文档部分中解析所有css样式，(内联和外联)，从而减少了浏览器必须重排文档的次数，如果放置页面底部，就要等到最后一个css文件下载完成，此时会出现白屏，影响用户体验

• js引用放在HTML底部

  • 防止JS的加载，解析，执行对阻塞页面后续元素的正常渲染

• 设置favicon.ico

  • 网站如果不设置favicon.ico，控制台会报错，另外页面加载过程中也没有图标，loading过程，同时也利于记忆网站品牌，建议统一价

• 增加首屏必要的css和js

  • 页面如果需要等待所的依赖js和css加载完成才显示，侧在渲染过程中页面会一直显示空白，影响用户体验，建议增加首屏必要的css和js，比如页面框架背景图和loading图标，内联在html页面中，这样做，首屏能快速显示出来，相对减少用户对页面加载等待过程，

渲染性能

• 提升CSS渲染性能

  • 谨慎使用expensive属性

    • 如nth-child属性；position：fixed定位

  • 尽量减少样式层级树数

    • 如div ul li span

  • 尽量避免使用占用过多CUP和内存的属性

    • 如text-indnt:-99999px

  • 尽量避免使用耗电量大的属性

    • 如css3 3d transforms

• 合适使用css选择器

  • 尽量避免使用css表达式

  • 尽量避免使用通配符选择器

    • body > a {font-size:blod}
  • 尽量避免正则的属性选择器

• 提升CSS文件加载性能

  • 使用外链的css
  • 尽量避免使用@import

• 合理使用Web Fonts

  • 将字体部署在CDN上
  • 将字体以base64形式保存在css中并通过localStorage进行缓存
  • Google字体库因为某些不可抗拒原因，应该使用国内托管服务

• CSS动画优化

  • 尽量避免同时动画
  • 延迟动画初始化
  • 结合SVG

• js变量和函数优化

  • 尽量使用id选择器
  • 尽量避免使用eval
  • js函数尽可能保持简洁
  • 使用事件节流函数
  • 使用事件委托

• js动画优化

  • 避免添加大量js动画
  • 尽量使用css3动画
  • 尽量使用canvas动画

  • 合理使用requestAnimationFrame动画代替setTimeout，setlnterval

    • requestAnimationFrame可以在正确的时间进行渲染，setTimeout和setlnterval无法保证callback回调函数的执行时机

• 合理使用缓存

  • 合理缓存dom对象
  • 缓存列表长度
  • 使用可缓存的ajax

cookie

• 通常有浏览器存储，然后将cookie与每个后续请求一起发送到统一服务。收到HTTP请求时，服务器可以发送带有cookie的header头，可以给cookie设置有效时间

• 应用于：

  • 会话管理，登录名，购物车商品，游戏得分或服务器要记录的其他任何内容
  • 个性化，用户首选项，主题或其他设置
  • 跟踪，记录和分析用户行为，

sessionStorage

• 创建于本地存储的键/值,浏览器关闭的时候，数据就会清除

• 应用于

  • 页面应用页面直接传值

IndexedDB

• 索引数据库

• 应用于

  • 客户端存大量结构化数据
  • 没有网络连接的情况下使用
  • 将冗余，很少修改，但经常访问的数据，以避免随时从服务器获取数据

localStorage

• 本地存储，长期存储，只有当用户手动清除的时候，才会清理

• 应用于

  • 缓存静态文件内容JS/CSS
  • 缓存不常变更API接口数据
  • 存储地理位置信息
  • 浏览器页面具体位置

js模块加载方案和选型

• ConmmonJS

  • 旨在web浏览器之外为JavaScript建立模块生态系统
  • Node.js模块化方案受CommonJS

• AMD(异步模块定义)规范

  • RequireJS模块化加载器，基于AMD API实现

• CMD(通用模块定义)规范

  • seaJS模块化加载器，遵循CMD API编写
• ES6 import

怎么才能减少浏览器回流和重绘

• CSS

  • 避免过多样式嵌套

    - 避免使用css表达式

    • 使用绝对定位，可以让动画脱离文档流
    • 避免使用table布局
    • 尽量不使用float布局
    • 图片最好设置width和height
    • 尽量简化浏览器不必要的任务，减少页面重新布局
    • 使用viewport设置屏幕缩放级别
    • 避免频繁设置样式，最好吧新的style属性设置完之后，进行一次性修改
    • 避免使用引起回流/重绘的属性。最好相应变量缓存起来

• JavaScript

  • 最小化回流和重排

    • 为了减少回流发生次数，避免频繁活操作DOM。可以结合并多次对DOM修改，然后一次性处理

  • 控制绘制过程和绘制区域

    • 绘制过程开销比较大的属性设置应该尽量避免减少使用
    • 减少绘制区域范围

控制DOM大小

• 众所周知，页面交互卡顿流畅很大一部分原因页面有大量DOM元素，想象一下，从一个上万节点DOM树上，使用querySelectorAll或者getElementTagName方法查找某一个节点，是非常耗时的，另外元素绑定事件，事件冒泡和事件捕获的执行也会相对耗时

• 通常控制DOM大小的技巧包括

  • 合理的业务逻辑
  • 延迟加载即将呈现的内容

简化DOM操作

• 对DOM节点的操作统一处理后，在统一插入到DOM Tree中
• 可以使用fragment，尽量不在页面DOM Tree里直接操作
• 现在流行的框架都在使用虚拟DOM技术，通过diff算法，简化和减少DOM操作

前端构建工具介绍

• Grunt 一个项目需要定制多个小任务应用多个插件
• Gulp 通过流来简化多个任务的配置和输出，配置代码比较少
• webpack 预编译，中间文件在内存处理，支持多中模块化，配置相对简单
• parcel 多核编译。同时有文件系统缓存，即使在重启构建后也能快速再编译,极速零配置Web应用打包工具