前端性能优化

博客1

博客2

原则
1 .多使用内存，缓存
2 .减少CPU计算，减少网络请求
3. 减少IO操作（硬盘读写

• 加载资源优化
  静态资源合并和压缩、静态资源缓存、使用CDN加载静态资源
  合并：a.js b.js c.js -------------> abc.js
  缓存：<script src='abc.js'></script>
• 渲染优化
  「1」css放head中，js放body中
  「2」图片懒加载（延迟加载）

<img src='image.png' realsrc='abc.png' id='image1'>
<script>
	var i =document.getElementById('image1')
	i.src=i.getAttribute('realsrc')
</script>

「3」减少dom操作，多做缓存,

//缓存dom
	var p =document.getElementByTagName('p')
	for(let i =0;i<p.length;i++){
}
//合并dom插入
var listNode=  
var flag = 
var li
for(let i=0;i<10;i++){
	li=
	li.innerHTML=i
	flag.appendChild(li)
	}
listNode.appendChild(flag)

「4」事件节流
监听改变change事件，setTimeout方法设定一个缓冲触发事件，无需每次触发
「5」尽早执行DOMContentLoaded
DOMContentLoaded：当初始的html文档被完全加载和解析完成之后，触发
load：仅检测一个完全加载的页面，页面的html、css、js、image等全部加载完