web前端性能优化

《Web前端性能优化》以Web性能优化为重点，深入浅出地介绍了性能优化所涉及到的方方面面知识，详细解答了为何要做性能优化，性能优化又需要从何处着手，性能优化的过程又需要考虑到哪些问题？需要做怎样的权衡？本书作者：陈铎鑫。

web前端性能优化

• 用户体验（User Experience）
  • 用户关注点
    • 用户体验
      • 可用性
      • 易用性
      • 好用性
      • 品牌价值
    • 产品第一印像
      • 喜欢
      • 一般
      • 讨厌
    • 常见关注点
      • 界面清爽
      • 操作简单
      • 流畅
      • 新技术
      • 附加值
      • 用着方便
      • 好看
      • 新颖
      • 。。。
  • 了解用户心理
    • 可接受的加载时长
      • 8s原则
      • 2s优良，3-4s勉强接受，长于5s影响使用
    • 用户内心波动
      • 0-1s略微上升，1-3s平滑下降，8s后失去耐心
    • 增加用户耐心度
      • loading页
      • 介绍页
      • 。。。
  • 前端的作用
    • 用户的第一印象
    • 前端之于万物互联
    • 让产品使用变得更有趣
• 宏观上的俯瞰
  • 前端性能瓶颈
    • 技术选型
      • 技术框架选型
        • 代码管理
        • 代码压缩
        • 框架选型
        • UI库
          • 图片资源
          • 字体
        • CSS预编译器
      • 传统DOM
        • 传统DOM操作对性能的影响
        • 频繁的DOM结构操作会引起页面的重排（Reflow）与重绘（Repaint）
        • 浏览器渲染过程
          • 解析Html文档：解析Html，生成DOM；解析CSS，生成CSSOM
          • 根据生成的DOM和CSSOM构建渲染树
          • 根据渲染树，计算每个节点在屏幕的位置，尺寸等信息
          • 将渲染树绘制到屏幕上
      • 双向数据绑定
        • MVVM框架
          • Model⬅➡ViewModel⬅➡View
          • 数据监听器
            • 谷歌Angular 脏值检测
            • 国内Vue 数据劫持
          • Watcher
          • 解析器
        • 业务兼容性
          • CSS大部分特性：动画相关，弹性盒模型，文本、盒子及其他基础属性，选择器
          • HTML5新增标签：缓存方面，多媒体与图形处理，即时通信，JavaSpript接口
      • UI组件库的选择
        • PC端
          • Element-UI
          • Ant-Design
          • Bootstrap/ZUI
          • EasyUI/jQuery UI
        • 移动端
          • Mint-UI
          • AntUI/AlipayUI
          • Zepto
    • 项目复杂程度
      • 单一页面完成复杂交互
        • 多页面切换
          • 页面切换较慢
        • 单页应用（SPA）
          • 初始加载时间更长
          • 无刷更新，体验更好
          • 不利于搜索引擎优化（SEO）
      • 同一页面的数据多寡
        • 缓存，懒加载
    • 运行环境
      • 浏览器请求并发数限制
      • 简述JavaScript
        • 弱语言
        • 单线程+异步队列
  • 前端的分层
    • HTML结构层
      • 网页标准的声明
      • 头部ｈｅａｄ
      • ｈｔｍｌ５新增特性
        • 语义化标签
        • input标签类型
        • 新增一些表单元素
        • 多媒体
        • 图形化处理Canvas
      • HTML５创新
        • 多设备，跨平台
        • 网络标准的统一
        • 标签功能化
        • 语义化
        • 功能内置
    • CSS样式层
      • CSS样式表
        • 外链式CSS
        • 内联式CSS
        • 嵌入式CSS
      • CSS预处理之Less，Sass
        • Less 变量，继承，参数，运算，函数，混合，嵌套等
        • Sass 函数比Less强大，有Compass库
      • CSS3
    • JS行为层
      • js
        • ECMAScript
          • 核心解释器
        • DOM
          • 文档对象模型
          • 获取元素
          • 修改样式
          • 操作元素
        • BOM
          • 浏览器对象模型
      • ES6，ES7，ES8
        • ES6 ，ECMAScript 2015的简称（2015.06）
        • 块级作用域let和const
        • 解构赋值
        • 箭头函数
        • map，set
        • 简写
        • promise（ES6）和async/await（ES7）
        • 模块化编程
        • 模板字符串
        • symbol数据类型
• 前端思想与案例分析
  • 思想高于逻辑，逻辑强于代码
    • 首次架构
    • 良好的编码习惯
      • 少用if和else
      • 符号位左右留空
      • 常量在前，表达式在后
      • 拆分为小模块
    • 代码重构
    • 开发效率与性能的平衡
  • 性能优化案例分析
    • 搜索网站优化
    • 电商网站优化
    • 新闻网站优化
• 好用的前端工具与新技术
  • 前端调试
    • chrome
      • chorme浏览器
      • chorme开发者工具
    • 断点
      • console.log
      • 断点
  • 常见的自动化构建工具
    • Grunt
      • 环境搭建
      • 前端构建
    • Gulp
      • 环境搭建
      • 前端构建
    • webpack
      • webpack压缩打包界面
      • webpack常用配置
  • 新技术对性能的提升
    • 即时通讯
      • 传统长短连接轮询
      • 订阅-发布
      • socket.io
    • mvvm框架
      • 虚拟dom
      • diff算法
      • vue相关知识
      • v-if和v-show
      • vue组件
      • vuex数据中心
    • 移动端相关应用
      • 骨架屏Skeleton
      • pwa渐进式增强web应用
• 分条目详解性能优化
  • HTML层级优化
    • 化繁为简
      • 减少html层级嵌套
      • 减少空标签、无用标签的滥用
    • 标签属性及模板
      • 标签的style属性
      • 标签的自定义属性
      • 合理利用模板引擎
    • 容易忽略的细节
      • link标签
      • img标签
      • src属性和href属性
  • CSS层级优化
    • 样式多复用
      • 样式继承与复用
      • 尽量避免同一类名多次渲染
      • 少用高优先级选择器，慎用！important
    • CSS选择器
      • 伪选择器的妙用
      • 忌层级过深的css选择器
      • 不用css表达式
      • 通配符*
    • 减少昂贵的样式成本
      • 昂贵样式
        • 阴影 box-shadow
        • 渐变 gradients
        • 滤镜 filter
        • 透明度 opacity
        • 弧形边 opacity
        • 圆角 border-radius
      • 减少浏览器重排与重绘
      • 避免float滥用
    • CSS层级其他优化
      • css sprite 雪碧图
      • 充分利用强大的CSS3
        • 动画实现，阴影，渐变等
      • media guery 媒体查询
  • JavaScript层级优化
    • javascript运行机制
      • 线程与进程
      • js执行机制
    • 定时器
      • 定时器使用
      • 定时器清除
      • CSS3动画
    • 事件的绑定
      • 多利用事件代理委托
      • 避免重复的事件监听
      • 事件冒泡机制
    • 一些优秀的js层级思想
      • jquery的ready与原生window.onload
      • mvvm框架的生命周期
      • 变量缓存与私有化
  • 资源加载优化
    • 资源解析优化
      • DNS优化
      • CDN部署与缓存
      • http缓存
    • 加载模式
      • 懒加载
      • 分页加载
      • 区域无刷ajax加载
    • 资源优化处理
      • css预处理及压缩
      • js代码压缩处理
      • base64
      • 大中小图片方案及图片压缩
      • 屏蔽开发时的调试、日志代码
  • 其他层级优化
    • 页面渲染过程
      • 出入一个url至页面出现
        • DNS解析
        • request请求
        • http/https协议
        • respond message
        • 浏览器加载及渲染页面
      • 不做重复的加载
      • 精简cookie
      • 合理利用SessionStorage和LocalStorage
    • 控制交互请求
      • 浏览器并发请求限制
      • 减少同后端交互请求数
      • 代理、中间件、请求分发
    • 合理的数据结构
      • 前端展示、后端处理的思维模式
      • 数据结构宜简不宜繁
      • 采用轻量级数据交换格式
      • 前后端联调对接
    • 异步
      • 异步机制
      • promise，async/await
    • 充分利用硬件GPU加速
      • GPU图像处理加速
        • CSS3变换属性
      • 合理利用GPU加速