百度运维部一面之web页面性能优化

有幸进入百度运维部进行面试，面的是运维部的研发工程师，涉及前端和运维。9月29号下午2点面的，一面通过后紧接着二面，现在等结果，不知道会不会有三面...不管怎么样，还是要总结一下之前被忽略的“前端性能优化问题”。

问题是：web页面性能在前端、NA（Native App）端和后端各有哪些优化方法？

1.优化图像

图像在吸引访客方面起着举足轻重的作用，但是你添加到页面上的每一张图片都需要用户从你的服务器下载到他们的电脑上，这无疑增加了页面的加载时间，因此若加载时间过长很可能会让用户离开你的网站。所以，优化图像是非常必要的。

优化图像的方法有：

a.使用CSS Sprites（雪碧图）、CSS3写的图、base64位引用小的icon图；
b.支持WebP图片格式；
c.支持针对不同的网络带宽下载不同的图片格式，比如WIFI下载高清图，4G普通图，3G低质量的图；
d.png为无损格式，适合精准的按钮图标；在网页中需要浏览大图时，采用jpg压缩格式，能够大大节省流量；
e.图片的懒加载、预加载；
f.减小图片大小、减少图片请求。

2.减少文件数量或压缩文件

a.许多JS、CSS文件可以合并时最好合并，减少页面上的文件数量可以减少http请求数；
b.压缩JS、CSS文件。

3.将CSS文件放在页面顶部，而JS文件放在底部

a.把 CSS文件放在页面顶部可以禁止页面逐步渲染，节省浏览器加载和重绘页面的资源；
b.把JS文件放在底部可以避免代码执行前的等待时间，从而提升页面加载速度（在某些情况下，需要将JS在页面的顶部加载，如某些第三方跟踪脚本）。

4.异步加载JS

如何实现JS异步加载

5.延迟加载和执行非必要脚本

网页中有很多脚本在页面完全加载完前都是不需要执行的，所以可以延迟加载和执行非必要脚本。这些脚本可以在onload事件之后执行，避免对网页上重要内容的呈现造成影响。这些脚本可以是你自己网页的脚本，更多的是一些第三方脚本，比如评论、广告、智能推荐、分享等等，而这些完全可以等主题内容加载完后再执行。

6.减少DNS查询

DNS查询需要很长时间来返回一个主机名的IP地址，而浏览器在查询结束前不会进行任何操作。所以应该减少外部JS、CSS、图片等资源的引用，不同域名的使用越少越好。

7.客户端预加载（利用浏览器缓存）

浏览器缓存是允许访客的浏览器缓存你网站页面副本的一个功能。这可以使访客再次访问时，直接从缓存中读取内容而不必重新加载，这就节省了向服务器发送HTTP请求的时间。此外优化你的网站的缓存系统往往也会降低你的网站的带宽和托管费用。

8.使用CDN（内容分发网络）

CDN的全称是Content Dilivery Network，即内容分发网络。它可以使用户就近取得所需内容，解决网络拥塞的情况（当时有被问到“CDN是如何实现加速的”，这是答案！）。就好比在某猫超市上买东西，他会根据你的收货地址来选择发货的仓库。CDN网络可以将源站的内容缓存到分布全球的CDN节点，根据用户访问的IP，就近连接CDN，提高网站响应速度。

9.启用GZIP压缩

在服务器上压缩网站的页面是提升网站访问速度非常有效的一种方法。使用GZIP压缩可以做到这一点。GZIP是一个减小发送给访客的HTML、JS、CSS文件体积的工具。压缩的文件可以减少HTTP响应时间。据Yahoo报道，该方法可以减少70%的下载时间。而目前90%的通过浏览器的流量都支持GZIP压缩，因此，这是一个提升网站性能有效的选项。

10.静态文件放在单独域名的服务器上

a.避免请求静态资源文件时携带cookie信息，增加请求损耗；
b.突破浏览器并发限制，像地图之类的需要大量并发下载图片的站点，这一点非常重要。