web前端页面性能优化方法

web前端性能优化方法总结

一，html语义化

　　语义化的html是让标签作本身该作的事，便于其余开发者阅读以及使代码规范，优雅整洁。 也是为了网络爬虫更好的解析。

       问： 为何要作到语义化呢？

　　1. 有利于SEO（是指从天然搜索结果得到网站流量的技术和过程），有利于搜索引擎爬虫更好的解析咱们的网页，从而获取更多的有效信息，提高网页的权重。

　　2. 在没有css的时候可以清晰的看出网页的结构，加强可读性。

　　3. 团队合做中，语义化的html更能让其余开发人员理解和阅读，便于团队的代码维护与修改。

　　4. 支持多终端设备的浏览器渲染。

       问： 怎么作到语义化的html呢？

　　1. 熟记各类html标签，知道每一个html标签该如何使用。

　　2. 对应的内容用对应的标签，如标题，就可选择<h1>~<h6>这些标签。

二，减小重复代码，压缩css，js代码大小

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

三，背景图片大小及数量

　　1. 图片的大小能够压缩，尽可能选择比较小的图片。

       2. 可将多张图片用css精灵之城 css sprites

四，减小http请求，合理设置缓存

　　1. 合并css，js文件，减小css，js重复代码，合并图片等都是为了减小http请求，应为每次http请求的代价都是很是昂过的，因此减小http请求能有效优化访问性能。

　　2. 缓存能缓存得更多，缓存得更久，也是能够大大减小http请求，就优化了访问性能。

五，图片懒加载（lazyout images）

六，减小cookie传输

　　一方面，cookie包含在每次请求和响应中，太大的cookie会严重影响数据传输，所以哪些数据须要写入cookie须要慎重考虑，尽可能减小cookie中传输的数据量。另外一方面，对于某些静态资源的访问，如CSS、script等，发送cookie没有意义，能够考虑静态资源使用独立域名访问，避免请求静态资源时发送cookie，减小cookie传输次数。　　

七，js中减小DOM操做，避免使用eval和 Function，减小做用域链查找（尽可能把变量设为局部变量）。

八，CDN加速

　　CDN（contentdistribute network，内容分发网络）的本质仍然是一个缓存，并且将数据缓存在离用户最近的地方，使用户以最快速度获取数据。

九，反向代理

　　1. 传统代理服务器位于浏览器一侧，代理浏览器将http请求发送到互联网上，而反向代理服务器位于网站机房一侧，代理网站web服务器接收http请求。

　　2 .反向代理也能够实现负载均衡的功能，而经过负载均衡构建的应用集群能够提升系统整体处理能力，进而改善网站高并发状况下的性能。