专题：渲染 -- IT技术博客大学习 -- 共学习共进步！

当我们选择使用Node+React的技术栈开发Web时，React提供了一种优雅的方式实现服务器渲染。使用React实现服务器渲染有以下好处： 1.利于SEO：React服务器渲染的方案使你的页面在一开始就有一个HTML DOM结构，方便Google等搜索引擎的爬虫能爬到网页的内容。 2.提高首屏渲染的速度：服务器直接返回一个填满数据的HTML，而不是在请求了HTML后还需要异步请求首屏数据。 3.前后端都可以使用js。

前后端分离的思考与实践（二）

过去的AJAX、Client-side MVC、SPA、Two-way Data Binding 等技术的出现，都是试图要解决当时的前端开发遇到的瓶颈。而NodeJS中间层的出现，也是在试图解决现今前端被侷限在浏览器端的一个限制。这边文章专注于前后端模版共享，也希望能抛砖引玉，与大家一起讨论如何在NodeJS中间层这个架构下，我们可以怎样的改善我们的工作流程，怎样的跟后端配合，来把前端这个工作做得更好。

记一次淘宝首页奇葩的渲染问题

很多问题都是浏览器渲染页面时, 因为渲染引擎的 bug 导致的问题, 不常见, 更加难以写 demo 演示, 它们只在特定的复杂场景下, 程序计算存在误差或者漏洞的时候出现, 尤其是涉及到边界判断的时候。

使用CSS3 will-change提高页面滚动、动画等渲染性能

CSS3 will-change属于web标准属性，虽然目前还是草案阶段，但出现已经有些时日了，兼容性这块Chrome/FireFox/Opera都是支持的。这个属性作用很单纯，就是“增强页面渲染性能”。那它是如何增强的呢？本文都过一个实例抛出will-change这个概念，继而解释其作用，分析其语法，提示使用注意事项等。希望本文的内容能够对大家的学习有所帮助。

CSS3 transform对普通元素的N多渲染影响

一个普普通通的元素，如果应用了CSS3 transform变换，即便这个transform属性值不会改变其任何表面的变化（如scale(1), translate(0,0)），但是，实际上，对这些元素还是造成了写深远的影响。所谓表面无恙，内心奔溃的真实写照。本文就列举几个目前我所知的transform影响CSS2.1中普通元素渲染表现的例子……一如既往，有Demo，有截图，有必要的源代码展示。总之，希望本文的内容能够对您的学习有所帮助~~

10条影响CSS渲染速度的写法与建议

1、*{} #zishu *{} 尽量避开。由于不同浏览器对HTML标签的解释有差异，所以最终的网页效果在不同的浏览器中可能是不一样的，为了消除这方面的风险，设计者通常会在CSS的一个始就把所有标签的默认属性全部去除，以达到所有签标属性值都统一的效果。所以就有了*通配符。*会遍历所有的标签；

浏览器图片渲染优化

您是否见过当文档加载时其内容会显示不规律的移动。之所以会这样，是因为浏览器为了能够显示每一个加载的图像，而不断地重新调整页面的布局。浏览器通过下载并解析出图像的宽度和高度来决定图像的大小，然后就会在显示窗口中留出一个相应的矩形空间。然后浏览器就会调整页面的显示布局，以便把图像插入到显示当中。这同时也告诉我们，图像是独立的文件，它与源文件都分别是独立加载的。

使用CSS3开启GPU硬件加速提升网站动画渲染性能

通过开启GPU硬件加速虽然可以提升动画渲染性能或解决一些棘手问题，但使用仍需谨慎，使用前一定要进行严谨的测试，否则它反而会大量占用浏览网页用户的系统资源，尤其是在移动端，肆无忌惮的开启GPU硬件加速会导致大量消耗设备电量，降低电池寿命等问题。

JavaScript定时机制、以及浏览器渲染机制浅谈

当 setTimeout 的延迟时间设置为 0 的时候，回调函数不会马上执行，而是进入队列。David Flanagan 在《Javascript权威指南》里并没有详细描述Javascript队列的具体运作方式，现在我来大致说一下这个问题。

从用户体验出发的性能指标分析-Start Render

如何在持续升级的项目中保持项目的高性能？如何更加准确的定位和解决性能问题？实际上，WPO的最主要目的是改善用户体验，而用户体验的好坏则可以根据几个核心性能指标来衡量。从用户体验出发的几个核心时间指标包括：Start Render、DOM Ready、Page Load、TTI。不同的性能指标对用户体验的影响是不同的，而指标本身受哪些因素的影响也是不同的。优化某个指标又该具体采用什么样的方式？

border:none;与border:0;的区别

这问题在网络相信已经有不少人问到，最近再次被牵起讨论，籍此记录一下个人的理解，borderl:none;与border:0;的区别体现有两点：一是理论上的性能差异二是浏览器兼容性的差异。

CSS的渲染效率

总结了部分所学、所听、所看、所问的一些CSS写作经验，它们与渲染效率及所占用消耗的资源有一定的关联。部分为自己理解所写，不排除会有错漏，欢迎提供更好的意见。