前端页面性能优化，面试必知

在实际开发中，很多时候需要考虑页面性能，良好的性能是保留用户的关键，那么前端页面如何做到性能优化？请看下文。

1、css放置在页面顶部，js文件依据需求放置。

CSS放在页面最上部（head标签中），JS 文件放在页面最下面浏览器会在下载完成全部 CSS 之后 才对整个页面进行渲染， 因此最好的做法是将CSS 放在页面最上面（是将CSS放在head中），让浏览器尽快下载CSS。
CSS书写规范：

• 布局代码写前面
• 删除空样式
• 选择器性能优化
• 避免使用表达式，避免用id写样式

js 文件则相反，浏览器在加载 js 后，立即执行，有可能会阻塞整个页面，造成页面显示缓慢，因此 js 最好放在页面最下面。但是，如果页面解析时就需要用到 js文件，这时放到底部就不合适了。

2、尽可能少的 设置 全局变量。

3、尽量减少DOM 操作

4、不要再标签中设置样式，最好外部引用 CSS文件。

5、减少http 请求，合理设置 HTTP 缓存；（最有效的办法）

• 使用语义化标签
• 减少iframe：iframe是SEO的大忌，iframe有好处也有弊端
• 避免重定向

http协议是无状态的应用层协议，意味着每次 http 请求都需要建立通信链路、进行数据传输，而在服务器端，每个 http 都需要启动独立的线程去处理。这些通信和服务的开销都很昂贵，减少 http 请求的数目可有效提高访问性能。

减少http请求的主要手段是 合并 CSS 、 合并 js 、 合并图片（多张图片合并成一张）。

设置HTTP 缓存： 缓存的力量是强大的，恰当的缓存设置可以大大的减少 HTTP请求。假设某网站首页，当浏览器没有缓存的时候访问一共会发出 78个请求，共 600多 K数据，而当第二次访问即浏览器已缓存之后访问则仅有 10个请求，共 20多 K数据。

怎样才能合理设置？ 原则很简单，能缓存越多越好，能缓存越久越好。
如果可以的话，尽可能的将外部的脚本、样式进行合并，多个合为一个。另外， CSS、 Javascript、Image 都可以用相应的工具进行压缩，压缩后往往能省下不少空间。

6、使用浏览器缓存

对一个网站而言，CSS、js、logo、图标这些静态资源文件更新的频率都比较低，而这些文件几乎是每次 http 请求都需要的，如果将这些文件缓存在浏览器中，可以极好的改善性能。 通过设置 http 头中 的 cache-control 和 expires 的属性，可设定浏览器缓存，缓存时间可以是数天，甚至是几个月。

7、如果遇到大的文件，可以将文件放置在一个定时器中 ，利用异步操作，等其他的文件加载完成后，再加载 定时器中的文件。

8、图片的优化

使用WebP，图片合并压缩，CSS sprite技术

9、 图片的懒加载

这条策略实际上并不一定能减少 HTTP 请求数，但是却能在某些条件下，或者页面刚加载时 减少 HTTP 请求数。对于图片而言，在页面刚加载的时候 ，可以只加载第一屏，当用户继续往后滚屏的时候，才加载后续的图片。

10、减少 cookie 传输 ，尽量使用localStorage 存储 本地数据

一方面，cookie 包含在每次请求和响应中，太大的 cookie 会严重影响数据传输，因此哪些数据需要写入cookie 需要慎重考虑，尽量减少 cookie 中传输的数据量。

12、使用JSON格式来进行数据交换，使用CDN加速，使用HTTP缓存

什么是CDN？
CDN(Content Delivery Network)是指内容分发网络，也称为内容传送网络。CDN的基本原理是广泛采用各种缓存服务器，将这些缓存服务器分布到用户访问相对集中的地区或网络中，在用户访问网站时，利用全局负载技术将用户的访问指向距离最近的工作正常的缓存服务器上，由缓存服务器直接响应用户请求。
添加 Expires 或 Cache-Control 信息头

13、使用DNS预解析

Chrome内置了DNS Prefetching技术, Firefox 3.5 也引入了这一特性，由于Chrome和Firefox 3.5本身对DNS预解析做了相应优化设置，所以设置DNS预解析的不良影响之一就是可能会降低Google Chrome浏览器及火狐Firefox 3.5浏览器的用户体验。
预解析的实现：

1. 用meta信息来告知浏览器, 当前页面要做DNS预解析:< meta http-equiv=“x-dns-prefetch-control” content=“on” />
2. 在页面header中使用link标签来强制对DNS预解析: < link rel=“dns-prefetch” href=“http://bdimg.share.baidu.com” />