node中使用DOM和BOM
概述
问题：我们为啥在node端去操作 dom和bom?
CSR客户端渲染
- 当今前端热门框架
ReactVueAngular开发的时候默认都是CSR即客户端渲染
如果我们做商城 公司官网 xx视频 如果采用客户端渲染方式会有以下几个弊端
-
首屏加载过慢：当用户第一次进入网站时 ，CSR会进行 html css js的渲染，渲染过程 遇到大量资源会让用户等待时间过长，出现白屏，对用户体验不是很好，好在现在有许多 优化方式如
资源的懒加载路由懒加载等 -
不利于SEO：这个弊端 是CSR在怎么优化也达不到 服务端 渲染的效果 ，因为客户端渲染的东西 他生成文件很单一 就是一个脚本文件，而恰巧，如果我们要做搜索引擎爬虫优化，爬虫是无法很好地解 析由JavaScript动态生成的页面内容
SSR服务端渲染
-
如果当我们遇到需求，需要我们做SSR服务端渲染，此时我们可以选择
vue框架的NuxtReact框架的Next -
SSR渲染优点和缺点：
-
优点：
- 资源加载很快 ，因为直接就是服务器返回给客户端
- 爬虫更好的去抓住一些关键信息，有利于搜索排名
- 响应速度非常快
-
缺点：
- 什么都是服务器在做，如 资源加载 脚本加载 页面加载 对服务器要求高 对于每个请求
服务器都需要重新渲染页面，导致服务器压力过大。
- 复杂度，对开发人员来说 需要处理客户端和服务端两端逻辑
-
SSR和CSR的区别
-
页面加载方式：
-
CSR:
- 在CSR中服务器直接返回一个初始化的HTML ,然后浏览器去下载 HTML 然后浏览器遇到脚本文件 下载并执行脚本文件，JavaScript负责动态生成页面并更新内容，这意味着初始化的时候内容比较少, 页面和资源会产生白屏
-
SSR:
-
SSR直接就是服务器给客户端返回一个完整的HTML,直接交给浏览器去渲染 加载速度很快，没有白屏
-
-
-
内容生成和渲染：
- CSR: 在CSR中当浏览器下载HTML之后，页面生成渲染都是JavaScript脚本负责的，当数据发生改变的时候会去更新DOM 生成对应内容，这种方式使前端开发非常便捷快速
- SSR: 在SSR中 在服务器就已经将需要生成的HTML执行完毕，客户端拿到的就是最终结果，加载速度非常快，但是页面路由发生改变 将重新请求服务器，如果流量过大，对服务器压力非常大
-
用户交互和体验：
- CSR:排除首屏加载过慢和爬虫问题，其实客户渲染 对用户体验也是很快的
- SSR:对用户搜索很友好，首次加载时间不会让用户等待很久
-
说了这么多哪些网站适合做CSR 哪些适合做SSR
- CSR 应用例如 ToB 后台管理系统 大屏可视化 都可以采用CSR渲染不需要很高的SEO支持
- SSR 应用例如 内容密集型应用大部分是ToC 新闻网站 ，博客网站，电子商务，门户网站需要更高的SEO支持
jsdom安装
- 之前我们说到
DOM和BOM在node是没法使用的，但是如果我们遇到需求必须操作怎么办呢？
这个时候我们就需用用到第三方库jsdom
-
我们下载安装
jsdomnpm install jsdom -
jsdom是一个摸你浏览器环境的库，可以在node中使用DOM和BOM
简单案例
jsdom的使用
const fs = require('node:fs')
const {JSDOM} = require('jsdom')
const dom = new JSDOM(`<!DOCTYPE html><div id='app'></div>`)
const window = dom.window
const document = window.document
fetch('https://api.thecatapi.com/v1/images/search?limit=10&page=1').then(res=>{
return res.json()
}).then(data=>{
const app = document.querySelector('#app')
data.forEach(item=>{
const img = document.createElement('img')
img.style.width = '200px'
img.style.height = '200px'
img.src = item.url
app.appendChild(img)
})
fs.writeFileSync('./index.html',dom.serialize())
})
运行完该脚本会在执行目录下生成html文件里面内容都是渲染好的
