前端面试题之性能优化大杂烩1

主要内容为下面几大类：移动端、图片、JavaScript、css、html、页面内容、服务器、cookie。

移动端性能优化：

1. 保持单个文件小于25KB
   移动网站页面要求下载资源，如果文件过大，会大大减慢页面加载速度。

2. 打包内容为分段multipart文档
   由于HTTP请求每一次都会执行三次握手，每次握手都会消耗较多的时间。使用multipart，实现了多文件同时上传，可用一个HTTP请求获取多个组件。

图片优化：

1. CSS sprites
   俗称 CSS 精灵、雪碧图，雪花图等。即将多张小图片合并成一张图片，达到减少 HTTP 请求的一种解决方案。可通过 CSS中的background 属性访问图片内容。这种方案同时还可以减少图片总字节数，节省命名词汇量。

2. 压缩图片
   图片占据资源极大，因此尽量避免使用多余的图片，使用时选择最合适的格式大小，然后使用智图压缩，同时在代码中用Srcset来按需显示。（切记不要过分压缩 可能会导致图片迷糊）

3. 尽量避免重设图片大小
   重设图片大小是指在页面、CSS、JavaScript等中多次重置图片大小，多次重设图片大小会引发图片的多次重绘，影响性能。

4. 图片尽量避免使用DataURL
   DataURL图片没有使用图片的压缩算法文件会变大，并且要解码后再渲染，加载慢耗时长。

5. 图片懒加载
   图片对页面加载速度影响非常大。比如，当一个页面内容比较多的时候，加载速度就会大大的降低，极大的影响到用户体验 。更有甚者，一个页面可能会有几百个图片，但是页面上仅仅只显示前几张图片，那其他的图片是否可以晚点加载用于提高性能。具体可见 >>