HTML服务器控件最大的优点是轻量、高效，能保留原生HTML的纯粹性，在ASP.NET里用起来又稳又快。
也许你刚接触ASP.NET时，会被一堆复杂的Web服务器控件搞得头晕，其实HTML服务器控件反而是很多老开发员偏爱的东西，它不搞那些花哨的封装,性能和可控性都是实打实的。
HTML服务器控件有哪些优点？先从性能说起
聊优点，第一件事就是性能，Web服务器控件每次回发都要处理ViewState，数据量一大，页面体积就涨，HTML服务器控件默认不启用ViewState,页面传输量明显小。
- 没有ViewState开销：HTML服务器控件的状态完全由页面的HTML本身维持，服务端不额外保存视图状态数据，对于高并发场景,少几KB传输量都有意义。
- 服务端处理链路短：它不经过复杂的状态管理机制，回发时直接通过PostBack或表单提交读取值,处理速度更快。
- 渲染流程更简单：Web服务器控件会生成一堆辅助标记，HTML服务器控件只把原有标签原样输出，你写什么客户端就收到什么,没有额外包装。
行业共识认为，在页面性能敏感的项目里,减少服务端控件层次比优化数据库查询更直接。
免去ViewState，页面体积更小
Web服务器控件会往页面里塞一个隐藏的__VIEWSTATE可能很大，HTML服务器控件根本不参与这套机制，比如做一个几十行的表格，用Web控件可能多出几十KB隐藏字段,用HTML服务器控件就干干净净。
服务端处理链路短
HTML服务器控件在服务器端只是一个普通的控件实例，没有生命周期里那些繁琐的事件绑定和状态恢复步骤，你在Page_Load里直接设置txtName.Value或者读取lblMsg.InnerText,一步到位。
前端控制力更强
HTML服务器控件不会改写你写的标签名和属性结构，这意味着CSS选择器、JavaScript的getElementById、querySelector都能按预期工作，对搜索引擎也友好，因为没有多余嵌套标签,抓取更顺畅。
HTML服务器控件和Web服务器控件区别在哪？
这是很多人纠结的问题，简单说，HTML服务器控件更接近原生HTML,Web服务器控件更像一个封装好的组件。
- 属性命名不同：HTML服务器控件用
Value
、
InnerText、Style等，和HTML属性对应；Web服务器控件用Text、ForeColor、CssClass等,需要额外映射。 - 事件模型不同：HTML服务器控件支持
ServerClick、ServerChange等简单事件，Web服务器控件有完整的事件机制,能自动处理回发数据。 - 状态管理不同：Web服务器控件默认启用ViewState,HTML服务器控件默认关闭。
| 对比维度 | HTML服务器控件 | Web服务器控件 |
|---|---|---|
| 状态管理 | 不默认保存 | 默认ViewState |
| 标签输出 | 原样输出 | 附加额外标记 |
| 事件模型 | ServerClick等 | TextChanged等 |
| 学习成本 | 低 | 中 |
| 适用场景 | 高性能页面 | 复杂交互表单 |
属性映射与事件模型差异
举个例子,一个输入框：
<input type="text" id="name" runat="server" />
在后台代码里，你直接用name.Value取值，写起来和操作普通HTML元素一样，换成Web服务器控件，就是TextBox1.Text，前者少一层转换,出错概率也低。
事件模型上，HTML服务器控件只有onclick对应的ServerClick，Web服务器控件则有TextChanged等更细粒度的事件，如果你的页面不需要那些复杂事件,用HTML服务器控件省心。
什么时候选HTML服务器控件更划算？
具体场景里,以下情况选HTML服务器控件更划算：
- 页面大部分是静态展示内容,只偶尔需要读取用户输入。
- 需要精确控制HTML结构,比如做响应式布局或对接前端框架。
- 项目里有大量自带CSS类名的HTML标签,不想改来改去。
- 做自定义控件或者Ajax局部刷新,不想被ViewState干扰。
反过来，如果要做大量表单验证、GridView数据绑定、复杂的服务器端交互,Web服务器控件确实开发效率更高。
状态管理机制对项目的影响
Web服务器控件的ViewState在复杂页面里会显著拖慢性能，HTML服务器控件虽然把状态维护责任交还给了开发者，但在很多场景下这反而是好事，你可以用
HiddenField自行保存关键信息,比隐藏字段膨胀可控得多。
HTML服务器控件在ASP.NET里的实际用法
前面说的都是概念，具体操作也不难，HTML服务器控件其实就是给普通HTML标签加上runat="server"属性，和id,标签就变成了服务器能识别的对象。
基础写法：给标签加runat=”server”
<span id="status" runat="server"></span>
<input type="text" id="keyword" runat="server" />
<select id="city" runat="server">
<option value="beijing">北京</option>
<option value="shanghai">上海</option>
</select>
在后台的Page_Load里,你可以直接设置或读取：
status.InnerText = "加载完成"; string kw = keyword.Value; string selectedCity = city.Value;
常见操作路径：属性、取值、事件
- 设置样式：
control.Style["display"] = "none"; - 操作class：
control.Attributes["class"] = "active"; - 触发事件：在标签上写
onserverclick="Btn_Click",后台写对应方法。
事件写法示例：
<button id="submitBtn" runat="server" onserverclick="SubmitBtn_Click">提交</button>
后台：
protected void SubmitBtn_Click(object sender, EventArgs e)
{
// 业务处理
}
维护回发状态的小技巧
因为HTML服务器控件不维护ViewState，输入框的回发值需要通过代码重新赋值,常见的做法是把关键值放在隐藏字段里：
<input type="hidden" id="hdnUserId" runat="server" />
后台设置hdnUserId.Value = "12345"，下次回发时再读取，这个套路在老项目里非常常见,也容易排查问题。
HTML服务器控件适合哪些项目？聊聊适用场景
不是所有项目都适合用HTML服务器控件,但在以下项目中它很有优势。
老项目维护与升级
一些维护多年的ASP.NET项目，尤其是当时为了兼容前端页面使用了大量HTML服务器控件，新接手的人一看就懂，不用去查控件属性，想改成前后端分离,也容易剥离。
高性能前端页面
在需要快速响应的业务页面里，比如订单页、报表页，减少服务端控件能带来更快的回发速度，配合Ajax，只刷新局部数据,体验更好。
需要精确控制DOM的局部组件
比如富文本输入、动态表格、图表容器，这些场景往往需要直接把服务端数据塞到HTML里,HTML服务器控件提供了一条最直接的通道。
与前端框架协作
如果项目里用了jQuery、Vue或者React，服务端控件容易干架，但HTML服务器控件因为不改变命名规则，反而能友好共存，你可以在前端脚本里用document.getElementById直接操作,服务端照样拿得到值。
HTML服务器控件有哪些常见坑？顺便说说
没有完美的技术,HTML服务器控件也有弱点。
- 它不自动维护状态，回发后输入框的值需要程序逻辑处理,或者依赖浏览器缓存。
- 它的事件机制很简单，焦点样式、验证控件等高级功能需要自己写。
- 在复杂的视图逻辑里,代码量可能比Web服务器控件多。
业内专家指出，选择控件类型要基于页面实际交互复杂度,而不是赶时髦。
HTML服务器控件在性能、可控性、学习成本上都占优，特别适合追求页面简洁和高性能的ASP.NET场景，弄懂它和Web服务器控件的差别，按需选用,就能写出更利落的服务端代码。
Q&A：HTML服务器控件常见疑问
HTML服务器控件和Web服务器控件哪个更轻量？
HTML服务器控件更轻量，它不生成多余标记，不维护ViewState，服务端处理链路短,在页面体积和回发速度上都有优势。
HTML服务器控件的事件怎么写？
在标签上加runat="server"和onserverclick事件，后台对应方法签名是protected void 方法名(object sender, EventArgs e)，取值用控件名.Value或.InnerText。
HTML服务器控件适合做复杂表单吗？
如果表单校验逻辑简单，适合；如果涉及大量联动、多字段验证，Web服务器控件自带验证组件能省不少事，混合使用也是常见的做法，页面主体用HTML服务器控件,局部复杂交互用Web服务器控件。
首发原创文章，作者：王坚，如若转载，请注明出处：https://idctop.com/html%e6%9c%8d%e5%8a%a1%e5%99%a8%e6%8e%a7%e4%bb%b6%e5%88%b0%e5%ba%95%e6%9c%89%e5%93%aa%e4%ba%9b%e4%bc%98%e7%82%b9%ef%bc%8c%e5%80%bc%e5%be%97%e5%ad%a6%e4%b9%a0%e5%90%97%ef%bc%9f/
