如何进行前端性能优化?

162 阅读2分钟

我们前端程序员,写出来代码是一回事,跑起来是另一回事,而跑得更快,则是另一个层次了。今天我们简单讲下前端性能优化的几个点.

1.减少HTTP请求

减少 HTTP 请求的方案主要有:合并 JavaScript 和 CSS文件、合并图片 CSS Sprites、图像映射(Image Map)和使用 Data URI 来编码图片,图片较多的页面也可以使用 lazyLoad 等技术进行优化。

2.减少DOM操作

修改和访问 DOM 元素会造成页面的 Repaint(重绘)和 Reflow(重排),循环对 DOM 操作更是不推荐的行为。所以合理的使用 JavaScript 变量储存内容,考虑大量 DOM 元素中循环的性能开销,在循环结束时一次性写入。

减少对 DOM 元素的查询和修改,查询时可将其赋值给局部变量。

注:在 IE 中:hover 会降低响应速度。

3.使用Json来进行数据交换。

JSON 是一种轻量级的数据交换格式,采用完全独立于语言的文本格式,是理想的数据交换格式。

同时,JSON 是 JavaScript 原生格式,这意味着在 javaScript 中处理 JSON 数据不需要任何特殊的 API 或工具包。与 XML 序列化相比,JSON 序列化后产生的数据一般要比 XML 序列化后数据体积小。

4.高效使用 HTML 标签和 CSS 样式

其基本思路是尽可能避开互联网上有可能影响数据传输速度和稳定性的瓶颈和环节,使内容传输的更快、更稳定。通过在网络各处放置节点服务器所构成的在现有的互联网基础之上的一层智能虚拟网络,CDN 系统能够实时的根据网络流量和各节点的连接、负载状况以及到用户的距离和响应时间等综合信息将用户的请求重新导向离用户最近的服务节点上。

6.将 CSS 和 JS 放到外部文件中引用,CSS 放头,JS 放尾

7.精简 CSS 和 JS 文件

8.压缩图片和使用图片 Sprite 技术

9.注意控制 Cookie 大小和污染

因为 Cookie 是本地的磁盘文件,每次浏览器都会去读取相应的 Cookie,所以建议去除不必要的Coockie,使 Coockie 体积尽量小以减少对用户响应的影响;

使用 Cookie 跨域操作时注意在适应级别的域名上设置 coockie 以便使子域名不受其影响Cookie 是有生命周期的,所以请注意设置合理的过期时间,合理地 Expire 时间和不要过早去清除coockie,都会改善用户的响应时间。

以上不必全部记住,在面试时能够回答出三点左右就可以----------