为什么行内样式会影响性能

Question

看前端性能优化的时候，看到有一点

避免过多（如果可以完全避免的话最好）的行内样式，即style，因为这会增加下载页面内容的大小

虽然平时也很少用，因为不好维护。但是没想过会有性能问题，不能理解。
如果一些样式是必须的，就算不写成行内样式，写在CSS文件引入，这样也还是要下载CSS，那对性能有什么影响呢？

Answer 1

如果是单独、极特殊的样式写在行内不会增加网站整体的大小，如果是可重复利用的样式就会增加整体的大小

还有就是楼上说的 CSS 文件可以本地缓存，还可以使用条件请求，减少数据传输量

Answer 2

你在什么地方看见的文章，你有没有想过写文章的人本来就不懂。

其实分开写，就是易维护；

但是针对渲染的性能，未必有直接写在行内的样式高；
写在行内的样式，浏览器直接解析绘制；
分离写的样式，需要css对象模型与html对象模型，进行匹配计算绘制，这些都是需要耗时的。

Answer 3

单独的 css 文件可以缓存。

Answer 4

这个问题说白了就是减少http请求数量和缩小请求文件大小的问题，样式还是单独拿出来比较好，易于维护，目前个人在做项目时，一般利用gulp处理css，webpack处理js。最好的方式是将DOM Tree和Css Tree分开来.