而我们建设网站的目的是什么呢? 不就是为了让目标人群来访问吗? 所以我们可以理解成前端才是真正和用户接触的.
除了后台需要在性能上做优化外, 其实前端的页面更需要在性能优化上下功夫, 只有这样才能给我们的用户带来更好的用户体验. 不仅仅如此, 如果前端优化得好, 他不仅可以为企业节约成本, 他还能给用户带来更多的用户, 因为增强的用户体验. 说了这么多, 那么我们应该如何对我们前端的页面进行性能优化呢?
前端的页面主要包括 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/
不过他这个工具我觉得对于我们需要发布的内容图片还是比较麻烦, 但是他可以进行优化, 优化图片的目的, 最开始已经说了, 图片越小, 我们的用户下载速度越快, 当然对企业的服务器的带宽也可以起到节省的作用.
上面是我关于前端页面性能的一些简单的看法, 当然 web 标准中提到的结构, 表现, 行为, 我们工作说的 xhtml,CSS,JS 其实他们还有很多东西, 需要我们去学习, 比如结构语义化他就是一个深入研究的课题, 性能优化也是如此, 不过只有我们不断的去挖崛, 我们才可能进步. 下面对我前端开发的出品有一个简单的建议:
1, 我们做还原的页面能够通过 http://validator.w3.org 的验证, 当然 CSS 希望也能通过 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 的规划都还不够非常了解, 所以经常会出现已经上线的页面出现一些这样那样的问题, 比如注释, 或者标签不闭合等等, 所以我建议各个公司可以开一些关于交流的会, 这样的话, 各个职位间可以交互交流, 其实也可以说是培训吧, 只有这样, 才能够打造出一个好的产品.
好了, 我就谈这些, 这些东西也是我的一些简单的看法, 当然, 你可能不赞成我说的, 或者你有更好的建议, 你可以单独联系我, 也可以在这帖子后面给我评论, 或者叫留言.
来源: http://www.qdfuns.com/article/15763/958f698b4faa78e0fb23c3379aec8560.html