最近在研究前端优化,我想先从页面渲染这块来写前端的优化,毕竟我们优化的是页面,那页面的优化肯定就是页面更快更好的呈现啊,那这个呈现肯定就好页面渲染有关喽，那我们先研究页面初次呈现是什么样子的,据我所知 一个html文档里面有html节点 然后就是css img js的链接,那我们浏览器读取到一个html文档后,我们就是先读取他的节点,如果遇到css则另开一个线程去下载和解析css,然后我们的dom读取完毕后会生成一个dom树(这里的dom树只包含body里面的元素),css解析完成后会生成一个渲染树,然后渲染树和dom树结合开始绘制界面,浏览器正在一点点的绘制界面呢,突然遇到一个img标签,好吧分一个线程去下载图片,浏览器继续绘制界面,这个时候那边的图片下载下来了,把图片放在该放的位置,然后下边的元素对应下移,这就是重构,然后我们浏览器继续渲染,看到一个script标签,然后把这个js下载下来,里面有一句话 说吧div背景颜色改为红色,好吧 我们的浏览器把所有的div背景颜色改为红色,这个是重绘,当我们改变位置 大小 添加删除元素的时候会引起重构,当我们改变背景颜色 边框颜色时候会引起重绘,当然重绘的开销要比重构的开销小。知道这些有什么用：那我们就要尽量避免浏览器的重构和重绘 对不对,如果你css放在底部 那绝对会导致重构和重绘，还有每次有一个链接文件浏览器都会分配一个线程去下载文件 但是浏览器的线程不是无限多的,如果线程用完了 只能等待某个文件下载完成后才能继续下载 所以这个时候我们就要尽量减少请求数，所以我们可以合并 压缩文件,然后图片可以使用雪碧图或者base64位编码,

那css文件里面对于类名的写法也是有讲究的,我们习惯使用嵌套这样一来避免类名冲突 而来更加直观,但是这样会在无形中加重浏览器的负担,浏览器解析css是从右向左解析的 每次获取一个类名他都要和他的父类名进行匹配,所以我们可以使用驼峰命名,

那js的操作是不是也有优化的地方呢,那肯定是的了,频繁的dom操作引起的重构和重绘肯定不是我们愿意看到的,所有缓存dom节点,尽量减少dom查询是优化之根本,对jquery来说 利用ID去查找会更快,缓存jquery对象 链式操作 使用子元素都是不错的办法

那ajax请求是否有优化的地方呢，肯定是的啊，频繁的网络请求谁都不爽 如果请求过来非常慢 那我直接观点你的网站好了，所以有必要的话可以缓存ajax请求,而网络请求会把cookie带过去 ，所以减少cookie的体积也是有必要的