web前端性能优化学习笔记 2019
>一03.png无损压缩，彩图体积大，
webp，无损的比PNG小26%，有损的比jpg小25%
>06优化html代码结构
减少html嵌套
减少dom节点数
减少无语义代码（如 <div class="clear"></div>）
删除http或https，如果url的协议头和当前页面的协议头一致的，或此url在多个协议头都是可用的，则可以考虑删除协议头
删多余空格，换行符 缩进 不必要的注释
省略冗余标签 属性
用相对路径url
CSS样式文件链接尽量放在页面头部
css加载不会阻塞dom tree解析，会阻塞dom tree渲染和后面js执行
js引用放在html底部
防止js的加载，解析，执行对阻塞页面后续元素的正常渲染
设置favicon.ico
增加首屏必要的CSS和JS
比如页面框架背景图片或loading图标，内联在html页面中，相对减少等待过程
>07css优化原则
#提升css渲染性能
谨慎使用expensive属性
nth-child伪类 position:fixed定位
尽量减少样式层级数
div ul li span i {color:blue}
尽量避免使用占用过多cpu和内存的属性
尽量避免使用耗电量大的属性
如css3 3D transforms css3 transitions opacity
#合适使用css选择器
尽量避免用css表达式
background-color:expression((new Date()).getHours()%2?"#FFF":"#000")
尽量避免用通配选择器
body>a{font-weight:bold;}
*= |= ^= $=
#提升css文件加载性能
使用外链的css
尽量避免用@import
#精简css代码
用缩写语句
删不必要的零
删不必要的单位，如px
删过多的分号，空格 注释
尽量减少样式表的大小
#合理用web fonts
将字体部署在CDN上
将字体以base64形式保存在css中并通过localstorage进行缓存
google字体库因为一些原因，应使用国内托管服务
#css动画优化
尽量避免同时动画
延迟动画初始化
结合SVG
>二08提升js执行效率
css文件放在<head>里，js文件放在<body>里
js变量和函数优化：
尽量使用id选择器
尽量避免使用eval
js函数尽可能保持简洁
使用事件节流函数
使用事件委托
js动画优化：
避免添加大量js动画
尽量使用css3动画
尽量使用canvas动画
合理使用requestAnimationFrame动画代替setTimeout.setInterval
合理使用缓存：
合理使用DOM对象
缓存列表长度
使用可缓存的ajax
>09如何对JavaScript的缓存进行优化
indexedDB：存储几十几百兆 对比 cookie：存储kb级别
索引数据库
应用于：
客户端存储大量结构化数据
无网络连接情况下使用
将冗余，很少修改但经常访问的数据，以避免随时从服务端获取数据
LocalStorage:
本地存储
应用于：
缓存静态文件内容JS/CSS（比如百度M站首页）
缓存不常变更的API接口数据
缓存地理位置信息
浏览在页面的具体位置
>10JS模块化加载方案
ES6 import
//square.js
export function square(x){
return x*x
}
//main.js
import {square} from 'square';
console.log(square(10))//100
一些低级浏览器，ES6经过babel编译，才可以在其中使用
>11怎样减少浏览器的回流和重绘
CSS
避免过多样式嵌套
避免使用CSS表达式
使用绝对定位，可让动画元素脱离文档流
避免使用table布局
尽量不使用float布局
图片最好设置好width height
尽量简化浏览器不必要的任务，减少页面重新布局
使用viewport设置屏幕缩放级别
避免频繁设置样式，最好把新style属性设置完成后，进行一次性更改，比如把样式放在class下面，一次性写在元素上面
避免使用引起回流/重绘的属性，最好把相应变量缓存起来
JS
最小化回流和重排
为了减少回流发生次数，避免频繁或操作DOM，可合并多次对DOM修改，然后一次性批量处理
控制绘制过程和绘制区域
绘制过程开销比较大的属性设置应该尽量避免减少使用
减少绘制区域范围
>12DOM编程优化
控制DOM大小
合理的业务逻辑
延迟加载即将呈现的内容，懒加载
简化DOM操作
对DOM节点的操作统一处理后，再统一插入到DOM Tree中
可以使用fragment,尽量不再页面DOM Tree里直接操作
三大框架用虚拟DOM技术，diff算法简化减少DOM操作
