首屏使用骨架屏-项目中的骨架屏-前端性能优化

1.骨架屏- skeleton
在页面加载完成之前，页面出现的骨架，有利于性能优化
作用：当网页加载过慢如果是白屏，影响用户体验，
也可以加loding 来防止白屏。但是更好的解决方案就是骨架屏
实现：ui设计图片，当网页内容还没渲染出来时，先解析骨架屏这张图片，比如淘宝与京东都使用了骨架屏
或者是用布局写，当页面还没渲染出来的时候就让这个样式显示，渲染完成就隐藏
用布局写的好处：代码体积小，占用的空间可忽略，但是一张图都1kb
缺点：不需要用代码写，ui直接切好图，需要写两套样式
淘宝原生的实现：js原生里面监控DOM加载完成
首屏使用骨架屏
2.ssr 服务端渲染( serve side render) 能看到代码 好处：SEO优化 ，对服务器压力大
csr 客户端渲染（client side render） 看不到代码 都在js打包里面 对服务器的压力不大
查看网页源码，东西多就是服务端渲染，东西少就是客户端渲染
区别：SEO优化 搜索引擎优化 ,在页面渲染出来是没有任何差异的，效果都是一样的
服务度渲染容易被搜素引擎搜索到，客户端渲染的页面很难被搜到
在nextwark请求里面如果xhr里面没任何数据就是服务端渲染的，有数据就是客户端渲染
前后端分离就是客户端渲染，在前端与后端之间加node.js(中间层)
NUXTJS 性能优化 head title meta
写好的客户端渲染变为服务端渲染：1.加个中间层node.js 2.采用预渲染，预渲染只能渲染部分页面，不能太多 下载一个插件 3.使用nuxtjs
新项目就使用：nuxtjs 旧项目使用预渲染 但是不能都预渲染 或者重写 或者后端node.js写

3.SEO优化 搜素引擎优化
百度竞价 爬虫 第一