精简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应用打包工具
