I recently read the book "HTML Refactoring". I will make my own summary below so that everyone can learn and communicate together.
What is refactoring? Refactoring is a process of making small changes without changing the behavior of the program. It is a process in which the code is basically gradually improved. It usually requires the help of some automated tools. A good website requires us to improve the code day by day. Search engine optimization (seo) is one of the main drivers of website reconstruction. Search engines value text more than images; they value front-end text more than back-end text, and they value titles or meta tags more. The author hopes that SEO can be done well by replacing more text content such as pictures, flash, etc. I personally feel that after reading this book, it will be very helpful for SEO
Baidu Encyclopedia’s definition of refactoring is: Refactoring is to improve software by adjusting program code Quality and performance make the design pattern and architecture of the program more reasonable, and improve the scalability and maintainability of the software.
The following mind map is a general summary of the general content of the book:
Tools
The tools recommended in this book mainly include automated testing, but I think the ones actually used in the current development process will be more few. Here are some other excellent tools recommended:
1. YSlow
YSlow is a browser plug-in launched by Yahoo that can help you modify the pages of your website. Analyze and provide you with some optimization suggestions to improve website performance. Click me to view Yslow-23 rules
Firefox plug-in Chrome plug-in YSlow for Mobile/Bookmarklet Source code
2. PageSpeed
PageSpeed is also a browser plug-in, launched by Google, which can effectively optimize our Web website and help you easily optimize the website. Analyze performance bottlenecks and provide you with optimization suggestions.
Analyze your website online Install browser plug-in (Chrome, Firefox) Embed PageSpeed functionality in your application through Insights API
3.Other excellent tools
Spider Simulator: This tool can analyze your page and provide some optimization suggestions. Image SEO Tool: This tool can check the alt tags of images and provide some optimization suggestions. Request Inspector: Find out which resources and services need to be loaded in the page. Link Checker: Check internal, external and dead links in the page. HTTP header inspection: Display the HTTP response headers of the web page or resource. Social Checker: Check the social components in the page, such as Google, Facebook, Twitter, Linkedin and Pinterest. If modified checker: Checks whether the page accepts the If-Modified-Since HTTP header. Gzip checker: Check whether the page has been Gzip compressed. CSS delivery tool: Check the CSS files used in the page. Breadcrumb Tool: Provides breadcrumb navigation code based on the information you enter. CSS compression tool: used to compress CSS code.
Well-structured
What is well-structured? From a technical point of view: it means that the document should follow certain strict endings. For example, every start tag should have an end tag, the start and structure of elements should be within the same parent element, and every entity reference should be defined in advance. good. Although most websites have now adopted:
<!DOCTYPE html> //dtd
Copy after login
Using the html5 tag allows us to not be so standardized when writing html tag statements, but I think from the documentation In terms of rigor, standardization and readability, it is still very necessary to follow the XML standard. The so-called well-structured compliance standards:
1. All start tags should have a matching end tag.
2. Empty elements should use the tag syntax of empty elements.
-->
3. All attributes All must have a value
4. All attribute values need to be enclosed in quotation marks
5. All ampersands must be converted Meaning &
Embedded JavaScript will cause problems here. & is not escapable in Javascript. You can move the script to an external file where escaping is not necessary or put the script in a comment.
6. All less than signs < must be escaped as <
Embedded JavaScript will cause problems here. Javascript does not treat < as a less than sign. You can move the script to an external file where escaping is not necessary or put the script in a comment.
7.只有唯一的根元素
8.转义属性值中的引号
在属性值中把 ” 转义为" ，把 ’ 转义为' 。
9.所有未预定义的实体引用必须在DTD中声明
10.结束每一个实体引用，替换虚构的实体引用
XML要求实体引用以分号结尾。
11.将名称改为小写，所有元素的
12.把文本转化为UTF-8
Utf-8是一个标准的编码，可运作在所有浏览器上，被主流的文本编辑器个工具支持，支持所有Unicode字符。
内容
修正拼写错误，错别字 保证所有连接的可用性 移动页面（自动化检查连接） 重新组织URL的结构，对开发者、访问者和搜索引擎更透明，但要保证旧的URL能够继续工作 删除入口页面（用户体验优先） 隐藏电子邮件
可访问性
把图片转化为文本 作者说了三点
a、对于视力不好的用户可以通过感知来感知文本
b、可以加大搜索引擎的结果
c、可以提升网站性能，而且可以节省带宽成本及访问者的时间
作者还是那句话：HTML文档只有内容不应该有装饰
为表单输入框添加标签 对非隐藏的input,textarea,select等表单元素确保它们都有相应的标签
使用标准的字段名称 开启自动完成 为表单添加Tab索引 为每个表单添加Tab索引这样用户就可以通过tab键进行跳转了
<input tabindex="1" type="checkbox" />
Copy after login
有7个元素支持tabindex分别为：a area button input object select textarea
适当为较长的网页添加跳转 加大输入框 加入表格描述 加入lang属性
// en定义语言为英语// zh-CN定义语言为中文<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"><html xmlns="http://www.w3.org/1999/xhtml" lang="zh-CN" xml:lang="zh-CN">// 如果网页定义为XHTML1.1或者XML格式,那么可以使用xml:lang属性(因为xml:lang属性是在XML中确定语言信息的标准用法).// 如果网页使用HTML格式,那么应该同时使用xml:lang和lang属性.
Copy after login
布局
使用Css+Div替换表格布局 创建现代网页需要使用与CSS相分离的XHTML不要再使用表格型布局与font标签等表现性元素（//老生常谈）
使用Css定位替代框架 正确标记列表 替换占位图片 添加id属性
Web应用程序
POST与GET的正确使用 以下操作都应该通过POST操作
1) 定购商品
2) 签署法律文档
3) 从CMS中删除页面
4) 签署申述
5) 发送电子邮件
6) 向数据库插入新内容
7) 打印地图
8) 操控机器
以下操作都应该通过GET操作，因为这是安全的。且不必强制用户接受
1) 读取文档
2) 从CMS下载一份可编辑文档的副本
3) 读取电子邮件
4) 查看地图
5) 检查机器的当前状态
通过GET访问的URL可以链接、被爬虫抓取、收藏、预抓取，缓存。GET的形式的URL让用户可以使用后退键。总的来说，在这些情况下GET操作比POST操作对用户更友好。GET形式的URL对搜索引擎也更友好，可以提高搜索引擎排名。
启用 & 阻止缓存 启用缓存某些不常改变的资源（如网页icon）可以大大提高用户访问页面的速度，提升用户交互性能。
使用ETag
ETag：Etag是URL的Entity Tag，用于标示URL对象是否改变，区分不同语言和Session等等。具体内部含义是使服务器控制的，就像Cookie那样。
Use HTML to replace Flash
A simple summary, I hope you can gain something.
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
