Web前端页面性能优化小结_web前端性能优化

Web前端页面性能优化小结由刀豆文库小编整理，希望给你工作、学习、生活带来方便，猜你可能喜欢“web前端性能优化”。

Web前端页面性能优化小结

Web前端页面性能优化小结

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

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

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

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

而前端开发工作者可以控制的是什么呢?那就是xhtml，c，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.有利于盲人屏幕阅读器。至于如何做到标签语义化，就看个人的理解了，这方面我也觉得模糊，跟个人的习惯估计也有一定的关系，总之邹惠斌老师是认为我的标签不语义的。)

二、c(http://zhi.ujiuye.com/web/c/)，js文件数量及大小的优化 那么关于c、js的优化的话，一般情况下建议c和js采用外联式。但是如果你的页面内容比较多，设计师把整个效果做得比较花的话，恐怕 c就非常多了，那么这种情况下，你一定要把你的c规划好，尽量的采用缩写，这样可以减少c文件的大小，那么对c做相应的规划也可以减少 c的个数，减少http请求数，js同理。(ps：减少重复性代码，代码重复利用，在这里显得特别重要)

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

当我们将设计师的设计稿还原成静态页面后，除非页面所有的修饰全是色块，内容全是文字，没有图片，如果不是这样的话，那么我们需要对图片做优化处理。当然内容图片我们是没有办法了，因为他是属于内容部分的，一般情况是由于编辑处理，当然，我在还是有一个小小的建议，如果我们的网站中需要有内容图片，希望编辑能够将他们最优化以后，在进行上传，一会儿告诉我的方法，下面我在说说，作为前端开发应该如何处理我们的修饰(背景)图片。由于我们的背景图片数量比较多，这样的话，会给服务器带来影响，增加了http请求数，我们是否有一种好的解决办法呢?这个答案是肯定的，如果你是一个合格的前端开发，你应该清楚，在我们的c定义背景的时候，可以通过坐标来实现对背景进行定位的，既然如此，那么我们可以将这些背景合并起来，这样即可减少http请求数，同时，我们在背景整合的时候，也需要考虑图片质量，同时也需要考虑图片的大小(ps：这里建议使用png8格式的图片结合c sprite，同样的图片，png8格式会相对来比gif小)

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

其实刚才已经说了内容图片的问题，那么我在这里呢，告诉大家一个比较简单的方法，就是使用雅虎提供的一个工具。他就是smushit：http:// 规范在文档 内加载你的样式表。

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

更多知识干货分享，尽在中公优就业，>>>点击进入。

点击查看>>>中公IT优就业封闭式培训，包食宿，学费贷款，交通补贴，推荐就业