- Vue3.0性能优化(v-memo指令)
Vue3.0v-memo指令性能优化Vue3.0的v-memo指令是一个强大的性能优化工具,尤其适用于渲染大量静态列表或复杂组件时。它通过缓存渲染结果来避免不必要的重新渲染,从而提升应用性能。基本用法v-memo接收一个依赖数组,只有当数组中的值发生变化时才会重新渲染:适用场景大型静态列表:当列表数据量大且不经常变化时{{product.name}}复杂组件嵌套:避免深层子组件的不必要更新条件渲染
- 深入解析React性能优化三剑客:React.memo、useMemo与useCallback
目录渲染机制基础React的渲染流程解析组件重渲染的根本原因性能优化的核心目标React.memo深度解析组件级缓存原理浅比较机制详解自定义比较函数实现useMemo核心技术值缓存机制剖析引用稳定性控制复杂计算场景实战useCallback终极指南函数缓存本质闭包陷阱解决方案事件处理最佳实践三者的黄金组合联合使用场景分析性能优化效果对比常见误区与反模式性能监控方法论ReactDevTools实战技
- 从 Vue 到 React:React.memo + useCallback 组合技
目录一、Vue与React的组件更新机制对比二、React.memo是什么?三、常见坑:为什么我用了React.memo还是会重新渲染?四、解决方案:useMemo/useCallback缓存引用五、Vue3中有类似的性能控制需求吗?六、组合优化小技巧总结七、不过话又说回来一、Vue与React的组件更新机制对比在Vue中,组件的更新依赖于响应式系统的依赖追踪:父组件更新时,Vue会判断data是
- 前端 React.js 项目的性能优化的成功案例分析
前端视界
前端艺匠馆前端react.js性能优化ai
前端React.js项目的性能优化的成功案例分析关键词:React.js性能优化、代码拆分与懒加载、虚拟列表与长列表优化、Webpack深度调优、Fiber架构实践、SSR与SSG落地、React.memo与useCallback最佳实践摘要:本文通过三个真实企业级React项目的性能优化案例,系统解析从性能瓶颈诊断到优化策略落地的完整流程。结合React核心原理(如Fiber架构、虚拟DOMdi
- 前端宝典之七:React性能优化实战精华篇
桃子叔叔
大厂进阶前端深度解析系列react.js前端javascript
本文主要讲解实战项目中React性能优化的方法,主要分为三个大的方面:减少不必要的组件更新、组件优化以及tree-shaking,共11个方法一、减少不必要组件更新以下是一些可以避免在React提交阶段进行不必要重新渲染的方法:1、使用React.memo(对于函数组件)和PureComponent(对于类组件)React.memo:React.memo是一个高阶组件,用于包装函数组件。它通过对组
- 南洋理工、新国立新作 MEMO:基于记忆引导的高保真数字人生成扩散模型
楠哥聊AI
计算机视觉数字人科研MEMOAIGCtalkingheadtalkingface
视频扩散模型的最新进展为现实音频驱动的视频生成开辟了新的潜力。然而,在生成的视频中实现无缝音频与唇部同步化、保持长期身份一致性以及产生自然、与音频对齐的表情仍然是一个重大的挑战。为了解决这些挑战,南洋理工、新加坡国立大学联合提出了MEMO:Memory-GuidedDiffusionforExpressiveTalkingVideoGeneration,这是一种端到端的音频驱动特性动画方法,用于生
- React Native (RN) 外包开发的性能优化
北京木奇移动
reactnative性能优化react.js
优化ReactNative(RN)应用性能是提高用户体验的关键,以下是常见的性能优化方法。1.减少渲染次数(1)避免不必要的渲染使用React.memo:避免无关组件因父组件的重渲染而更新。使用shouldComponentUpdate或React.PureComponent:优化类组件的渲染逻辑。优化状态更新:仅更新相关状态,避免状态更新导致整个组件树重新渲染。(2)虚拟化列表使用FlatLis
- 【前端】vue3性能优化方案
Fly-ping
Vue3前端性能优化
以下是Vue3性能优化的系统性方案,结合核心优化策略与实用技巧,覆盖渲染、响应式、加载、代码等多个维度:⚙️一、渲染优化精准控制渲染范围v-ifvsv-show:v-if:条件为假时销毁DOM,适合低频切换场景(如权限控制)v-show:仅切换CSS显示,适合高频切换(如标签页)v-once:静态内容使用此指令,避免重复渲染v-memo:缓存组件片段,依赖项不变时跳过渲染(适用于大型列表){{it
- React.memo 与 shouldComponentUpdate 的区别是什么?如何处理深层对象比较?
前端布洛芬
大白话前端八股react.jsjavascriptecmascript
大白话React.memo与shouldComponentUpdate的区别是什么?如何处理深层对象比较?前端小伙伴们,有没有被“组件性能优化”搞到头发掉?写个列表页,改个无关状态子组件就疯狂渲染;想用优化手段,又纠结用React.memo还是shouldComponentUpdate……今天咱们就用“快递检查”和“门卫大叔”的比喻,把这俩优化工具的区别讲得明明白白,再搞定深层对象比较的痛点!一、
- React中使用useMemo对计算结果进行缓存
开发者小天
react.js缓存前端
//引入React的useState、memo和useMemoAPIimport{useState,memo,useMemo}from'react';//使用memo包裹Header组件以优化渲染性能//memo会阻止组件在props不变时不必要的重新渲染constHeader=memo(functionHeader(){return(//Math.random()用于演示组件是否被重新渲染hel
- React中的React.memo、useMemo、useCallBack
九道湾的辣个男人
react.jsjavascript前端
React中的React.memo、useMemo、useCallBack首先我们需要了解React组件的渲染机制:React组件会在两种情况下发生重新渲染。第一种,当组件自身state发生变化的时候会重新渲染。第二种,当组件的父组件重新渲染时,会重新渲染。第一种情况下的渲染无可厚非,state都变了,组件自然就重新渲染了,但是第二种情况下的渲染有时候就不那么的必要。在实际开发的过程中,我们常常会
- React.memo和useMemo的区别是什么?
编程微刊(祈澈菇凉)
react.js前端前端框架
React.memo和useMemo是React中用于性能优化的两种工具,但它们的使用场景和功能却有所不同。以下是它们的主要区别:1.定义和用途React.memo定义:React.memo是一个高阶组件,用于优化函数组件。它通过对比组件的props,决定是否重新渲染该组件。用途:主要用于防止不必要的渲染,提升函数组件的性能。示例:constMyComponent=React.memo(({dat
- React.memo 和 useMemo
牧羊狼爱学习
reactreact.jsjavascript前端
现象React中,通常父组件的某个state发生改变,会引起父组件的重新渲染(和其他state的重新计算),从而会导致子组件的重新渲染(和其他非相关属性的重新计算)问题一:如何避免因为某个state变化,导致组件的中其他属性(state)的重新计算?方案:useMemo问题二:如何避免因为父组件的重新渲染,导致子组件中非相关属性的重新计算?方案:React.memo结论总结起来就一句话:React
- 前端面经-VUE3篇(一)--vue3基础知识- 插值表达式、ref、reactive
小杨升级打怪中
前端vue.jsjavascript
目录一、插值表达式1、插值表达式({{}})的本质与作用:2、与Vue响应式系统关系:二、指令1、什么是Vue指令?2、指令的分类1、内置指令①内容绑定:v-text和v-html②属性绑定:v-bind③事件绑定:v-on④条件渲染:v-if、v-else-if、v-else⑤列表渲染:v-for⑥双向绑定:v-model⑦性能优化:v-once、v-memo⑧其他指令v-pre:跳过模板编译阶
- 温故知新 -- react 官方文档总结2
ALKEN ABBY
react日积月累(学习深度)开发中的实用方法和函数react.jsjavascript前端
温故知新–react官方文档总结2温故知新,确实书读百遍,其义自现文章目录温故知新--react官方文档总结2React`React.Component``React.PureComponent``React.memo`React.createElement`cloneElement()``isValidElement()``React.Children``React.Children.map``
- 不再踩坑!React.memo正确用法及性能优化实战
AI逐月
react.jsjavascript前端
不再踩坑!React.memo正确用法及性能优化实战嘿,各位React开发小伙伴们!今天我要和大家聊聊那个被误解又超级实用的React性能优化"神器"——React.memo。它就像一把双刃剑,用得好可以让你的应用丝滑流畅,用不好却会让你一脸懵逼地排查性能问题。我前几天就在项目中遇到了一个因为错误使用memo导致组件不更新的"灵异事件",今天就来分享一下这个血泪教训~React.memo是啥?为啥
- Flume+kafka+SparkStreaming整合
逆水行舟如何
大数据架构kafka常用命令flume进行数据收集的编写实时架构
一、需求模拟一个流式处理场景:我再说话,我编写好的一个sparkstreaming做词频统计1.模拟说话:nc-lk3399flumesource:avro(qyl01:3399)channel:memorysink:kafkasink模拟实时的日志生成:echoaabbcc>>/home/qyl/logs/flume.logflumesource:exec(tail-f)channel:memo
- 允许你实时可视化你的状态和
程序员
Redux:使用ReduxDevTools调试你的状态ReduxDevTools浏览器扩展是调试Redux项目的有用工具。它允许你实时可视化你的状态和操作,在刷新时保持状态持久性等等。要了解它的用途,请观看这个精彩的视频。六.React代码优化使用memo防止不必要的重新渲染当处理渲染成本高昂且父组件频繁更新的组件时,将它们包装在memo中可能会改变渲染规则。memo确保组件仅在其props发生变
- Vue模版语法(初学Vue之v-指令语法)
码农白衣
htmlVue前端知识vue.js前端javascript
目录一、介绍1.概念2.常见指令语法及用法1.v-bind:2.v-model:3.v-if/v-else-if/v-else:4.v-for:5.v-on:6.v-show:7.v-pre:8.v-cloak:二、使用1.Mustache插值语法2.v-once指令使用3.v-text指令使用4.v-html指令使用5.v-pre指令使用6.v-cloak指令使用7.v-memo指令使用8.v-
- react-useMemo/useCallback/memo使用
优价实习
React学习手册ReactuseMemouseCallback性能优化组件渲染
react提供useMemo/useCallback/memo方法,提高页面刷新效率。若组件依赖的属性没有发送变化,组件可以不刷新。以下提供两个场景的具体使用单组件内使用使用语法importReact,{useMemo}from'react'useMemo(()=>{},[])1.useMemo第一个参数是函数,第二个参数是数组2.如果第二个参数不传递,与useEffect类似,意味着每次都会执行
- React-memo (useMemo, useCallback)
感谢上Di_123
react前端面试题react.js前端javascript
在react中,当我们setState之后,若值发生变化,则会重新render当前组件以及其子组件(默认情况下),在必要的时候,我可使用memo(class组件则对应shouldComponentUpdate、PureComponent)进行优化,来减少无效渲染。memo是一个高阶组件,接受一个组件作为参数,并返回一个原组件为基础的新组件,而在memo内部,则会使用Object.is来遍历对比新旧
- UseMemo、UseCallback、React.memo
chaozhouchao
react.js前端javascript
前置问题:React中的函数式组件什么时候会重新渲染? 答:组件中的状态改变(包含Context)、父组件重新渲染导致子组件的重新渲染。 组件多次重新渲染会导致性能的下降。UseMemo、UseCallback、React.memo都利用缓存机制来提高了组件的性能。 UseMemo类似于Vue中的计算属性,将组件中计算出的值进行缓存; UseCallback将组件中的函数进行缓存;
- useMemo、React.memo、useCallback(React)
浪漫胡渣男孩
react.jsjavascript前端
一、useMemo基本用法缓存数据,模拟Vue中的计算属性。importReact,{useMemo,useState}from'react';exportdefaultfunctionUseMemo(){const[count,setCount]=useState(0);//缓存sum的值constsum=useMemo(()=>{returncount+count;},[count])retu
- React 开发(十四):性能优化 - 使用 React.memo 和 useMemo
全栈探索者chen
reactreact.js性能优化javascript开发语言程序人生前端memo
React开发(十四):性能优化-使用React.memo和useMemo在React开发中,随着应用的规模和复杂度的增加,组件的渲染性能可能会受到影响,导致用户体验下降。为了提升性能,React提供了多种优化手段,其中React.memo和useMemo是非常常用且有效的工具。在本篇文章中,我们将深入探讨这两者的工作原理、使用场景,以及如何通过它们提升React应用的性能。目录React.mem
- 【前端】【React】性能优化三件套useCallback,useMemo,React.memo
患得患失949
React从零学习面试考题专栏(前后端)前端react.js性能优化
一、总览:性能优化三件套useCallback(fn,deps):缓存函数,避免每次渲染都新建函数。useMemo(fn,deps):缓存值(计算结果),避免重复执行计算。React.memo(Component):缓存组件的渲染结果,避免props没变却重复渲染。三者搭配使用,在中大型组件中可显著优化性能,减少重复渲染。二、逐个详解(一)useCallback——缓存函数引用(1)每次组件渲染时
- React.memo()和 useMemo()的用法是什么,有哪些区别
阿丽塔~
react.js前端javascript
React.memo()和React.useMemo()是React中用于优化性能的两个工具,但它们的用途和实现方式有所不同。以下分别介绍它们的用法和区别。1.React.memo()用法React.memo()是一个高阶组件(HOC),由于react组件默认的渲染机制:只要父组件渲染子组件就会重新渲染于是用于优化函数组件的渲染性能。它通过缓存组件的渲染结果,避免不必要的重新渲染。作用允许组件在P
- python二维数组单个元素赋值
lalapanda
pythonlist
当你用如下方法创建一个python二维数组时memo=[[1]*3]*4于是你得到memo=[[1,1,1],[
- React性能优化的8种方式
Mr.BoBo.
前端#Reactreact.js性能优化前端
提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档文章目录前言1、Reac.memo缓存组件2、使用useMemo缓存大量的计算3、避免使用内联对象4、避免使用匿名函数5、延迟加载不是立即需要的组件6、调整CSS而不是强制组件加载和卸载7、使用React.Fragment避免添加额外的DOM8、使用React.PureComponent,shouldComponentUpdate9、
- React性能优化的深度解析:React.memo和useMemo的真相与误区
今天也想MK代码
持续学习持续总结react.js性能优化前端
引言在React应用开发中,性能优化始终是开发者关注的重点。随着应用规模的扩大,组件渲染效率成为影响用户体验的关键因素。React.memo和useMemo是React提供的两个常用性能优化API,但它们常常被误解和滥用。本文将深入剖析这两个API的工作原理、适用场景,并通过实际案例分析它们的优缺点,帮助开发者做出明智的性能优化决策。技术原理React.memo与useMemo的本质区别React
- JVM中对象的创建
重生之我在成电转码
java八股jvm算法
在Java中,JVM(JavaVirtualMachine)负责对象的创建和管理。对象的创建过程涉及多个步骤,从类加载、内存分配,到对象的初始化和构造方法的调用。了解JVM如何创建对象有助于更好地掌握Java的内存管理和性能优化。JVM中对象创建的过程当我们使用new关键字创建一个对象时,JVM会执行一系列操作。这些操作大致可以分为以下几个步骤:类加载(ClassLoading)内存分配(Memo
- java杨辉三角
3213213333332132
java基础
package com.algorithm;
/**
* @Description 杨辉三角
* @author FuJianyong
* 2015-1-22上午10:10:59
*/
public class YangHui {
public static void main(String[] args) {
//初始化二维数组长度
int[][] y
- 《大话重构》之大布局的辛酸历史
白糖_
重构
《大话重构》中提到“大布局你伤不起”,如果企图重构一个陈旧的大型系统是有非常大的风险,重构不是想象中那么简单。我目前所在公司正好对产品做了一次“大布局重构”,下面我就分享这个“大布局”项目经验给大家。
背景
公司专注于企业级管理产品软件,企业有大中小之分,在2000年初公司用JSP/Servlet开发了一套针对中
- 电驴链接在线视频播放源码
dubinwei
源码电驴播放器视频ed2k
本项目是个搜索电驴(ed2k)链接的应用,借助于磁力视频播放器(官网:
http://loveandroid.duapp.com/ 开放平台),可以实现在线播放视频,也可以用迅雷或者其他下载工具下载。
项目源码:
http://git.oschina.net/svo/Emule,动态更新。也可从附件中下载。
项目源码依赖于两个库项目,库项目一链接:
http://git.oschina.
- Javascript中函数的toString()方法
周凡杨
JavaScriptjstoStringfunctionobject
简述
The toString() method returns a string representing the source code of the function.
简译之,Javascript的toString()方法返回一个代表函数源代码的字符串。
句法
function.
- struts处理自定义异常
g21121
struts
很多时候我们会用到自定义异常来表示特定的错误情况,自定义异常比较简单,只要分清是运行时异常还是非运行时异常即可,运行时异常不需要捕获,继承自RuntimeException,是由容器自己抛出,例如空指针异常。
非运行时异常继承自Exception,在抛出后需要捕获,例如文件未找到异常。
此处我们用的是非运行时异常,首先定义一个异常LoginException:
/**
* 类描述:登录相
- Linux中find常见用法示例
510888780
linux
Linux中find常见用法示例
·find path -option [ -print ] [ -exec -ok command ] {} \;
find命令的参数;
- SpringMVC的各种参数绑定方式
Harry642
springMVC绑定表单
1. 基本数据类型(以int为例,其他类似):
Controller代码:
@RequestMapping("saysth.do")
public void test(int count) {
}
表单代码:
<form action="saysth.do" method="post&q
- Java 获取Oracle ROWID
aijuans
javaoracle
A ROWID is an identification tag unique for each row of an Oracle Database table. The ROWID can be thought of as a virtual column, containing the ID for each row.
The oracle.sql.ROWID class i
- java获取方法的参数名
antlove
javajdkparametermethodreflect
reflect.ClassInformationUtil.java
package reflect;
import javassist.ClassPool;
import javassist.CtClass;
import javassist.CtMethod;
import javassist.Modifier;
import javassist.bytecode.CodeAtt
- JAVA正则表达式匹配 查找 替换 提取操作
百合不是茶
java正则表达式替换提取查找
正则表达式的查找;主要是用到String类中的split();
String str;
str.split();方法中传入按照什么规则截取,返回一个String数组
常见的截取规则:
str.split("\\.")按照.来截取
str.
- Java中equals()与hashCode()方法详解
bijian1013
javasetequals()hashCode()
一.equals()方法详解
equals()方法在object类中定义如下:
public boolean equals(Object obj) {
return (this == obj);
}
很明显是对两个对象的地址值进行的比较(即比较引用是否相同)。但是我们知道,String 、Math、I
- 精通Oracle10编程SQL(4)使用SQL语句
bijian1013
oracle数据库plsql
--工资级别表
create table SALGRADE
(
GRADE NUMBER(10),
LOSAL NUMBER(10,2),
HISAL NUMBER(10,2)
)
insert into SALGRADE values(1,0,100);
insert into SALGRADE values(2,100,200);
inser
- 【Nginx二】Nginx作为静态文件HTTP服务器
bit1129
HTTP服务器
Nginx作为静态文件HTTP服务器
在本地系统中创建/data/www目录,存放html文件(包括index.html)
创建/data/images目录,存放imags图片
在主配置文件中添加http指令
http {
server {
listen 80;
server_name
- kafka获得最新partition offset
blackproof
kafkapartitionoffset最新
kafka获得partition下标,需要用到kafka的simpleconsumer
import java.util.ArrayList;
import java.util.Collections;
import java.util.Date;
import java.util.HashMap;
import java.util.List;
import java.
- centos 7安装docker两种方式
ronin47
第一种是采用yum 方式
yum install -y docker
 
- java-60-在O(1)时间删除链表结点
bylijinnan
java
public class DeleteNode_O1_Time {
/**
* Q 60 在O(1)时间删除链表结点
* 给定链表的头指针和一个结点指针(!!),在O(1)时间删除该结点
*
* Assume the list is:
* head->...->nodeToDelete->mNode->nNode->..
- nginx利用proxy_cache来缓存文件
cfyme
cache
user zhangy users;
worker_processes 10;
error_log /var/vlogs/nginx_error.log crit;
pid /var/vlogs/nginx.pid;
#Specifies the value for ma
- [JWFD开源工作流]JWFD嵌入式语法分析器负号的使用问题
comsci
嵌入式
假如我们需要用JWFD的语法分析模块定义一个带负号的方程式,直接在方程式之前添加负号是不正确的,而必须这样做:
string str01 = "a=3.14;b=2.71;c=0;c-((a*a)+(b*b))"
定义一个0整数c,然后用这个整数c去
- 如何集成支付宝官方文档
dai_lm
android
官方文档下载地址
https://b.alipay.com/order/productDetail.htm?productId=2012120700377310&tabId=4#ps-tabinfo-hash
集成的必要条件
1. 需要有自己的Server接收支付宝的消息
2. 需要先制作app,然后提交支付宝审核,通过后才能集成
调试的时候估计会真的扣款,请注意
- 应该在什么时候使用Hadoop
datamachine
hadoop
原帖地址:http://blog.chinaunix.net/uid-301743-id-3925358.html
存档,某些观点与我不谋而合,过度技术化不可取,且hadoop并非万能。
--------------------------------------------万能的分割线--------------------------------
有人问我,“你在大数据和Hado
- 在GridView中对于有外键的字段使用关联模型进行搜索和排序
dcj3sjt126com
yii
在GridView中使用关联模型进行搜索和排序
首先我们有两个模型它们直接有关联:
class Author extends CActiveRecord {
...
}
class Post extends CActiveRecord {
...
function relations() {
return array(
'
- 使用NSString 的格式化大全
dcj3sjt126com
Objective-C
格式定义The format specifiers supported by the NSString formatting methods and CFString formatting functions follow the IEEE printf specification; the specifiers are summarized in Table 1. Note that you c
- 使用activeX插件对象object滚动有重影
蕃薯耀
activeX插件滚动有重影
使用activeX插件对象object滚动有重影 <object style="width:0;" id="abc" classid="CLSID:D3E3970F-2927-9680-BBB4-5D0889909DF6" codebase="activex/OAX339.CAB#
- SpringMVC4零配置
hanqunfeng
springmvc4
基于Servlet3.0规范和SpringMVC4注解式配置方式,实现零xml配置,弄了个小demo,供交流讨论。
项目说明如下:
1.db.sql是项目中用到的表,数据库使用的是oracle11g
2.该项目使用mvn进行管理,私服为自搭建nexus,项目只用到一个第三方 jar,就是oracle的驱动;
3.默认项目为零配置启动,如果需要更改启动方式,请
- 《开源框架那点事儿16》:缓存相关代码的演变
j2eetop
开源框架
问题引入
上次我参与某个大型项目的优化工作,由于系统要求有比较高的TPS,因此就免不了要使用缓冲。
该项目中用的缓冲比较多,有MemCache,有Redis,有的还需要提供二级缓冲,也就是说应用服务器这层也可以设置一些缓冲。
当然去看相关实现代代码的时候,大致是下面的样子。
[java]
view plain
copy
print
?
public vo
- AngularJS浅析
kvhur
JavaScript
概念
AngularJS is a structural framework for dynamic web apps.
了解更多详情请见原文链接:http://www.gbtags.com/gb/share/5726.htm
Directive
扩展html,给html添加声明语句,以便实现自己的需求。对于页面中html元素以ng为前缀的属性名称,ng是angular的命名空间
- 架构师之jdk的bug排查(一)---------------split的点号陷阱
nannan408
split
1.前言.
jdk1.6的lang包的split方法是有bug的,它不能有效识别A.b.c这种类型,导致截取长度始终是0.而对于其他字符,则无此问题.不知道官方有没有修复这个bug.
2.代码
String[] paths = "object.object2.prop11".split("'");
System.ou
- 如何对10亿数据量级的mongoDB作高效的全表扫描
quentinXXZ
mongodb
本文链接:
http://quentinXXZ.iteye.com/blog/2149440
一、正常情况下,不应该有这种需求
首先,大家应该有个概念,标题中的这个问题,在大多情况下是一个伪命题,不应该被提出来。要知道,对于一般较大数据量的数据库,全表查询,这种操作一般情况下是不应该出现的,在做正常查询的时候,如果是范围查询,你至少应该要加上limit。
说一下,
- C语言算法之水仙花数
qiufeihu
c算法
/**
* 水仙花数
*/
#include <stdio.h>
#define N 10
int main()
{
int x,y,z;
for(x=1;x<=N;x++)
for(y=0;y<=N;y++)
for(z=0;z<=N;z++)
if(x*100+y*10+z == x*x*x
- JSP指令
wyzuomumu
jsp
jsp指令的一般语法格式: <%@ 指令名 属性 =”值 ” %>
常用的三种指令: page,include,taglib
page指令语法形式: <%@ page 属性 1=”值 1” 属性 2=”值 2”%>
include指令语法形式: <%@include file=”relative url”%> (jsp可以通过 include