前段性能优化

迷南。 2022-09-24 01:29 136阅读 0赞

不浮躁，不安逸。

# [web前端页面性能优化小结][web] #

PS：结合了精英的思想和自己的一些小小的总结~

影响用户访问的最大部分是前端的页面。网站的划分一般为二：前端和后台。我们可以理解成后台是用来实现网站的功能的，比如：实现用户注册，用户能够为文章发表评论等等。而前端呢？其实应该是属于功能的表现。

而我们建设网站的目的是什么呢？不就是为了让目标人群来访问吗？所以我们可以理解成前端才是真正和用户接触的。

除了后台需要在性能上做优化外，其实前端的页面更需要在性能优化上下功夫，只有这样才能给我们的用户带来更好的用户体验。不仅仅如此，如果前端优化得好，他不仅可以为企业节约成本，他还能给用户带来更多的用户，因为增强的用户体验。说了这么多，那么我们应该如何对我们前端的页面进行性能优化呢？

前端的页面主要包括xhtml,css,js。其实xhtml就是现实中所谈到的内容，页面的内容：文字，图片，flash,视频等。

而前端开发工作者可以控制的是什么呢？那就是xhtml，css，js的代码及相应的修饰（背景）图片。下面我就根据我自己的经验来说说：

一、提倡前端开发工程师在书写xhtml的时候做到结构语义化。

结构中主要包括了head和body两个部分，但是我们经常说的是结构语义化主要是body中的标签，但是我在这里还是简单的说一下head，head中其实包括了一些对于我们seo很有用的一些东西，比如title,Description,Keywords,这些东西在蜘蛛抓取的时候都是有帮助的，当然，还有其他的一些，我在此就不一一说明了，比如设置缓存等一些其他的信息。

那么body中的话，包括的标签就很多了，我觉得作为一个合格的前端开发人员你应该去熟悉他们，比如div,span,h,ul,ol,dl,p等等这类的标签的使用。应该非常合理，还有就是注意h标签的断层，及h1标签的使用，这些都是非常重要的。

同时在我们的结构中不要出现style和onclick这样的内联的样式和事件。希望大家能够注意结构与表现、行为的分离。

（PS：标签语义化的好处：1.有利于搜索引擎；2.结构清晰的HTML在团队合作中的作用，就不必说了吧；3.有利于盲人屏幕阅读器。至于如何做到标签语义化，就看个人的理解了，这方面我也觉得模糊，跟个人的习惯估计也有一定的关系，总之邹惠斌老师是认为我的标签不语义的。）

二、css，js文件数量及大小的优化

那么关于css、js的优化的话，一般情况下建议css和js采用外联式。但是如果你的页面内容比较多，设计师把整个效果做得比较花的话，恐怕css就非常多了，那么这种情况下，你一定要把你的css规划好，尽量的采用缩写，这样可以减少css文件的大小，那么对css做相应的规划也可以减少css的个数，减少http请求数，js同理。

（PS：减少重复性代码，代码重复利用，在这里显得特别重要）

三、背景图片数量及大小的优化

当我们将设计师的设计稿还原成静态页面后，除非页面所有的修饰全是色块，内容全是文字，没有图片，如果不是这样的话，那么我们需要对图片做优化处理。当然内容图片我们是没有办法了，因为他是属于内容部分的，一般情况是由于编辑处理，当然，我在还是有一个小小的建议，如果我们的网站中需要有内容图片，希望编辑能够将他们最优化以后，在进行上传，一会儿告诉我的方法，下面我在说说，作为前端开发应该如何处理我们的修饰（背景）图片。

由于我们的背景图片数量比较多，这样的话，会给服务器带来影响，增加了http请求数，我们是否有一种好的解决办法呢？这个答案是肯定的，如果你是一个合格的前端开发，你应该清楚，在我们的css定义背景的时候，可以通过坐标来实现对背景进行定位的，既然如此，那么我们可以将这些背景合并起来，这样即可减少http请求数，同时，我们在背景整合的时候，也需要考虑图片质量，同时也需要考虑图片的大小，我在以前有写过相应的博文。

（PS：这里建议使用PNG8格式的图片结合css sprite，同样的图片，PNG8格式会相对来比GIF小）

四、内容图片的大小的优化

其实刚才已经说了内容图片的问题，那么我在这里呢，告诉大家一个比较简单的方法，就是使用雅虎提供的一个工具。他就是smushit：[http://www.smushit.com/][http_www.smushit.com]

不过他这个工具我觉得对于我们需要发布的内容图片还是比较麻烦，但是他可以进行优化，优化图片的目的，最开始已经说了，图片越小，我们的用户下载速度越快，当然对企业的服务器的带宽也可以起到节省的作用。

上面是我关于前端页面性能的一些简单的看法，当然web标准中提到的结构，表现，行为，我们工作说的xhtml,css,js其实他们还有很多东西，需要我们去学习，比如结构语义化他就是一个深入研究的课题，性能优化也是如此，不过只有我们不断的去挖崛，我们才可能进步。下面对我前端开发的出品有一个简单的建议：

1、我们做还原的页面能够通过[http://validator.w3.org][http_validator.w3.org]的验证，当然css希望也能通过[http://jigsaw.w3.org/css-validator/validator][http_jigsaw.w3.org_css-validator_validator]难证，不过有时候由于需要兼容多浏览器，会受到hack的影响，css不做强制要求。

2、作前端的我觉得应该知道yslow。如果不知道可以看看我以前写的文章，你觉得你的静态页面应该能够通过yslow2.0的classic（V1）级别的检测，检测的结果我觉得应该得到A。

3、你的背景图片保证不超过3个以上，你的css文件不超过2个，js文件不超过3个。而且良好的遵守web标准的一些规定，css放到head中，js文件放到</body>之前或者之后。

4、当然就是希望你能够对你的页面进行裸体检查。其实就是来检验你的结构语义化是否有效果。

裸体检查：就是将你的css和js都去掉，查看你的html，看这些内容你是否能够看懂。

5、检测你的h标签是否断层。

（PS：就是按照h1,h2,h3,h4….，不要中间漏掉h2）

6、建议body中增加text-align:center。

7、当然还有很多，比如什么id，class的命名呀，这些东西，我觉得应该是你的团队中应该做的事情。

（PS：这里得去好好看看clsaa选择器的权重和优先级）

8、作为大型网站来说，首页使用内联式样式表，这样可以减少http请求数的同时，也可以防止裸奔。当然其他页面需要使用外联样式表，这样才可以方便维护。因为作为大型网站来说，他的首页访问量是非常的大的，所以。。

把样式表置于顶部  
把脚本置于页面底部  
避免使用 CSS 表达式（Expression）  
使用外部 JavaScript 和 CSS  
削减 JavaScript 和 CSS  
用 <link> 代替 @import  
避免使用滤镜  
剔除重复脚本  
减少DOM访问  
开发智能事件处理程序

最好的方案就是按照 HTML 规范在文档 <head /> 内加载你的样式表。

对于拥有较大浏览量的首页来说，有一种技术可以平衡内置代码带来的 HTTP 请求减少与通过使用外部文件进行缓存带来的好处。其中一个就是在首页中内置 JavaScript 和 CSS ，但是在页面下载完成后动态下载外部文件，在子页面中使用到这些文件时，它们已经缓存到浏览器了。

Coockie:

减小Cookie体积  
对于页面内容使用无coockie域名

图片：

优化图像  
优化CSS Spirite  
不要在HTML中缩放图像  
favicon.ico要小而且可缓存

移动应用：

保持单个内容小于25K  
打包组件成复合文本

此文中谈到了编辑，其实通过我走过的公司来看，很多公司其实不止是编辑，甚至连开发，他们对xhtml的规划都还不够非常了解，所以经常会出现已经上线的页面出现一些这样那样的问题，比如注释，或者标签不闭合等等，所以我建议各个公司可以开一些关于交流的会，这样的话，各个职位间可以交互交流，其实也可以说是培训吧，只有这样，才能够打造出一个好的产品。

好了，我就谈这些，这些东西也是我的一些简单的看法，当然，你可能不赞成我说的，或者你有更好的建议，你可以单独联系我，也可以在这帖子后面给我评论，或者叫留言。

转自blueidear:http://bbs.blueidea.com/thread-2936073-1-1.html

</div>
        <div class = "postDesc">posted @ <span id="post-date">2010-10-12 17:47</span> <a href='http://www.cnblogs.com/mofish/'>沫鱼</a> 阅读(<span id="post_view_count">...</span>) 评论(<span id="post_comment_count">...</span>)  <a href ="http://i.cnblogs.com/EditPosts.aspx?postid=1849041" rel="nofollow">编辑</a> <a href="#" onclick="AddToWz(1849041);return false;">收藏</a></div>
    </div>
    <script type="text/javascript">var allowComments=true,isLogined=false,cb_blogId=69103,cb_entryId=1849041,cb_blogApp=currentBlogApp,cb_blogUserGuid='3edae587-4f44-df11-ba8f-001cf0cd104b',cb_entryCreatedDate='2010/10/12 17:47:00';loadViewCount(cb_entryId);</script>

刷新评论 刷新页面 返回顶部

$(function () \{ setTimeout(function () \{ incrementViewCount(cb\_entryId); \}, 50); deliverAdT2(); deliverAdC1(); deliverAdC2(); loadNewsAndKb(); loadBlogSignature(); LoadPostInfoBlock(cb\_blogId, cb\_entryId, cb\_blogApp, cb\_blogUserGuid); GetPrevNextPost(cb\_entryId, cb\_blogId, cb\_entryCreatedDate); loadOptUnderPost(); GetHistoryToday(cb\_blogId, cb\_blogApp, cb\_entryCreatedDate); \});

</div>
    </div>
    
    <div id="sideBar">
        <div id="sideBarMain">

### 公告 ###

<div id="calendar"><div id="blog-calendar" style="display:none"></div><script type="text/javascript">loadBlogDefaultCalendar();</script></div>
    
            <div id="leftcontentcontainer">
                <div id="blog-sidecolumn"></div><script type="text/javascript">loadBlogSideColumn();</script>
            </div>
    
        </div>
    </div>
    <div class="clear"></div>
    </div>
    <div class="clear"></div>
    <div id="footer">

[web]: http://www.cnblogs.com/mofish/archive/2010/10/12/1849041.html
[http_www.smushit.com]: http://www.smushit.com/
[http_validator.w3.org]: http://validator.w3.org/
[http_jigsaw.w3.org_css-validator_validator]: http://jigsaw.w3.org/css-validator/validator