【面试题】性能优化相关

【前端性能优化方式总结】

一、减少HTTP请求

1.合并文件

将css、js分别合并到一个文件中。

减少文件请求。

2.CSS Sprites（雪碧图）

减少图片请求。

3.图片地图（不推荐）

把多张图片整合到一张图片中。虽然文件的总体大小不会改变，但是可以减少HTTP请求次数。图片地图只有在图片的所有组成部分在页面中是紧挨在一起的时候才能使用，如导航栏。确定图片的坐标和可能会比较繁琐且容易出错，同时使用图片地图导航也不具有可读性，因此不推荐这种方法。

4.内联图像（暂时没有得到主流浏览器的支持）

使用data:URL 模式可以在web页面中包含图片但无需任何额外的HTTP请求。

二、减少DNS查找次数（DNS缓存）

现代的浏览器都有自己的缓存机制。这里不需要我们手动做什么。

三、缓存时间

缓存时间长优点：减少DNS的重复查找，节省时间

缓存时间短优点：能够及时的检测网站服务器IP地址的变化，保证访问的正确性

设置适当的缓存时间，减少DNS的查找，同时保证访问的正确性。

四、使用多域名，实现网站资源(html、图片、脚本等)的并行下载

将网站资源放到不同的域名下，可以实现资源文件的并行下载。

【注意】

多域名可以实现并行下载，但会增加DNS的查找次数。

一般原则：

把这些页面中的内容分割成至少两部分但不超过四部分。

五、使用内容分发网络(CDN–Content delivery network)

1.基本认知

内容分发网络是由一系列分散到各个不同地理位置上的Web服务器组成的，它提高了网站内容的传输速度。

用于向用户传输内容的服务器主要是根据和用户在网络上的靠近程度来指定的。

2.原理

使用CDN，就相当于在离你最近的地方，放置一台性能好、连接顺畅的副本服务器，让你能够以最近的距离，最快的速度获取内容。

用户请求路由的第一跳就到达了CDN服务器，当CDN中存在浏览器请求的资源时，从CDN直接返回给浏览器，最短路径返回响应，加快用户访问速度，减少数据中心负载压力。

【缺点】

CDN服务成本非常高，需要建立多台服务器。

【适用】

CDN缓存的一般是静态资源，如图片、文件、CSS、script脚本、静态网页等，这些文件访问频度很高，将其缓存在CDN可极大改善网页的打开速度。

六、添加Expire/Cache-Control头，缓存http响应内容

（Expire属于HTTP/1.0，Cache-Control属于HTTP/1.1。这两者起到的作用是一致的。）

缓存请求的内容，减少后续http请求。

Expires：存储的值代表，资源在本地的过期时间。

Cache-Control：存储的值代表，距离缓存过期还有多少秒。

七、启用Gzip压缩

通过减小http响应的大小，节省http响应时间。Gzip可以压缩所有可能的文件类型。

【启用方式】

请求头中添加：Accept-Encoding: gzip

响应头会返回：Content-Encoding: gzip。并以客户端标出的压缩方式，对响应内容进行压缩。

八、css放在中，script放在最下面（之前）

css放在中，能够提高网页渲染性能，避免网页出现白屏或者是没有样式的内容。

九、减少cookie传输

十、把JavaScript和CSS都放到外部文件中

使用外部文件可以提高页面速度，因为JavaScript和CSS文件都能在浏览器中产生缓存。

内置在HTML文档中的JavaScript 和CSS则会在每次请求中随HTML文档重新下载。

十一、压缩 JavaScript 和 CSS

去除代码不必要的字符减少文件大小从而节省下载时间。

方法：

（1）去除不必要的空白符（空格、换行、tab缩进）、格式符、注释符

（2）简写方法名、参数名来压缩js脚本

十二、LazyLoad Images

在页面刚加载的时候只加载第一屏图片，当用户继续往后滚屏的时候才加载后续的图片。

十三、引入textarea/script元素做延迟解析异步渲染

【关于图片可以做的优化总结】

1.切图后进行图片压缩

2.懒加载。初始渲染只加载首屏图片，用户继续滚动再加载后续图片。

3.CSS Sprites（雪碧图）

4.base64编码图片，将图片嵌入html或css文件中，不再单独请求

5.svg代替图片

6.html5 canvas画图

7.Responsive设计（响应式图片）

【粗略理解】

避免项目中为了适应不同大小的设备，存储多张相同的图片。

使用一张图，通过@media媒体查询，为图片设置不同的大小。

#待续......