标签：
web性能优化
这是第一篇正式书写的博文，虽然是在大环境下要求实现的，但是作为一名学习了3个月web前端的新人，习惯性的记录学习的知识和自己的理解，也不失为一种有效的巩固所学的方式。考虑到写文已经拖到了最后一个月，好多知识点的顺序已经不清晰，所以我的博文记录与学习的顺序无关。从现在好好记录吧，鼓励一下自己。
现代生活节奏很快，所以我们总是尽可能地借助身边的工具来提高一切效率，就像我们不想花费时间在手动洗衣服上一样，没人想要用好几秒的时间去等待一个网页的加载，更何况这是一个竞争时代，每个人都有不止一种的选择。所以一个好的前端人员，有绝对的责任在完成网页的同时，去减少加载的时间消耗。主要有两个大的途径实现优化。我主要是写写前段部分。
网页加载是两种形式的树的呈现，包括DOM树（html文档部分）和渲染树（css样式部分），每一次加载网页都是一次回流(reflow)和重绘(repaint)的过程，而当css的设置引发对周围节点的改变时，如（增删改）或某些属性（如width），必将再一次进行回流，进而引发重绘,这样带来的直接后果是拖慢网页的加载速度。好的方式是，减少引起回流的css样式设置，通过改变class样式来替代直接改变css属性。
（1） 代码位置：css样式写在顶部，js代码写在底部，考虑到页面加载出来是要呈现出完整效果的，按照html从上到下的加载特点，让css样式先出来绝对是有必要的，可以试想如果不这么做，一堆html文档先出现，再duang地一下出现网页，用户的体验应该会是两个字“惊悚”（注：请设备性能高的用户自行绕过）。
（2） 代码优化：css选择器的书写，解析选择器代码有一特点，从后往前解析，为了不让解析浪费更多时间，请尽量少用后代，即匹配规则越少越好，尤其应减少属性选择器的使用，如：input[type="botton"]之类的。比较推荐的是多利用css继承属性。其实对于刚起步学写代码的同学来讲有一点比较麻烦的地方，总是习惯了‘小视野’地写代码，也就是习惯对一块一块的内容单独定样式，不能对代码形成全局观，就很难实现对能利用继承属性的版块的把握，而写好后再更改显然是一件不那么令人愉快的事，所以尽快让写代码熟练来很重要。另一个是Css缩写，如果可以，尽量把颜色值#cccccc写成#ccc，虽然就实际而言，它对性能优化的作用不大，但养成好习惯、好规范总是没错的。
2.后台：
对于学前端的而言，后台总带着点神秘艰涩的色彩，只大概知道这一途径的优化可能才是真正意义上的web优化，毕竟从浏览器到服务器的这一段路程不总是一帆风顺。
（1） 负载均衡
（2） CDN（内容分发网络）
（3） 反向代理
当然，除了以上书写原则性的部分，还有一些好的工具帮助我们实现优化，借助工具实现优化也是快捷途径。
标签：
原文地址：http://www.cnblogs.com/zwy123/p/4542734.html
