前端性能优化

2019-03-25 本文已影响0人 luguilun

（1）合并图片（css sprites）合并CSS和JS文件。

css sprite:css精灵。尽可能将图片融合到一副画中，减少图片数量，从而减少HTTP请求。

（2）图片懒加载lazyload

当图片出现在浏览器的可视区，我们就加载他，没出现，就不加载。

（3）减少对dom的操作
对DOM操作的代价是高昂的，这在网页应用中的通常是一个性能瓶颈。

在《高性能JavaScript》中这么比喻：“把DOM看成一个岛屿，把JavaScript(ECMAScript)看成另一个
岛屿，两者之间以一座收费桥连接”。所以每次访问DOM都会教一个过桥费，而访问的次数越多，交的费用
也就越多。所以一般建议尽量减少过桥次数。

（4）使用JSON格式来进行数据交换

JSON是一种轻量级的数据交换格式，采用完全独立于语言的文本格式，是理想的数据交换格式。同时，
JSON是 JavaScript原生格式，这意味着在 JavaScript 中处理 JSON数据不需要任何特殊的 API 
或工具包。

（5）高效使用HTML标签和CSS样式

HTML是一门用来描述网页的一种语言，它使用标记标签来描述网页，作为一名合格的前端开发，你有必要
去知道其常用标签代表的含义(SEO)和属性(表现形式)。

（6）使用CDN加速（内容分发网络）

将网站的内容发布到最接近用户的网络"边缘"，使用户可以就近取得所需的内容，解决Internet网络拥挤
的状况，提高用户访问网站的响应速度。

（7）CSS和JavaScript的压缩,直接减少下载的文件体积

例如使用 YUI Compressor，其特点是：移除注释；移除额外的空格；细微优化；标识符替换。

（8）注意控制Cookie大小和污染

所以建议去除不必要的Coockie，使Coockie体积尽量小以减少对用户响应的影响；