这篇是写于17年9月中的笔记，看了优达学城的视频写的
浏览器渲染优化，目的是提高用户体验，重点在于用户交互那一方面的，用户加载、点击或操作网站时，网站响应速度块，网站动画显示不卡顿、流畅、不掉帧。 既然是浏览器渲染优化，那就是从浏览器加载html、css、构建dom、cssom、计算样式布局、渲染并合成上优化，缩短这一路径上的时间，详情请看我上一篇笔记，网站性能优化。
网页一个生命周期是响应，动画，加载，闲置，英文简称rail。 加载：一开始是加载，用户肯定希望网页加载越快越好，在加载这一方面，上一篇网站性能优化已经说的很详细了。然而对于我们web前端工程师来说，加载操作在一秒之内完成。这样用户的体验就感觉很好了，再快用户也感觉不到。 闲置：然后网页加载完后，通常有50ms闲置时间，那是在网页加载完后用户没有反应过来的最短时间（至于为什么是50ms，优达课程上说的，我也不是很清楚，可能跟人的大脑反应速度有关吧）。这时候我们就可以处理那些为了达到一秒钟完成加载的目标而推迟完成的工作。 以便用户做出的一切操作都让用户觉得很流畅。 响应：优达课程上说，100ms内我们要完成对用户的响应（又是研究表明。。。。） 动画：其中，动画效果是比较难的，用户操作需要动画效果的话，就需要动画帧数达到60帧每秒。 有些人会问，为什么不是24帧，人脑的视觉残留什么的不是24毫秒么。那是因为计算机的帧数是不平均的，比如说一秒三十帧，他可能前500ms就给你完成了29帧，后500ms就只有一帧，就是因为这样，三十帧每秒还是稍微有点卡顿的。对于电脑最低要求是60帧每秒，那么无论电脑怎么弄都是流畅的，因为帧数足够多。闲话就扯到这。 所以我们处理动画的时间只有16ms，60帧每秒，1000ms/60。但是16ms是不行的，因为还有其他的工作要做，所以通常是10到12毫秒时间给我们完成每一帧的动画。 这里说些动画效果，比如说菜单的滑入滑出，都是需要达到60帧每秒的 所以我们在用css或js实现这些效果时要谨慎些。 优达课程的讲师说了一个他处理动画效果的一个办法，是他在写2014年chrome开发者峰会网站的时候用到过的。他要为卡片添加动画效果，点击卡片，卡片展开至全屏幕显示文章。然后点右上角的xx就可以还原点击前的页面。他一开始完成的时候无法做到60帧每秒，所以怎么办呢，他说向后运行（working backwards），称他的策略为
初始，结束，倒转，播放 First表示起始位置，last表示结束位置，他的想法就是提前计算好卡片的起始位置（可能是top和left值）和结束位置，我的理解是提前知道动画开始前卡片的样式和动画结束后卡片的样式，让这些计算不要在动画阶段（就是那10到12ms期间）计算。我的实现方法是先让js（这个js文件设置成异步加载）计算并保存好这些数据，然后再用户点击时直接取这些数据就好了。 倒转没看懂他要讲的是什么，好像就是根据起始和结束的信息倒转动画， 这里要注意css样式属性成本，要知道某些属性耗费的成本是很高的，涉及到布局（也就是宽高、位置一些几何属性）的都比较高，因为它在渲染路径的一开始的地方，触发了布局，布局后面所有设计到更改的全都要重新运算，所以成本较高。
JavaScript（3ms到4ms）--->计算样式--->布局--->绘制--->合成。
JavaScript是经常用来实现动画效果的，我就经常用js更改css样式从而实现一些动画效果。 优达课程上建议我们用 一帧的js处理时间最多3到4ms，
不建议使用setTimeout函数和setInterval函数，因为它会打乱管道（我的理解就是管道相当于渲染路径），如果浏览器正在计算样式，这时候突然插进来js代码要运行，这个js又更改了样式，导致前面的工作白做了，又要重新计算样式，这样会浪费达赖你的事件，从而导致丢失了这一帧。
布局反复 就是在JavaScript部分请求浏览器先运行布局（就是触发了布局流程，比如一些读取css的属性，因为涉及到计算样式，计算样式后面是布局。还有就是更改几何属性，位置和宽高），然后重新计算样式，再次进行布局 就会出现强制同步布局出现，当我们访问某些属性时就会触发布局流程 这些属性列表在https://csstriggers.com/。
这里的话我还不是很懂，没怎么明白到底怎么触发布局流程的。优达课程上是以一个简单的网站示例，里面有一段代码，
他这里是一个循坏，先是p小于等于paragraphs.length。这里读取了p标签的数量。 然后循环读取block的宽，触发了布局，然后给了paragraphs宽。触发了计算样式
反正我的理解就是批次读取属性的值，然后批次更新。
