>
A 03.png lossless compression, a large volume of color pictures,
webp, lossless 26% smaller than PNG, lossy 25% smaller than jpg
>
Two 08
css files in the < head > Lane, js files in the < body > Lane
js variable and function optimization:
Try to use the id selector
Try to avoid using eval
js function Keep it simple as possible
Using the Event throttle function
Use event delegation
js animation Optimization:
Avoid adding a large number of animation js
Try to use animation css3
Try to use canvas animation
RequestAnimationFrame rational use of animation instead of setTimeout.setInterval
Rational use of cache:
Rational use of DOM objects
Cache list length
Use cacheable ajax
>
09 How to optimize the JavaScript cache
indexedDB: tens of hundreds of megabytes of storage contrast cookie: kb-level storage
Index database
Used:
The client stores a large amount of structured data
Use without network connection
Redundant, rarely modified but often accessed data in order to avoid any time to obtain data from the server
LocalStorage:
Local storage
Used:
Cache static file content JS / CSS (such as Baidu M Station Home)
Cache API interface data rarely changes
Cache Location Information
Browse the specific location of the page
>
10JS modular loading scheme
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操作