客户端渲染:CSR (client side render)
在服务端放了一个html 页面,里面有
客户端发起请求,服务端把页面(响应的是字符串)发送过去,客户端从上到下依次解析,如果在解析的过程中,发现ajax
请求,再次像服务器发送新的请求,客户端拿到ajax 响应结果,模板引擎渲染。
过程至少和服务端发起两次请求服务端渲染:SSR (server side render)
sever 端页面+数据,服务端过程:
1.读取index.html
2.模版进行渲染,在发送给客户端之前,在服务端已经把index.html 渲染处理了。var 渲染结果 = tempeter.render(模板字符串,{解析替换对象}) response.end(渲染结果),服务端响应的就是最总的结果
服务端只请求一次
多数网站既有服务端渲染又有客户端渲染服务端渲染和客户端渲染的区别
- 客户端渲染不利于 SEO 搜索引擎优化
- 服务端渲染是可以被爬虫抓取到的,客户端异步渲染是很难被爬虫抓取到的
- 所以你会发现真正的网站既不是纯异步也不是纯服务端渲染出来的
- 而是两者结合来做的
- 例如京东的商品列表就采用的是服务端渲染,目的了为了 SEO 搜索引擎优化
- 而它的商品评论列表为了用户体验,而且也不需要 SEO 优化,所以采用是客户端渲染
文章转载:
浏览器重绘和重排
文章参考:
重构与回流
浏览器的重绘与重排
探讨css中repaint和reflow
前言:
页面设计中,不可避免的需要浏览器进行repaint和reflow。那到底什么是repaint和reflow呢。下面谈谈自己对repaint和reflow的理解,以及结合其他技术牛的讲解,谈谈如何优化repaint和reflow。
概述:
重排(回流), 顾名思义就是重新排版的意思; 重绘, 就是浏览器重新绘制。理解重排和重绘的含义十分重要, 因为在评审页面交互效果的时候, 重绘和重排是必须考虑的因素。并不是说交互效果实现了就可以了, 必须同时考虑到这样做会引发什么性能问题。也就是说, 浏览器在进行重绘和重排的时候是要付出高昂的性能代价的。
只有静态页面才会不存在repaint和reflow。repaint主要是针对某一个DOM元素进行的重绘,reflow则是回流,针对整个页面的重排。字面意思来说:repaint就是重绘,reflow就是回流。回流必将引起重绘,而重绘不一定会引起回流,repaint和reflow的目的是:展示一个新的页面样貌。
转载:
前端性能优化–yahoo前端性能团队总结的35条黄金定律
参考文章:
Web前端应该从哪些方面来优化网站? - 斯迪的回答 - 知乎
WEB前端性能优化常见方法
前端是庞大的,包括 HTML、 CSS、 Javascript、Image 、Flash等等各种各样的资源。前端优化是复杂的,针对方方面面的资源都有不同的方式。那么,为什么要进行前端性能优化? 怎么进行优化? 优化到达的效果是什么?