清理垃圾代码及 HTML 标签转换，优化页面体积与布局

hwyzw · 发表于 2024-11-17 07:01:21

1.清理垃圾代码

清理垃圾代码意味着从页面中删除多余的代码。能够删除80%的冗余代码。

垃圾代码主要是指删除后不会对页面产生任何影响的不必要的代码。最常见的垃圾代码。空格空格字符是网页上最常见的垃圾代码。

但它不是指标签，而是指在代码编辑环境中按空格生成的符号。也就是说，每个空格相当于一个字符。一页。空白占页面大小的 15%。 100K 页中，15K 是空格字符。空格字符最常出现在代码的开头和结尾。还有空行。这些都是 easy 生成垃圾代码的地方。消除这种垃圾代码的方法是选中该代码，按shift+tab左对齐。

2.HTML标签

A：HTML标签转换

HTML标签的转换主要是指用短标签来代替网页中具有相同效果的长标签。例如，它们都将字体设为粗体，但多了 5 个字符。假设页面上有数百个粗体标签。

会产生很多冗余代码。

解决办法是：制作html页面时。优化要使用的标签的选择。

B：标题标签

网站标题标题设置

关键子设置，考虑密度

站点描述叙述设置，考虑密度

C：表格、表格等容器形式的标签

当浏览器编译器遇到标签时，它开始寻找它的结束标签。直到匹配，才可以显示其内容。因此，当table、ur等容器形式的嵌套标签较多时，打开页面会特别慢。，这降低了用户体验。

解决方案：编写HTML时：尽量让各个容器独立。当假设嵌套时，一定要使其清晰简单。

D: 图片 ait 标签

必须写alt

E：合理=“”

合理且不频繁的使用“”可以在一定程度上给网站带来迂回的流量和点击。同时。在细节中使用“”可以增强网站的整体用户体验。

3.CSS优化

A：CSS的调用方式有3种

1、页面之间直接编写css样式。假设内容较少，不会有太大影响。否则会大大增加页面的大小。在高层也占据着重要的地位。

2.直接在html标签上定义css样式。向页面添加代码量。

3、通过这三种方式引用外部css文件。最有利于SEO优化的是3，就是引用css文件

B：使用重置但不使用全局重置

不同浏览器元素的默认属性是不同的。使用 Reset 可以重置浏览器元素的一些默认属性。以实现浏览器兼容性。

但需要注意的是，请不要使用全局 Reset，*{:0;:0;} 这不仅是因为它是一种缓慢且低效的方法，而且还会导致一些不必要的元素重置其边距和内边距。边距。

 <pre><code class="language-css">/** 清除内外边距 **/
body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, /* structural elements 结构元素 */ dl, dt, dd, ul, ol, li, pre,form, fieldset, legend, button, input,

textarea, th, td, img{ border:medium none; margin: 0; padding: 0; }
/** 设置默认字体 **/
body,button, input, select, textarea { font: 12px ‘宋体’; }
h1, h2, h3, h4, h5, h6 { font-size: 100%; }
em{font-style:normal;}
/** 重置列表元素 **/
ul, ol { list-style: none; }
/** 重置超链接元素 **/
a { text-decoration: none; color:#333;}
a:hover { text-decoration: underline; color:#F40; }
/** 重置图片元素 **/
img{ border:0px;}
/** 重置表格元素 **/
table { border-collapse: collapse; border-spacing: 0; }
</code></pre>
C：良好的命名习惯

毫无疑问是混乱或无语义命名的代码。任何人看到它都会发疯。

例如，我的名字是 Wiky。问题是，如果需要将原来的红色字体全部改为蓝色，那么样式就会变成red{color:bule;}。这样的命名会很混乱。如果需要将同名侧边栏改为右侧侧边栏，会非常麻烦。

因此，请不要使用元素的特征、颜色、位置、大小等来命名类或id。您可以选择一个有意义的名称，例如#{…}。 .{…}。 .{…} 这样，无论你如何改变定义这些类或id的样式。它不影响其与 HTML 元素的连接。

另一种情况。有些固定样式定义后就不会再改变。那么命名时就不用担心刚才提到的情况了，比如：

.{float:left;-right:20px;}.{float:right;text-align:right;-left:20px;}.clear{clear:both;text-:-;}

 <pre><code class="language-css">.alignleft{float:left;margin-right:20px;}
.alignright{float:right;text-align:right;margin-left:20px;}
.clear{clear:both;text-indent:-9999px;}</code></pre>
如果需要将这段文字从原来的左对齐改为右对齐，那么只需要更改即可。

D：代码缩写CSS代码缩写可以提高编写代码的速度。简化您的代码。

CSS 中有许多属性可以缩写。包括，。。字体和颜色值等，假设您学习代码缩写。可以写成代码：

li{ 字体:1.2em/1.,,sans-serif;:5px0; }

 <pre><code class="language-css">li{ font: 1.2em/1.4em Arial, Helvetica, sans-serif; padding:5px 0 10px 5px; }</code></pre>
E：使用CSS继承假设页面上父元素的多个子元素使用相同的样式。最好在其父元素上定义相同的样式。让他们继承这些CSS样式。

这样你就可以很好地维护你的代码。它还可以减少代码量。

所以最初这段代码，

# li{字体-:,衬线; }# p{ 字体-:, 衬线; }# h1{字体-:,衬线; }

 <pre><code class="language-css">#container li{ font-family:Georgia, serif; }
#container p{ font-family:Georgia, serif; }
#container h1{font-family:Georgia, serif; }</code></pre>
可以写成：

#{字体-:,衬线; }

 <pre><code class="language-css">#container{font-family:Georgia,serif; }</code></pre>
F：使用多重选择器

您可以将多个 CSS 选择器合并为一个。假设他们有共同的风格。这样做不仅可以保持代码简洁，还可以节省时间和空间。

例如，h1, h2, h3{ font-:Arial, , sans-serif;字体-:; }

G：正确的代码凝视

代码凝视可以让别人更容易理解你的代码，合理组织的代码凝视可以让结构更加清晰。

H：使用外部样式表

这个原则始终是一个非常好的设计实践。不仅更容易维护和更改，更重要的是，使用外部文件可以提高页面速度。因为CSS文件可以在浏览器中生成缓存。每次请求时，HTML 文档中内置的 CSS 都会与 HTML 文档一起再次下载。

I：避免使用 CSS 表达式

表达式的问题在于它们的计算频率比我们想象的要高。不仅是页面显示、缩放的时候，还有页面滚动的时候，甚至鼠标移动的时候，都会重新计算。

向 CSS 表达式添加计数器可以跟踪计算表达式的频率。只需在页面上移动鼠标，即可轻松实现超过 10,000 次的计算。

J：代码压缩

当您决定将站点项目部署到 Web 时，您需要考虑压缩 CSS 以删除空格和空白。使网页加载速度更快。要压缩代码，您可以使用一些工具。比如YUI，你可以用它来简化CSS代码，减小文件大小，并获得更高的加载速度。

4.JS调用

2种调用JS的方法

答：直接写在页面上。在页面上放置大量的JS代码不仅会增加页面的大小，还会占据像首页这样的重量级位置。

导致页面上相对重要的位置无法首先显示给搜索引擎。

B：参考JS文件。引用外部地址的JS会影响打开网页的速度。

5. 网址重写

再次将动态页面.aspx.jsp.php更改为.html。让搜索引擎更容易识别；

本文是个人实际工作经验的收集和总结。如果写不出来请提出宝贵意见。谢谢。

我的新浪微博：

清理垃圾代码及 HTML 标签转换，优化页面体积与布局

更多帖子推荐