爱玲姐姐
爱玲姐姐

大前端学习 -- 服务端渲染 学习笔记

服务端渲染

文章内容输出来源：拉勾教育大前端高薪训练营

一、概述

1. 基于客户端渲染的前端框架

  • Angular
  • React
  • Vue

2. SPA单页应用

优点：

  • 用户体验好
  • 开发效率高
  • 渲染性能好
  • 可维护性好

缺点：

  • 首屏渲染时间长
  • 不利于SEO

3. 借鉴传统的服务器渲染

大前端学习 -- 服务端渲染 学习笔记_第1张图片

4. 客户端激活为SPA

大前端学习 -- 服务端渲染 学习笔记_第2张图片

5. 同构应用

  • 通过服务端渲染首屏直出，解决SPA应用首屏渲染慢以及不利于SEO问题
  • 通过客户端渲染结果页面内容交互得到更好的用户体验
  • 这种方式通常称之为现代化的服务端渲染，也叫同构渲染
  • 这种方式构建的应用称之为服务端渲染应用或者是同构应用

6. 相关概念

  • 什么是渲染：把数据和模板拼接在一起。渲染的本质就是字符串的解析替换。
  • 传统的服务端渲染：早期的web页面渲染都是在服务端进行的
  • 客户端渲染
  • 现代化的服务端渲染（同构渲染）

二、传统的服务端渲染（SSR）

1. 案例

大前端学习 -- 服务端渲染 学习笔记_第3张图片

index.js

const express = require('express')
const fs = require('fs')
const template = require('art-template')

const app = express()

app.get('/', (req, res) => {
  // 1. 获取页面模板
  const templateStr = fs.readFileSync('./index.html', 'utf-8')
  console.log(templateStr)
  // 2. 获取数据
  const data = JSON.parse(fs.readFileSync('./data.json', 'utf-8'))
  console.log(data)
  // 3. 渲染：数据 + 模板 = 最终结果
  const html = template.render(templateStr, data)
  console.log(html)
  // 4. 把渲染结果发送给客户端
  res.send(html)
})

app.listen(8081, () => {
  console.log('running......')
})

index.html


<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>传统的服务端渲染示例title>
head>
<body>
  <h1>
    传统的服务端渲染示例
  h1>
  <h2>{{title}}h2>
  <ul>
    {{ each data }}
    <li>{{$value.name}}li>
    {{ /each }}
  ul>
body>
html>

data.json

{
  "data": [
    {
      "id": 1,
      "name": "jal"
    },
    {
      "id": 2,
      "name": "wyb"
    }
  ],
  "title": "王一博0805生日快乐"
}

2. 缺点

  • 前后端代码完全耦合在一起，不利于开发和维护
  • 前端没有足够发挥空间
  • 服务端压力大
  • 用户体验一般

三、客户端渲染（CSR）

之前服务端渲染的缺点，随着客户端Ajax技术的普及得到了有效的解决，Ajax使得客户端动态获取数据成为可能，因此，服务端渲染的工作来到了客户端。

以Vue.js项目为例系统了解客户端渲染流程。

  • 后端负责处理数据接口
  • 前端负责将接口数据渲染到页面中

前端更为独立，不再受限于后端。

但客户端渲染也存在一些明显的不足：

  • 首屏渲染慢：因为客户端渲染至少发起Http请求三次，第一次是请求页面，第二次是请求页面里的JS脚本，第三次是动态数据请求。

  • 不利于SEO：因为客户端渲染的内容都是由JS生成的，而搜索引擎只会请求网络路径的html，不会去将html里的JS脚本再去请求做解析处理，因此搜索引擎获取到的首屏是空的，单页应用SEO几乎为0。

    // 搜索引擎是怎么获取网页内容的？
const http = require('http')

http.get('http://localhost:8080', res => {
  let data = ''
  res.on('data', chunk => {
    data += chunk
  })
  res.on('end', () => {
    console.log(data)
  })
})

/*
打印结果：


  
    
    
    
    
    vuex-cart-demo-template
  
  
    
    
    
    
  

*/

四、现代化的服务端渲染（同构渲染）

1. 同构渲染 = 后端渲染 + 前端渲染

  • 基于React、Vue等框架，客户端渲染和服务端渲染的结合
    • 在客户端执行一次，用户实现服务器端渲染（首屏直出）
    • 在客户端再执行一次，用于接管页面交互
  • 核心解决SEO和首屏渲染慢的问题
  • 拥有传统服务端渲染的优点，也有客户端渲染的优点。

2. 如何实现同构渲染?

  • 使用Vue、React等框架的官方解决方案
    • 优点：有助于理解原理
    • 缺点：需要搭建环境
  • 使用第三方解决方案
    • React生态的Next.js
    • Vue生态的Nuxt.js

3. 以Vue生态的Nuxt.js为例演示同构渲染应用

  1. 创建一个文件夹，然后进入文件夹执行yarn init生成包管理器

  2. 然后执行yarn add nuxt安装Nuxt

  3. 在package.json增加scripts脚本命令"dev": "nuxt"

  4. 创建pages文件夹，在这个文件夹中创建index.vue文件和about.vue文件，nuxt会根据pages路径自动生成路由。

    // index.vue
<template>
  <div>
    <h1>首页h1>
  div>
template>

<script>
export default {

}
script>

<style scoped>

style>

    // about.vue
<template>
  <div>
    <h1>Abouth1>
  div>
template>

<script>
export default {

}
script>

<style scoped>

style>

  5. 执行yarn dev运行这个Nuxt项目，打开localhost:3000端口，默认是pages/index.vue页面，然后访问localhost:3000/about访问的是pages/about.vue页面

  6. 在pages/index.vue页面中通过asyncData方法获取json数据，静态的json数据文件是放在static目录下的。Nuxt中提供的钩子函数asyncData()，专门用于获取服务端渲染的数据。axios不要忘了安装：yarn add axios

    // pages/index.vue
<template>
  <div id="app">
    <h2>{{ title }}h2>
    <ul>
      <li
        v-for="item in data"
        :key="item.id"
      >{{ item.name }}li>
    ul>
  div>
template>

<script>
import axios from 'axios'

export default {
  name: 'Home',
  components: {},
  // Nuxt中提供一个钩子函数`asyncData()`，专门用于获取服务端渲染的数据。
  async asyncData () {
    const { data } = await axios({
      method: 'GET',
      // 注意此处的URL要指定当前端口，否则默认会去服务端的80端口去查找。
      url: 'http://localhost:3000/data.json'
    })
    // 这里返回的数据会和data () {} 中的数据合并到一起给页面使用
    return data
  }
}
script>

<style scoped>

style>

    static/data.json

    {
  "data": [
    {
      "id": 1,
      "name": "jal"
    },
    {
      "id": 2,
      "name": "wyb"
    }
  ],
  "title": "王一博0805生日快乐"
}

  7. 一次请求就拿到了完整页面，Nuxt的服务端渲染方案解决了首屏渲染慢的问题和SEO的问题

大前端学习 -- 服务端渲染 学习笔记_第4张图片

  1. Nuxt生成的是SPA单页应用，可以通过增加路由导航看出来，Home和About两个组件切换时页面没有刷新。创建一个文件夹layouts，然后在这个文件夹中创建一个default.vue文件，这个文件名是固定要求的，不能随意取

    <template>
<div>

  <ul>
    <li>
      
      <nuxt-link to="/">Homenuxt-link>
    li>
    <li>
      
      <nuxt-link to="/about">Aboutnuxt-link>
    li>
  ul>

  <nuxt />
div>
template>

<script>
export default {

}
script>

<style scoped>

style>

4. 同构渲染应用的问题

  • 开发条件有限

    • 浏览器特定的代码只能在某些生命周期钩子函数中使用
    • 一些外部扩展库可能需要特殊处理才能在服务端渲染应用中运行
    • 不能再服务端渲染期间操作DOM
    • 某些代码操作需要区分运行环境

  • 涉及构建设置和部署的更多要求

    客户端渲染 同构渲染
    构建 仅构建客户端应用即可 需要构建两个端
    部署 可以部署在任意web服务器中 只能部署在Node.js Server中

  • 更多的服务器端负载

    • 在Node中渲染完整的应用程序，相比仅仅提供静态文件服务器，需要大量占用CPU资源
    • 如果应用在高流量环境下使用，需要准备相应的服务器负载
    • 需要更多的服务端渲染优化工作处理

5. 服务端渲染使用建议

  • 首屏渲染速度是否真的重要
  • 是否真的需要SEO

你可能感兴趣的:(大前端)

  • 鸿蒙(HarmonyOS)应用开发实战——数据库版本升级案例 CTrup 移动开发鸿蒙开发HarmonyOSharmonyos数据库华为鸿蒙开发装饰器模式ArkUI前端
    往期推文全新看点学鸿蒙开发的优劣势，你清楚吗？建议你了解一下！鸿蒙（HarmonyOS）北向开发知识点记录~鸿蒙（OpenHarmony）南向开发保姆级知识点汇总~鸿蒙应用开发与鸿蒙系统开发哪个更有前景？嵌入式开发适不适合做鸿蒙南向开发？看完这篇你就了解了~对于大前端开发来说，转鸿蒙开发究竟是福还是祸？鸿蒙岗位需求突增！移动端、PC端、IoT到底该怎么选？记录一场鸿蒙开发岗位面试经历~持续更新中…
  • 鸿蒙跨平台框架ArkUI-X 搜狐技术产品小编2023 harmonyos华为
    01引言目前，移动端主流跨平台方案有Flutter、ReactNative、uni-app等等，还有刚推出不久的Compose-Multiplatform，真所谓是百花齐放。这些框架各有特点，技术实现各有差异，比如Flutter通过Dart编写的UI描述对接Flutter渲染引擎，ReactNative则是借助大前端成熟的发展背景，利用JS引擎生成UI描述，渲染时转化为原生控件，复用了原生渲染能力
  • 鸿蒙5.0实战案例：基于Search组件实现搜索栏 敢嗣先锋 鸿蒙开发HarmonyOS移动开发harmonyos鸿蒙开发移动开发组件化ArkUISearch页面布局
    往期推文全新看点（文中附带全新鸿蒙5.0全栈学习笔录）✏️鸿蒙（HarmonyOS）北向开发知识点记录~✏️鸿蒙（OpenHarmony）南向开发保姆级知识点汇总~✏️鸿蒙应用开发与鸿蒙系统开发哪个更有前景？✏️嵌入式开发适不适合做鸿蒙南向开发？看完这篇你就了解了~✏️对于大前端开发来说，转鸿蒙开发究竟是福还是祸？✏️鸿蒙岗位需求突增！移动端、PC端、IoT到底该怎么选？✏️记录一场鸿蒙开发岗位面
  • 鸿蒙5.0实战案例：基于ArkUI的验证码实现 敢嗣先锋 移动开发鸿蒙开发HarmonyOSharmonyos鸿蒙开发openharmony移动开发ArkUI
    往期推文全新看点（文中附带全新鸿蒙5.0全栈学习笔录）✏️鸿蒙（HarmonyOS）北向开发知识点记录~✏️鸿蒙（OpenHarmony）南向开发保姆级知识点汇总~✏️鸿蒙应用开发与鸿蒙系统开发哪个更有前景？✏️嵌入式开发适不适合做鸿蒙南向开发？看完这篇你就了解了~✏️对于大前端开发来说，转鸿蒙开发究竟是福还是祸？✏️鸿蒙岗位需求突增！移动端、PC端、IoT到底该怎么选？✏️记录一场鸿蒙开发岗位面
  • 微信小程序授权登录源码 小莉爱编程 uniapp微信小程序
    应广大前端程序员要求，源码附上了这里是授权的页面@import"../assets/sass/setting";.authorization{position:relative;.box{position:absolute;top:50%;
  • 鸿蒙5.0实战案例：基于原生能力的横竖屏旋转适配 敢嗣先锋 鸿蒙开发移动开发HarmonyOSharmonyos鸿蒙开发openharmony移动开发ArkUI
    往期推文全新看点（文中附带全新鸿蒙5.0全栈学习笔录）✏️鸿蒙（HarmonyOS）北向开发知识点记录~✏️鸿蒙（OpenHarmony）南向开发保姆级知识点汇总~✏️鸿蒙应用开发与鸿蒙系统开发哪个更有前景？✏️嵌入式开发适不适合做鸿蒙南向开发？看完这篇你就了解了~✏️对于大前端开发来说，转鸿蒙开发究竟是福还是祸？✏️鸿蒙岗位需求突增！移动端、PC端、IoT到底该怎么选？✏️记录一场鸿蒙开发岗位面
  • 鸿蒙5.0实战案例：基于webView的嵌套滚动 敢嗣先锋 鸿蒙开发移动开发HarmonyOSharmonyos鸿蒙开发移动开发ArkUI组件化WebViewWeb组件
    往期推文全新看点（文中附带全新鸿蒙5.0全栈学习笔录）✏️鸿蒙（HarmonyOS）北向开发知识点记录~✏️鸿蒙（OpenHarmony）南向开发保姆级知识点汇总~✏️鸿蒙应用开发与鸿蒙系统开发哪个更有前景？✏️嵌入式开发适不适合做鸿蒙南向开发？看完这篇你就了解了~✏️对于大前端开发来说，转鸿蒙开发究竟是福还是祸？✏️鸿蒙岗位需求突增！移动端、PC端、IoT到底该怎么选？✏️记录一场鸿蒙开发岗位面
  • 鸿蒙5.0实战案例：基于原生的水印添加能力 敢嗣先锋 移动开发鸿蒙开发HarmonyOSharmonyosc++鸿蒙开发ArkUI移动开发
    往期推文全新看点（文中附带全新鸿蒙5.0全栈学习笔录）✏️鸿蒙（HarmonyOS）北向开发知识点记录~✏️鸿蒙（OpenHarmony）南向开发保姆级知识点汇总~✏️鸿蒙应用开发与鸿蒙系统开发哪个更有前景？✏️嵌入式开发适不适合做鸿蒙南向开发？看完这篇你就了解了~✏️对于大前端开发来说，转鸿蒙开发究竟是福还是祸？✏️鸿蒙岗位需求突增！移动端、PC端、IoT到底该怎么选？✏️记录一场鸿蒙开发岗位面
  • 鸿蒙5.0实战案例：基于原生能力的深色模式适配 敢嗣先锋 鸿蒙开发移动开发HarmonyOSharmonyos组件化移动开发uiArkUI鸿蒙开发
    往期推文全新看点（文中附带全新鸿蒙5.0全栈学习笔录）✏️鸿蒙（HarmonyOS）北向开发知识点记录~✏️鸿蒙（OpenHarmony）南向开发保姆级知识点汇总~✏️鸿蒙应用开发与鸿蒙系统开发哪个更有前景？✏️嵌入式开发适不适合做鸿蒙南向开发？看完这篇你就了解了~✏️对于大前端开发来说，转鸿蒙开发究竟是福还是祸？✏️鸿蒙岗位需求突增！移动端、PC端、IoT到底该怎么选？✏️记录一场鸿蒙开发岗位面
  • android学习，android后端服务器的搭建 2401_84413531 程序员android学习服务器
    那么在市场紧缩以及大前端的趋势下，我们移动端程序员如何突破职业瓶颈，保持个人的核心竞争力呢？一、硬技能：专业的技术知识1.Java/Kotlin开发语言Java常用数据结构：ArrayList、Vector、CopyOnWriteArrayList、HaspMap、ConcurrentHashMap、HashTable等使用场景。JVM虚拟机包括Java内存管理，GC垃圾回收机制，类加载机制。推荐
  • 鸿蒙5.0实战案例：基于measure实现的文本测量 敢嗣先锋 鸿蒙开发移动开发HarmonyOSharmonyos鸿蒙开发移动开发ArkUI
    往期推文全新看点（文中附带全新鸿蒙5.0全栈学习笔录）✏️鸿蒙（HarmonyOS）北向开发知识点记录~✏️鸿蒙（OpenHarmony）南向开发保姆级知识点汇总~✏️鸿蒙应用开发与鸿蒙系统开发哪个更有前景？✏️嵌入式开发适不适合做鸿蒙南向开发？看完这篇你就了解了~✏️对于大前端开发来说，转鸿蒙开发究竟是福还是祸？✏️鸿蒙岗位需求突增！移动端、PC端、IoT到底该怎么选？✏️记录一场鸿蒙开发岗位面
  • 鸿蒙5.0实战案例：关于图像撕裂、掉帧等异常现象的原理以及优化方案 敢嗣先锋 鸿蒙开发HarmonyOS移动开发harmonyos鸿蒙开发openharmony移动开发ArkUI性能优化
    往期推文全新看点（文中附带全新鸿蒙5.0全栈学习笔录）✏️鸿蒙（HarmonyOS）北向开发知识点记录~✏️鸿蒙（OpenHarmony）南向开发保姆级知识点汇总~✏️鸿蒙应用开发与鸿蒙系统开发哪个更有前景？✏️嵌入式开发适不适合做鸿蒙南向开发？看完这篇你就了解了~✏️对于大前端开发来说，转鸿蒙开发究竟是福还是祸？✏️鸿蒙岗位需求突增！移动端、PC端、IoT到底该怎么选？✏️记录一场鸿蒙开发岗位面
  • 大前端公共知识杂谈 黑虎含珠 #FlinkCDC
    近年来，随着移动化联网浪潮的汹涌而来与浏览器性能的提升，iOS、Android、Web等前端开发技术各领风骚，大前端的概念也日渐成为某种共识。其中特别是Web开发的领域，以单页应用为代表的富客户端应用迅速流行，各种框架理念争妍斗艳，百花竞放。Web技术的蓬勃发展也催生了一系列跨端混合开发技术，希望能够结合Web的开发便捷性与原生应用的高性能性；其中以Cordova、PWA为代表的方向致力于为Web
  • 工作流程设计 php,php工程狮感知的前端工作流程 三符 工作流程设计php
    这个时代不懂点前端知识，真的没有办法生存。就算不会写，也得了解它的原理吧！最近做了一些总结，之前都是迷迷糊糊，搞不清楚前端之前的相关定位。好好梳理了一下。错误之处请各位指正。本文主要说的是JavaScript工作流程目前前端真的该叫大前端，其越来越细化，越来越复杂。在这种背景下，诞生了很多工具很多前端工作流程。比如热门的：reactvuewebpackbabelgulpnode.jsnpmnvma
  • 前端 TypeError 错误永久消失术
    作者：来自vivo互联网大前端团队-SunMaobin通过开发Babel插件，打包时自动为代码添加可选链运算符(?.)，从而有效避免TypeError的发生。一、背景介绍在JS中当获取引用对象为空值的属性时，程序会立即终止运行并报错：TypeError:Cannotreadpropertiesof...在ECMAScript2020新增的可选链运算符(?.)，当属性值不存在时返回undefined
  • react实现页面打开自动全屏展示_Redux 包教包会（一）：解救 React 状态危机 雯儿ccu
    前端应用的状态管理日益复杂。随着大前端时代的到来，前端愈来愈注重处理逻辑，而不只是专注UI层面的改进，而以React为代表的前端框架的出现，大大简化了我们编写UI界面的复杂度。虽然React提供了State机制实现状态管理，也有诸如“状态提升”等开发约定，但是这些方案只适用于小型应用，当你的前端应用有多达10个以上页面时，如何让应用状态可控、让协作开发高效成为了亟待解决的问题，而Redux的出现正
  • 活动邀请|2024华为云首届开源开发者论坛即将正式开幕 前端开源
    致开发者：华为云开源开发者论坛将于12月7日（周六）9点30分在上海静安香格里拉酒店正式召开，我们诚挚邀请你报名参与本次线下开发者论坛。报名成功，现场即可领取活动伴手礼，同时中午包含大会午餐。本次活动议题融入AI、Serverless、前端、时序数据库、边缘计算、批量调度等多个维度，大前端技术论坛也将从业务的实际案例出发，与大家共同探讨前端开源技术。因此希望与各位开发者齐聚上海，共赴开源盛典，共筑
  • 对于大前端开发来说，转鸿蒙开发究竟是福还是祸？ OpenHarmony_小贾 HarmonyOSOpenHarmony面试harmonyos华为移动开发鸿蒙开发Openharmony大前端
    从铺天盖地的市场消息来看，华为即将面世的鸿蒙NEXT系统已经势不可挡了想必大家都已经迫不及待地想要进行尝试。估计大家都有着同样的疑问：会不会是下一个风口？转鸿蒙应用开发难吗？会不会是下一个风口？自从鸿蒙原生应用全面启动以来，各大互联网领域的鸿蒙原生应用都在加速开发，带动了人才需求持续释放，吸引了不少人才涌入。据智联招聘数据统计，2024春招市场中软件/互联网大厂是招聘鸿蒙人才的主力，鸿蒙开发岗平均
  • HarmonyOS 开发实践——常见预置应用的跳转方式 六号嘉宾 HarmonyOS移动开发鸿蒙开发harmonyos鸿蒙开发ArkUI前端移动开发界面布局组件化
    往期学习笔录：鸿蒙（HarmonyOS）北向开发知识点记录~鸿蒙（OpenHarmony）南向开发保姆级知识点汇总~鸿蒙应用开发与鸿蒙系统开发哪个更有前景？嵌入式开发适不适合做鸿蒙南向开发？看完这篇你就了解了~对于大前端开发来说，转鸿蒙开发究竟是福还是祸？鸿蒙岗位需求突增！移动端、PC端、IoT到底该怎么选？记录一场鸿蒙开发岗位面试经历~持续更新中……场景描述三方应用实际使用过程中，可能需要跳转到
  • 前端所谓的全栈和大前端有什么区别？ yuxingwu9872 前端
    在当今的软件开发领域，前端技术不断发展和演进，产生了许多新的概念和术语。其中，“全栈”和“大前端”是两个经常被提及的词汇，它们各自代表着不同的开发理念和技术范畴。在本文中，我们将深入探讨前端所谓的全栈和大前端之间的区别。首先，我们来了解一下全栈的概念。全栈工程师是指具备前端开发、后端开发、数据库管理等多方面技能的开发人员。他们能够独立完成整个项目的开发和维护，从需求分析、设计、编码到测试、部署等各
  • 大前端工程师进阶之路，Node全栈为前端带来更多可能 麦田上的字节 高级前端全栈教程系列程序人生系列大前端node程序人生
    导读：对那些刚入门前端的开发者来说，前端是一个“令人畏惧”的领域，尤其是在你看到前端的技能图谱时，你会发出这样的感叹，前端怎么有那么多的东西要学？我应该从何处学起？我又该如何应对千变万化的前端技术？目录如何选择？关于变化前端工程师如何抉择全栈工程师很吊？说一说node全栈？K型人才？在大厂，前端晋升靠啥？大前端的边界到底在哪里？如何选择？俗话说，“男怕入错行，女怕嫁错郎”。其实前端开发也一样，从开
  • Rollup：专注类库和框架打包 时解之 JS专区RollupRollup打包大前端Javascript
    文章内容输出来源：拉勾大前端高薪训练营-概述-也是一款ESModules打包器-也可以将项目中的一些散落的细小模块打包为整块代码-rollup与webpack作用类似-rollup更为小巧，仅仅是一款ESM打包器-rollup中并不支持类似HMR这种高级特性-rollup并不是要与webpack全面竞争-目标是提供一个充分利用ESM各项特性的高效打包器-快速上手-准备代码-src/message.
  • 简述大前端技术栈的渲染原理 程序员
    作者：京东物流卢旭大前端包括哪些技术栈大前端指的是涵盖所有与前端开发相关的技术和平台，应用于各类设备和操作系统上。大前端不仅包括Web开发，还包括移动端开发和跨平台应用开发，具体包括：•原生应用开发：Android、iOS、鸿蒙（HarmonyOS）等；•Web前端框架：Vue、React、Angular等；•小程序开发：微信小程序、京东小程序、支付宝小程序等；•跨平台解决方案：ReactNati
  • Flutter使用Ohos原生组件的方法 六号嘉宾 OpenHarmony鸿蒙开发移动开发flutterharmonyos移动开发鸿蒙开发ArkUI跨端开发组件化
    往期学习笔录：鸿蒙（HarmonyOS）北向开发知识点记录~鸿蒙（OpenHarmony）南向开发保姆级知识点汇总~鸿蒙应用开发与鸿蒙系统开发哪个更有前景？嵌入式开发适不适合做鸿蒙南向开发？看完这篇你就了解了~对于大前端开发来说，转鸿蒙开发究竟是福还是祸？鸿蒙岗位需求突增！移动端、PC端、IoT到底该怎么选？记录一场鸿蒙开发岗位面试经历~持续更新中……Flutter中有些功能使用原生组件包装会更简
  • 大前端|如何突破动态化容器的天花板? 思维导图-java架构 用心去追梦 前端java架构
    突破动态化容器的天花板是现代Web开发和移动应用开发中一个重要的挑战，尤其是在大前端（包括Web端和移动端）领域。动态化容器允许内容在不同设备、屏幕尺寸和网络条件下自适应地显示。为了帮助理解如何克服这一挑战，我们可以构建一个思维导图，该思维导图从Java架构师的角度出发，涵盖了关键技术点和策略。突破动态化容器的天花板│├───概述│├───定义与重要性││└───动态化容器的意义及其对用户体验的影
  • 包管理工具 npm/yarn/pnpm对比，你选对了码 小姚爱吃辣 yarn
    在前端开发领域，包管理工具是开发者不可或缺的利器。它们不仅帮助我们管理依赖，还能提升项目的构建效率。目前，最常用的三大前端包管理工具分别是npm、Yarn和pnpm。本文将深入探讨这三种工具的优缺点，帮助你在项目中做出最合适的选择。一、npm图片1.什么是npm？npm（NodePackageManager）是随Node.js一起发布的包管理和分发工具。它是目前使用最广泛的JavaScript包管
  • HarmonyOS 开发实践——基于设置应用的应用权限、通知设置跳转 六号嘉宾 鸿蒙开发移动开发HarmonyOSharmonyos架构ui鸿蒙鸿蒙系统移动开发鸿蒙开发
    往期学习笔录：鸿蒙（HarmonyOS）北向开发知识点记录~鸿蒙（OpenHarmony）南向开发保姆级知识点汇总~鸿蒙应用开发与鸿蒙系统开发哪个更有前景？嵌入式开发适不适合做鸿蒙南向开发？看完这篇你就了解了~对于大前端开发来说，转鸿蒙开发究竟是福还是祸？鸿蒙岗位需求突增！移动端、PC端、IoT到底该怎么选？记录一场鸿蒙开发岗位面试经历~持续更新中……场景描述引导用户跳转到系统设置页进行权限，通知
  • HarmonyOS 开发实战 —— 模块化架构组件 （使用系统路由表+注解+hvigor插件 自动配置项目模块化） CTrup 鸿蒙开发HarmonyOS移动开发harmonyos架构uiArkUI组件化插件化hvigor
    往期笔录记录：鸿蒙（HarmonyOS）北向开发知识点记录~鸿蒙（OpenHarmony）南向开发保姆级知识点汇总~鸿蒙应用开发与鸿蒙系统开发哪个更有前景？嵌入式开发适不适合做鸿蒙南向开发？看完这篇你就了解了~对于大前端开发来说，转鸿蒙开发究竟是福还是祸？鸿蒙岗位需求突增！移动端、PC端、IoT到底该怎么选？记录一场鸿蒙开发岗位面试经历~持续更新中……@satis/oh-router简介@sati
  • HarmonyOS 开发实践——模块化架构组件 （使用系统路由表+注解+hvigor插件 自动配置项目模块化） 我是你叶 HarmonyOS鸿蒙开发移动开发harmonyos架构鸿蒙开发uiArkui移动开发组件化
    往期推文看点鸿蒙（HarmonyOS）北向开发知识点记录~鸿蒙（OpenHarmony）南向开发保姆级知识点汇总~鸿蒙应用开发与鸿蒙系统开发哪个更有前景？嵌入式开发适不适合做鸿蒙南向开发？看完这篇你就了解了~对于大前端开发来说，转鸿蒙开发究竟是福还是祸？鸿蒙岗位需求突增！移动端、PC端、IoT到底该怎么选？记录一场鸿蒙开发岗位面试经历~持续更新中……@satis/oh-router简介@satis
  • 【学术会议论文投稿】前端框架巅峰对决：React、Vue与Angular的全面解析与实战指南 小周不想卷 艾思科蓝学术会议投稿前端框架
    【JPCS独立出版】第三届能源与动力工程国际学术会议（EPE2024）_艾思科蓝_学术一站式服务平台更多学术会议请看：https://ais.cn/u/nuyAF3引言在快速发展的前端技术领域，选择合适的框架或库对于项目的成功至关重要。React、Vue和Angular作为当前最流行的三大前端框架/库，各自拥有独特的优势和适用场景。本文将通过深入的文字解析和代码讲解，帮助开发者理解这三者的差异，并
  • mongodb3.03开启认证 21jhf mongodb
    下载了最新mongodb3.03版本，当使用--auth 参数命令行开启mongodb用户认证时遇到很多问题，现总结如下： （百度上搜到的基本都是老版本的，看到db.addUser的就是，请忽略） Windows下我做了一个bat文件，用来启动mongodb，命令行如下： mongod --dbpath db\data --port 27017 --directoryperdb --logp
  • 【Spark103】Task not serializable bit1129 Serializable
    Task not serializable是Spark开发过程最令人头疼的问题之一，这里记录下出现这个问题的两个实例，一个是自己遇到的，另一个是stackoverflow上看到。等有时间了再仔细探究出现Task not serialiazable的各种原因以及出现问题后如何快速定位问题的所在，至少目前阶段碰到此类问题，没有什么章法 1.   package spark.exampl
  • 你所熟知的 LRU(最近最少使用) dalan_123 java
    关于LRU这个名词在很多地方或听说，或使用，接下来看下lru缓存回收的实现 1、大体的想法     a、查询出最近最晚使用的项     b、给最近的使用的项做标记 通过使用链表就可以完成这两个操作，关于最近最少使用的项只需要返回链表的尾部；标记最近使用的项，只需要将该项移除并放置到头部，那么难点就出现 你如何能够快速在链表定位对应的该项？ 这时候多
  • Javascript 跨域 周凡杨 JavaScriptjsonp跨域cross-domain
                                       
  • linux下安装apache服务器 g21121 apache
    安装apache 下载windows版本apache，下载地址：http://httpd.apache.org/download.cgi   1.windows下安装apache Windows下安装apache比较简单，注意选择路径和端口即可，这里就不再赘述了。 2.linux下安装apache： 下载之后上传到linux的相关目录，这里指定为/home/apach
  • FineReport的JS编辑框和URL地址栏语法简介 老A不折腾 finereportweb报表报表软件语法总结
      JS编辑框： 1.FineReport的js。 作为一款BS产品，browser端的JavaScript是必不可少的。 FineReport中的js是已经调用了finereport.js的。 大家知道，预览报表时，报表servlet会将cpt模板转为html，在这个html的head头部中会引入FineReport的js，这个finereport.js中包含了许多内置的fun
  • 根据STATUS信息对MySQL进行优化 墙头上一根草 status
    mysql  查看当前正在执行的操作，即正在执行的sql语句的方法为:      show processlist 命令   mysql> show global status;可以列出MySQL服务器运行各种状态值，我个人较喜欢的用法是show status like '查询值%';一、慢查询mysql> show variab
  • 我的spring学习笔记7-Spring的Bean配置文件给Bean定义别名 aijuans Spring 3
    本文介绍如何给Spring的Bean配置文件的Bean定义别名？ 原始的 <bean id="business" class="onlyfun.caterpillar.device.Business"> <property name="writer"> <ref b
  • 高性能mysql 之 性能剖析 annan211 性能mysqlmysql 性能剖析剖析
    1 定义性能优化 mysql服务器性能，此处定义为 响应时间。 在解释性能优化之前，先来消除一个误解，很多人认为，性能优化就是降低cpu的利用率或者减少对资源的使用。 这是一个陷阱。 资源时用来消耗并用来工作的，所以有时候消耗更多的资源能够加快查询速度，保持cpu忙绿，这是必要的。很多时候发现 编译进了新版本的InnoDB之后，cpu利用率上升的很厉害，这并不
  • 主外键和索引唯一性约束 百合不是茶 索引唯一性约束主外键约束联机删除
    目标;第一步;创建两张表 用户表和文章表         第二步;发表文章       1,建表; ---用户表 BlogUsers --userID唯一的 --userName --pwd --sex create
  • 线程的调度 bijian1013 java多线程thread线程的调度java多线程
    1.       Java提供一个线程调度程序来监控程序中启动后进入可运行状态的所有线程。线程调度程序按照线程的优先级决定应调度哪些线程来执行。   2.       多数线程的调度是抢占式的（即我想中断程序运行就中断，不需要和将被中断的程序协商） a) 
  • 查看日志常用命令 bijian1013 linux命令unix
    一.日志查找方法，可以用通配符查某台主机上的所有服务器grep "关键字" /wls/applogs/custom-*/error.log   二.查看日志常用命令1.grep '关键字' error.log：在error.log中搜索'关键字'2.grep -C10 '关键字' error.log：显示关键字前后10行记录3.grep '关键字' error.l
  • 【持久化框架MyBatis3一】MyBatis版HelloWorld bit1129 helloworld
    MyBatis这个系列的文章，主要参考《Java Persistence with MyBatis 3》。   样例数据 本文以MySQL数据库为例，建立一个STUDENTS表，插入两条数据，然后进行单表的增删改查     CREATE TABLE STUDENTS ( stud_id int(11) NOT NULL AUTO_INCREMENT,
  • 【Hadoop十五】Hadoop Counter bit1129 hadoop
       1. 只有Map任务的Map Reduce Job File System Counters FILE: Number of bytes read=3629530 FILE: Number of bytes written=98312 FILE: Number of read operations=0 FILE: Number of lar
  • 解决Tomcat数据连接池无法释放 ronin47 tomcat 连接池　优化
    近段时间，公司的检测中心报表系统(SMC)的开发人员时不时找到我，说用户老是出现无法登录的情况。前些日子因为手头上 有Jboss集群的测试工作，发现用户不能登录时，都是在Tomcat中将这个项目Reload一下就好了，不过只是治标而已，因为大概几个小时之后又会 再次出现无法登录的情况。 今天上午，开发人员小毛又找到我，要我协助将这个问题根治一下，拖太久用户难保不投诉。 简单分析了一
  • java-75-二叉树两结点的最低共同父结点 bylijinnan java
    import java.util.LinkedList; import java.util.List; import ljn.help.*; public class BTreeLowestParentOfTwoNodes { public static void main(String[] args) { /* * node data is stored in
  • 行业垂直搜索引擎网页抓取项目 carlwu LuceneNutchHeritrixSolr
    公司有一个搜索引擎项目，希望各路高人有空来帮忙指导，谢谢！ 这是详细需求： （1） 通过提供的网站地址(大概100-200个网站)，网页抓取程序能不断抓取网页和其它类型的文件（如Excel、PDF、Word、ppt及zip类型），并且程序能够根据事先提供的规则，过滤掉不相干的下载内容。 （2） 程序能够搜索这些抓取的内容，并能对这些抓取文件按照油田名进行分类，然后放到服务器不同的目录中。
  • [通讯与服务]在总带宽资源没有大幅增加之前,不适宜大幅度降低资费 comsci 资源
          降低通讯服务资费，就意味着有更多的用户进入，就意味着通讯服务提供商要接待和服务更多的用户，在总体运维成本没有由于技术升级而大幅下降的情况下，这种降低资费的行为将导致每个用户的平均带宽不断下降，而享受到的服务质量也在下降，这对用户和服务商都是不利的。。。。。。。。     &nbs
  • Java时区转换及时间格式 Cwind java
    本文介绍Java API 中 Date, Calendar, TimeZone和DateFormat的使用，以及不同时区时间相互转化的方法和原理。   问题描述： 向处于不同时区的服务器发请求时需要考虑时区转换的问题。譬如，服务器位于东八区（北京时间，GMT+8:00），而身处东四区的用户想要查询当天的销售记录。则需把东四区的“今天”这个时间范围转换为服务器所在时区的时间范围。
  • readonly,只读，不可用 dashuaifu jsjspdisablereadOnlyreadOnly
    readOnly 和 readonly 不同，在做js开发时一定要注意函数大小写和jsp黄线的警告！！！我就经历过这么一件事： 使用readOnly在某些浏览器或同一浏览器不同版本有的可以实现“只读”功能，有的就不行，而且函数readOnly有黄线警告！！！就这样被折磨了不短时间！！！（期间使用过disable函数，但是发现disable函数之后后台接收不到前台的的数据！！！）  
  • LABjs、RequireJS、SeaJS 介绍 dcj3sjt126com jsWeb
    LABjs 的核心是 LAB（Loading and Blocking）：Loading 指异步并行加载，Blocking 是指同步等待执行。LABjs 通过优雅的语法（script 和 wait）实现了这两大特性，核心价值是性能优化。LABjs 是一个文件加载器。RequireJS 和 SeaJS 则是模块加载器，倡导的是一种模块化开发理念，核心价值是让 JavaScript 的模块化开发变得更
  • [应用结构]入口脚本 dcj3sjt126com PHPyii2
    入口脚本 入口脚本是应用启动流程中的第一环，一个应用（不管是网页应用还是控制台应用）只有一个入口脚本。终端用户的请求通过入口脚本实例化应用并将将请求转发到应用。 Web 应用的入口脚本必须放在终端用户能够访问的目录下，通常命名为 index.php，也可以使用 Web 服务器能定位到的其他名称。 控制台应用的入口脚本一般在应用根目录下命名为 yii（后缀为.php），该文
  • haoop shell命令 eksliang hadoophadoop shell
    cat chgrp chmod chown copyFromLocal copyToLocal cp du dus expunge get getmerge ls lsr mkdir movefromLocal mv put rm rmr setrep stat tail test text
  • MultiStateView不同的状态下显示不同的界面 gundumw100 android
    只要将指定的view放在该控件里面，可以该view在不同的状态下显示不同的界面，这对ListView很有用，比如加载界面，空白界面，错误界面。而且这些见面由你指定布局，非常灵活。 PS：ListView虽然可以设置一个EmptyView，但使用起来不方便，不灵活，有点累赘。 <com.kennyc.view.MultiStateView xmlns:android=&qu
  • jQuery实现页面内锚点平滑跳转 ini JavaScripthtmljqueryhtml5css
    平时我们做导航滚动到内容都是通过锚点来做，刷的一下就直接跳到内容了，没有一丝的滚动效果，而且 url 链接最后会有“小尾巴”，就像#keleyi，今天我就介绍一款 jquery 做的滚动的特效，既可以设置滚动速度，又可以在 url 链接上没有“小尾巴”。   效果体验：http://keleyi.com/keleyi/phtml/jqtexiao/37.htmHTML文件代码： &
  • kafka offset迁移 kane_xie kafka
    在早前的kafka版本中（0.8.0），offset是被存储在zookeeper中的。   到当前版本（0.8.2）为止，kafka同时支持offset存储在zookeeper和offset manager（broker）中。   从官方的说明来看，未来offset的zookeeper存储将会被弃用。因此现有的基于kafka的项目如果今后计划保持更新的话，可以考虑在合适
  • android > 搭建 cordova 环境 mft8899 android
      1 , 安装 node.js        http://nodejs.org      node -v   查看版本   2, 安装 npm   可以先从  https://github.com/isaacs/npm/tags  下载 源码 解压到
  • java封装的比较器，比较是否全相同，获取不同字段名字 qifeifei
     非常实用的java比较器，贴上代码： import java.util.HashSet; import java.util.List; import java.util.Set; import net.sf.json.JSONArray; import net.sf.json.JSONObject; import net.sf.json.JsonConfig; i
  • 记录一些函数用法 .Aky. 位运算PHP数据库函数IP
    高手们照旧忽略。 想弄个全天朝IP段数据库，找了个今天最新更新的国内所有运营商IP段，copy到文件，用文件函数，字符串函数把玩下。分割出startIp和endIp这样格式写入.txt文件，直接用phpmyadmin导入.csv文件的形式导入。（生命在于折腾，也许你们觉得我傻X，直接下载人家弄好的导入不就可以，做自己的菜鸟，让别人去说吧） 当然用到了ip2long()函数把字符串转为整型数
  • sublime text 3 rust wudixiaotie Sublime Text
    1.sublime text 3 => install package => Rust 2.cd ~/.config/sublime-text-3/Packages 3.mkdir rust 4.git clone https://github.com/sp0/rust-style 5.cd rust-style 6.cargo build --release 7.ctrl
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他