>一03.png无损压缩,彩图体积大, webp,无损的比PNG小26%,有损的比jpg小25%
>二08 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操作