前端随手优化不完全篇

Posted 2020-09-02 板栗的栗

        一代码优化概述

       关于代码优化的知识是纯理论的知识，学习的很枯燥。在学到CSS时，不免遇到CSS+div进行代码优化的知

识，因此在网上看了一些关于这方面的知识，简单的整合一下，梳理自己所了解的代码优化问题。

        所谓代码优化是指对程序代码进行等价（指不改变程序的运行结果）变换。程序代码可以是中间代码，也可以是

目标代码。等价的含义是使得变换后的代码运行结果与变换前代码运行结果相同。优化的含义是最终生成的目标代码

短（运行时间更短、占用空间更小），时空效率优化。原则上，优化可以在编译的各个阶段进行，但最主要的一类是

对中间代码进行优化，这类优化不依赖于具体的计算机。

       简单地说，就是在不改变程序运行效果的前提下，对被编译的程序进行等价变换，使之能生成更加高效的目标代

码。

       二那么对于我们学习Web前端开发的网页制作来说有哪些要求呢？

       (1)尽量采用div+css布局您的页面，div+css布局的好处是让搜索引擎爬虫能够更顺利的、更快的、更友好的爬完

您的页面；div+css布局还可以大量缩减网页大小，提高浏览的速度，使得代码更简洁、流畅、更容易放置更多内容。

       (2)尽量缩减您的页面大小，因为搜索引擎爬虫每次爬行您的站点时，存储数据的容量有限，一般建议100KB以

下，越小越好，但不能小于5KB。网页大小减少还有一个好处，能够促使您的站点形成巨大的内部链接网。

       (3)尽量少用无用的图片和flash。内容索引所派出的搜索引擎爬虫，不认识图片，只能根据图片“ALT,TITLE”等属

性的内容判断图片的内容。对于flash搜索引擎爬虫更是视而不见。

       (4)尽量满足w3c标准，网页代码的编写满足W3C标准，能够提升网站和搜索引擎的友好度，因为搜索引擎收录标

准，排名算法，都是在W3C标准的基础上开发的。

       (5)尽量更深层次套用标签h1、h2、h3、h4、h5…..，让搜索引擎能够分辨清晰网页那一块很重要，那一块次之。

       (6)尽量少用JS，JS代码全部用外部调用文件封装。搜索引擎不喜欢JS，影响网站的友好度指数。

       (7)尽量不使用表格布局，因为搜索引擎对表格布局嵌套3层以内的内容懒的去抓取。搜索引擎爬虫有时候也是比

较懒的，望各位一定要保持代码和内容在3层以内。

       (8)尽量不让CSS分散在html标记里，尽量封装到外部调用文件。如果CSS出现在HTML标记里，搜索引擎爬虫

就要分散注意力去关注这些对优化没有任何意义的东西，所以建议封装到专用CSS文件中。

       (9)清理垃圾代码，要把代码编辑环境下敲击键盘上的空格键所产生的符号；把一些默认属性代码，不会影响显示

的代码；注释语句如果对代码可读性没有太大影响，清理这些垃圾代码，会减少不少的空间。

       一个网页是由多种语言组成的，最基础的是HTML，CSS和JS。那么代码优化对于这些的要求又是什么？

       三html优化

       html代码是最为基础的网站制作语言，对于网站优化来说，html代码也有一定的影响，是特别需要注意的优化细

节之一。

       (1)title标签

       title标签就是网页的标题，是一个对于网站优化有很大影响的html标签，每个页面都必须有且内容不同！基本格

式为<title>网页标题</title>。

       (2)META元素

       meta元素在浏览器界面是无法看到的html标签，对于优化有影响的主要有两个，一个是关键字（keywords）、一

个是描述（description）。其实，这两个标签随着seoer的胡乱使用，对于网站优化已经没有多少用处了，你完全可以

不用设定，但我们还是习惯性的设置一下较为妥当。关键字，设定与本页内容相关的主关键词一到三个，之间用英文

状态下的逗号分割。需要注意的是，不要再滥用关键字，除了给搜索引擎不好的印象外别无他用。描述还是很有用的

一个东东了，虽然对于网站的优化排名么有多大的影响，但会作为搜索引擎展示网站索引的一个依据，可以把你的主

关键字链接起来组合成一段通顺的话，一般60到80字即可。格式为:

　　<meta name="keywords"content="">

　　<meta name="description"content="">

       (3)h标签

       h标签在html代码中是“标题”的意思，就如一篇文章，标题是文章最为重要的一个对象，也是搜索引擎在排名时重

点考虑的一个对象。html中的h标签一共有六个，分别是h1/h2/h3/h4/h5/h6，分别代表不同的级别，我们称之为一级

标题、二级标题……当然，一级标题具备更多的权重。需要注意的是h标签是块级元素，默认是粗体显示，独占一

行，前后会有空行。当然，你可以利用css来改变这些效果。

      关于h标签的使用，需要根据实际情况来使用，不可任意滥用。如一篇文章，不可能出现多个一级标题，所以

h1，在同一个页面中只能出现一次，而h2等则可以出现多次，根据你需要表现的内容的重要程度，分别使用不同的h

标签即可。特别注意，h标签中最好出现关键字！还有就是，随其自然，万不可刻意地用h标签来处理某些关键字！

       基本格式为：<h1>这里是标题文字</h1>

       (4)加强和强调

       strong被认为是“加强”，em被认为是“强调”，也就是这两个标签是有特殊含义的，这对于网站优化至关重要。多

数时候，我们在优化网站时会对关键字进行突出，这时使用strong或em就比使用B或者I好很多，特别谨记！

       (5)alt和title

       alt是图像中的注释，title是图像或链接的标题，这两者对于优化，尤其是图像的优化至关重要，但也不要滥用！

一般在插入图像时，我们在alt中设置图像的描述内容，其中可以包含关键字但不要故意堆砌，title则当作图像标题来

处理。特别需要注意的是，这些内容是不可以重复的！也就是说，当你的页面中有多张图像，你不能每张图像的描述

和标题都设置成一样的，这样很容易被搜索引擎惩罚！

　　<img src="test.jpg"alt="一个美女站在黄昏的街头默默等待爱人的回归，眼神中充满了忧伤"title="静待">除此之

外，title属性在a标签中也有所使用，只是有些泛滥了，视觉效果也不好，影响用户体验，所以笔者并不推荐，除非你

的a标签中的内容是一张图片。

　　<a href="product.html"title="产品展示">产品展示</a>

       (6)缩写abbr(目前我没有遇到过)
       这个标签是自定义的一种缩写方式，可以利用它合理的添加一些关键字，同样不要滥用。如下所示：

　　公司的产品涉及<abbr title="以石材为原料的雕刻作品">石雕</abbr>、<abbr title="以铜料为胚，运用雕刻、铸塑

等手法制作的一种造型艺术">铜雕</abbr>、<abbr title="附属在某一平面上的雕刻艺术">浮雕</abbr>、镂雕等各种雕

刻形式。
       (7)canonical标签

       Canonical(权威链接标记)是09年，Google，Yahoo及Microsoft三大搜索引擎联合推出了一个旨在减少重复内容的

一个建议，并不是命令，也就是说这个标签搜索引擎可能不遵守。国内最大的中文搜索引擎百度也已经支持

Canonical标签。

       部分搜索引擎引入了Link的一个新属性Canonical。A页面声明B为权威链接，B声明C为权威网页，则搜索引擎会

认为C是A和B共同的首选权威版本。此时Canonical标签起到了301重定向的作用。只能作用于同一个域名所在的网

址，不能作用于不同域名上的重复内容。也就是说如果文章被其它网站抄袭，也不会因为这个标签而给你的原文章带

来权重。如果是跨站，可以使用301重定向。该链接标签可用于定义相对地址，也可用于定义绝对地址。但为了保险

起见，建议使用绝对地址。

       使用方法：为网页指定权威链接（authoritative|canonical URL），以解决副本内容（duplicate content）问题。

       使用样式：<link rel=”canonical” href=”网页权威链接”/>

       四CSS优化

       于网站排名优化来说，css的几乎没有任何影响，但往大的方向如网站优化来说，样式表css的优化就至关重要

了，其主要作用即是提高网页的响应速度。
       (1)外链css
       css的使用有多种方式，一是嵌入式，即在html标签中直接定义样式表，如下所示:<p style="font-family:arial;font-

size:16px;font-weight:bold;">Outside now its raining,and tears are falling from my eyes…</p>

还有一种是直接定义在页面头部的如下：<styletype="text/css">p{ background:#f1f1f1; color:#333; line-height:20px;}

 </style>这两种方式都是把css写在当前html中，这样会造成hml文档变大，降低网页的响应速度，所以我们需要外链

css，将所有与本页面相关的样式写入到该样式表中：<link href="style/common.css"rel="stylesheet"type="text/css"/>

       (2)精简css

       对于这一点需要一定的css能力才可以做到了。所谓精简，指的是用尽可能少的样式代码实现整个网页的样式效

果，需要充分利用css的继承和综合使用，举一个简单的例子来说明。如页面中的链接，全部不需要下划线、大部分

为12像素，但链接的颜色并不相同，个别的字体效果也不相同，我们就可以这样来写：
       a{ text-decoration:none; font-size:12px;}/*定义通用a样式*/
　　     a.a_red{ color:#e00;}
　　     a.a_blue{ color:#009;}
　　     a.a_menu{ color:#fff; font-size:14px; font-weight:bold;}/*针对特殊a标签只指定特殊样式*/
       因为css的继承作用，a_red和a_blue都具备没有下划线、12像素这一样式，而a_menu同样具备没有下划线，但

因指定了大小，就不再继承12像素的指定而使用14像素。

        (3)整合css

        一般情况下，前端制作人员喜欢把通用样式写成一个文件，把专用样式写成另一个文件以便各个页面调用。如笔

者，就喜欢把页面通用样式（包括通用的布局样式、文字样式等）写在common.css中，而把专用的写在另一个样式

表中。如首页，我们就需要调用common.css和index.css两个样式表文件。这样做，对于前端来说是正确的。但对于

优化，却不太好。多一个文件调用就需要多一次请求，当然也会多耗费一点时间。所以，在网站制作完成后，我们需

要把页面的所有样式合并大一起以提高网页的响应速度！但需注意，合并css不利于网站后期整改，权衡利弊各取所

需吧，具体是否合并还需根据你的实际情况而定。
        (4)压缩css

        压缩css其实很简单，就是去掉多余的空格和换行。实现起来也非常的简单，网上有很多工具，请自行搜索“css

压缩”即可找到很多在线压缩工具。同上面一点，压缩后的css不便于后期整改，需要自己权衡取舍。

        五JavaScript优化编辑

        javascript代码对于网站排名优化同样没有多大影响，但从网站优化的角度来看却是至关重要的一步优化操作，

优良的javascript代码可以大幅度提升网页的响应速度！

        (1)外链js代码

        js代码跟css的使用差不多，都有三种方式：

       内部定义：<A onclick="if(confirm(‘确认？‘){...}else{...})"href="#">confirm</A>

　    头部插入：<script>...</script>

　    外链调用：<SCRIPT language=javascript type=text/javascript src="jQuery-1.7.2.min.js"></SCRIPT>

        (2)精简js代码

        这一点需要更为专业的js技术才能做到，尽可能根据需要实现的效果编写js，而不用从网上找一段代码直接拿来

用，网上的代码很多功能很全，从而质量很大，而其中的很多功能对于我们要实现的效果是没有任何用处的，所以广

拓企业网站建议你针对需要实现的效果定制js以便得到更为精简的代码，从而提高网页的响应速度。

        (3)压缩js代码
        对于这点，网上也有很多的工具，请百度查询“js压缩工具”即可。

        (4)置底js代码

        一般情况下，我们都是把js放到head之间的，这种方式在页面加载时即会加载，当然也就导致响应速度的降低

，百度站长平台建议把js放到页面最底部，也就是</html>之外。等html加载完毕之后才加载js代码，当然，有部分特

殊功能的js代码是没有办法放到页面底部的，具体请根据实际情况操作。

       补充说明：针对js图像特效等，可能会影响网站关键字排名的！有的特效图像的路径、说明等都是写入到js中的，

这种特效尽量不要使用。

       上面说到了三种技术对网页优化起到的作用，我们都知道CSS+div是一个重要的优化过程。我们要着重说一下

CSS+DIV的优化问题。

       六DIV+CSS优化

       对于蜘蛛在爬行一个网站的页面时，若是有太多的垃圾代码，会使搜索蜘蛛对其产生不友好、不信任感，同时蜘

蛛的爬行速度也会因此而减缓，对于网站SEO而言，可谓一大忌。就如传统的用table页面，对此我们就需要对网站进

行代码优化，而这便需要动用CSS+div了，下面便来谈谈使用CSS+div进行代码优化的一些益处。

        (1)精简代码，降低重构难度。

        网站使用DIV+CSS布局使代码很是精简，相信大多朋友也都略有所闻，css文件可以在网站的任意一个页面进行

调用，而若是使用table表格修改部分页面却是显得很麻烦。要是一个门户网站的话，需手动改很多页面，而且看着那

些表格也会感觉很乱也很浪费时间，但是使用css+div布局只需修改css文件中的一个代码即可。

       (2)网页访问速度

       使用了DIV+CSS布局的网页与Table布局比较，精简了许多页面代码，那么其浏览访问速度自然得以提升，也从

而提升了网站的用户体验度。

       (3)SEO优化

       采用div-css布局的网站对于搜索引擎很是友好，因此其避免了Table嵌套层次过多而无法被搜索引擎抓取的问

题，而且简洁、结构化的代码更加有利于突出重点和适合搜索引擎抓取。

       (4)浏览器兼容性

       DIV+CSS相比TABLE布局，更容易出现多种浏览器不兼容的问题，主要原因是不同的浏览器对web标准默认值不

同。国内主流是ie，firefox及chrome用的较少，在兼容性测试方面，首先需要保证在ie多版本不出现问题，这里涉及

到一些方法和技巧，可以针对具体问题在网站查找解决办法。

       (5)CSS+DIV网页布局的时候常犯的小错误

       1. 检查HTML元素是否有拼写错误、是否忘记结束标记

        即使是老手也经常会弄错div的嵌套关系。可以用dreamweaver的验证功能检查一下有无错误。

       2. 检查CSS是否书写正确

       检查一下有无拼写错误、是否忘记结尾的 } 等。可以利用CleanCSS来检查 CSS的拼写错误。CleanCSS本是为

CSS减肥的工具，但也能检查出拼写错误。

       3. 用删除法确定错误发生的位置

       如果错误影响了整体布局，则可以逐个删除div块，直到删除某个div块后显示恢复正常，即可确定错误发生的位

置。
       4. 利用border属性确定出错元素的布局特性

       使用float属性布局一不小心就会出错。这时为元素添加border属性确定元素边界，错误原因即水落石出。

       5. float元素的父元素不能指定clear属性

       MacIE下如果对float的元素的父元素使用clear属性，周围的float元素布局就会混乱。这是MacIE的著名的bug，倘

若不知道就会走弯路。

       6. float元素务必指定width属性

很多浏览器在显示未指定width的float元素时会有bug。所以不管float元素的内容如何，一定要为其指定width属性。

另外指定元素时尽量使用em而不是px做单位。

       7. float元素不能指定margin和padding等属性

       IE在显示指定了margin和padding的float元素时有bug。因此不要对float元素指定margin和padding属性(可以在

float元素内部嵌套一个div来设置margin和padding)。也可以使用hack方法为IE指定特别的值。

       8. float元素的宽度之和要小于100%

如果float元素的宽度之和正好是100%，某些古老的浏览器将不能正常显示。因此请保证宽度之和小于99%。

       9. 是否重设了默认的样式?

某些属性如margin、padding等，不同浏览器会有不同的解释。因此最好在开发前首先将全体的margin、padding设置

为0、列表样式设置为none等。
       10. 是否忘记了写DTD?

       如果无论怎样调整不同浏览器显示结果还是不一样，那么可以检查一下页面开头是不是忘了写下DTD声明。最

后，需要注意的是，蜘蛛不喜欢一个页面有太多的css代码，否则同样会影响蜘蛛的爬行，影响搜索引擎的收录，所

以采用外部调用的方式调用CSS是非常不错的方法。而同时，若非必须太多花哨的网站，采用CSS布局，同样可以到

达所想要的效果。如网站导航中的文字颜色变化、下拉菜单等。