1. 客户端渲染:CSR (client side render)
    在服务端放了一个html 页面,里面有
    客户端发起请求,服务端把页面(响应的是字符串)发送过去,客户端从上到下依次解析,如果在解析的过程中,发现ajax
    请求,再次像服务器发送新的请求,客户端拿到ajax 响应结果,模板引擎渲染。
    过程至少和服务端发起两次请求

  2. 服务端渲染:SSR (server side render)
    sever 端页面+数据,服务端过程:
    1.读取index.html
    2.模版进行渲染,在发送给客户端之前,在服务端已经把index.html 渲染处理了。var 渲染结果 = tempeter.render(模板字符串,{解析替换对象}) response.end(渲染结果),服务端响应的就是最总的结果
    服务端只请求一次
    多数网站既有服务端渲染又有客户端渲染

  3. 服务端渲染和客户端渲染的区别

    • 客户端渲染不利于 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等等各种各样的资源。前端优化是复杂的,针对方方面面的资源都有不同的方式。那么,为什么要进行前端性能优化? 怎么进行优化? 优化到达的效果是什么?

阅读全文
  • 第 1 页 共 1 页
Copyrights © 2019 LittleStar. All Rights Reserved. 载入天数...载入时分秒...
字数统计:147.2k
作者的图片

LittleStar

纵豆蔻词工,青楼好梦,难赋深情


程序员


China