网页优化策略 面试

前端网页优化

网页内容

1、 减少http请求次数

• 捆绑文件: 现在有很多现成的库可以帮你将多个脚本文件捆绑成一个文件，将多个样式表文件捆绑成一个文件，以此来减少文件的下载次数。
• CSS Sprites: 就是把多个图片拼成一副图片，然后通过CSS来控制在什么地方具体显示这整张图片的什么位置

2、 减少DNS查询次数
DNS查询也消耗响应时间，如果我们的网页内容来自各个不同的domain (比如嵌入了开放广告，引用了外部图片或脚本)，那么客户端首次解析这些domain也需要消耗一定的时间。
3、 避免页面跳转
4、 缓存Ajax
5、 延迟加载
Javascript是典型的可以延迟加载内容。一个比较激进的做法是开发网页时先确保网页在没有Javascript的时候也可以基本工作，然后通过延迟加载脚本来完成一些高级的功能。
6、 提前加载、
与延迟加载目的相反，提前加载的是为了提前加载接下来网页中访问的资源，下面是提前加载的类型
无条件提前加载：当前网页加载完成后，马上去下载一些其他的内容。例如google会在页面加载成功之后马上去下载一个所有结果中会用到的image sprite。
7、 减少DOM元素的数量
8、 根据域名划分内容
浏览器一般对同一个域的下载连接数有所限制，按照域名划分下载内容可以浏览器增大并行下载连接。
9、 减少iframe数量
优点
可以用来加载速度较慢的内容，例如广告；安全沙箱保护。浏览器会对iframe中的内容进行安全控制；脚本可以并行下载
缺点：
即使iframe内容为空也消耗加载时间；会阻止页面加载；没有语义

服务器

1、使用CDN
再次强调第一条黄金定律，减少网页内容的下载时间。提高下载速度还可以通过CDN(内容分发网络)来提升。CDN通过部署在不同地区的服务器来提高客户的下载速度。
2、添加Expires 或Cache-Control报文头

• 对于静态内容添加Expires，将静态内容设为永不过期，或者很长时间以后。在IIS中设置Expires可以看Configure the HTTP Expires Response Header (IIS 7)。
• 对于动态内容应用合适的Cache-Control，让浏览器根据条件来发送请求。关于asp.net的caching，可以看asp.net cache feature和asp.net caching best practices。

3、配置Etags
虽然标题叫配制ETags，但是这里你要根据具体情况进行一些判断。首先Etag简单来说是通过一个文件版本标识使得服务器可以轻松判断该请求的内容是否有所更新，如果没有就回复304 (not modified)，从而避免下载整个文件。
4、尽早flush输出
网页后台程序中我们知道有个方法叫Response.Flush()，一般我们调用它都是在程序末尾，但注意这个方法可以被调用多次。目的是可以将现有的缓存中的回复内容先发给客户端，让客户端“有活干”。
5、使用GET Ajax请求
浏览器在实现XMLHttpRequest POST的时候分成两步，先发header，然后发送数据。而GET却可以用一个TCP报文完成请求。另外GET从语义上来讲是去服务器取数据，而POST则是向服务器发送数据，所以我们使用Ajax请求数据的时候尽量通过GET来完成。
6、避免空的图片src
空的图片src仍然会使浏览器发送请求到服务器，这样完全是浪费时间，而且浪费服务器的资源。尤其是你的网站每天被很多人访问的时候，这种空请求造成的伤害不容忽略。

Cookie

1、 减少cookie的大小
Cookie被用来做认证或个性化设置，其信息被包含在http报文头中，对于cookie我们要注意以下几点，来提高请求的响应速度：

• 去除没有必要的cookie，如果网页不需要cookie就完全禁掉
• 将cookie的大小减到最小
• 注意cookie设置的domain级别，没有必要情况下不要影响到sub-domain
• 设置合适的过期时间，比较长的过期时间可以提高响应速度。
  2、 页面内容使用无cookie域名
  大多数网站的静态资源都没必要cookie，我们可以采用不同的domain来单独存放这些静态文件，这样做不仅可以减少cookie大小从而提高响应速度，还有一个好处是有些proxy拒绝缓存带有cookie的内容，如果能将这些静态资源cookie去除，那就可以得到这些proxy的缓存支持。
  常见的划分domain的方式是将静态文件放在static.example.com，动态内容放在www.example.com。

CSS

1、 将样式表置顶
经样式表(css)放在网页的HEAD中会让网页显得加载速度更快，因为这样做可以使浏览器逐步加载已将下载的网页内容。这对内容比较多的网页尤其重要，用户不用一直等待在一个白屏上，而是可以先看已经下载的内容。
如果将样式表放在底部，浏览器会拒绝渲染已经下载的网页，因为大多数浏览器在实现时都努力避免重绘，样式表中的内容是绘制网页的关键信息，没有下载下来之前只好对不起观众了。
2、 避免CSS表达式
CSS表达式可以动态的设置CSS属性，在IE5-IE8中支持，其他浏览器中表达式会被忽略。
CSS表达式的问题在于它被重新计算的次数远比我们想象的要多，不仅在网页绘制或大小改变时计算，即使我们滚动屏幕或者移动鼠标的时候也在计算，因此我们还是尽量避免使用它来防止使用不当而造成的性能损耗。
3、 用代替@import
避免使用@import的原因很简单，因为它相当于将css放在网页内容底部。
4、 避免使用Fliters
这种滤镜的使用会导致图片在下载的时候阻塞网页绘制，另外使用这种滤镜会导致内存使用量的问题。IE9中已经不再支持。

JavaScript

1、 将脚本置底

• 把脚本置底，这样可以让网页渲染所需要的内容尽快加载显示给用户。
• 现在主流浏览器都支持defer关键字，可以指定脚本在文档加载后执行。
• HTML5中新加了async关键字，可以让脚本异步执行

2、 使用外部的JS和CSS文件
使用外部Javascript和CSS文件可以使这些文件被浏览器缓存，从而在不同的请求内容之间重用。使用外部Javascript和CSS文件的决定因素在于这些外部文件的重用率，如果用户在浏览我们的页面时会访问多次相同页面或者可以重用脚本的不同页面，那么外部文件形式可以为你带来很大的好处。但对于用户通常只会访问一次的页面，例如microsoft.com首页，那inline的javascript和css相对来说可以提供更高的效率。
3、 精简JS和CSS
精简就是将Javascript或CSS中的空格和注释全去掉。
4、 去除重复脚本
重复的脚本不仅浪费浏览器的下载时间，而且浪费解析和执行时间。一般用来避免引入重复脚本的做法是使用统一的脚本管理模块，这样不仅可以避免重复脚本引入，还可以兼顾脚本依赖管理和版本管理。
5、 减少DOM访问
通过Javascript访问DOM元素没有我们想象中快，元素多的网页尤其慢，对于Javascript对DOM的访问我们要注意

• 缓存已经访问过的元素
• Offline更新节点然后再加回DOM Tree
• 避免通过Javascript修复layout

6、 使用智能事件处理

图片

1、 优化图像

• 检查GIF图片中图像颜色的数量是否和调色板规格一致。如果你发现图片中只用到了4种颜色，而在调色板的中显示的256色的颜色槽，那么这张图片就还有压缩的空间。
• 尝试把GIF格式转换成PNG格式，看看是否节省空间。大多数情况下是可以压缩的。
• 在所有的JPEG图片上运行jpegtran。这个工具可以对图片中的出现的锯齿等做无损操作，同时它还可以用于优化和清除图片中的注释以及其它无用信息

2、 优化CSS Sprite

• Spirite中水平排列图片，垂直排列会增加文件大小；
• Spirite中把颜色较近的组合在一起可以降低颜色数，理想状况是低于256色以便适用PNG8格式

3、不要在HTML中缩放图片

移动客户端

1、保持单个内容小于25KB
这限制是因为iphone，他只能缓存小于25K。
2、打包组建成符合文档