前端面试题——网站前端性能/应用程序缓存/浏览器缓存

哪些方法可以提升网站前端性能？

1.静态资源文件（JavaScript和css）放在外部文件中。

在实际应用中使用外部文件会提高页面速度，因为JavaScript和css文件都能在浏览器中产生缓存。而内置在HTML中额JavaScript和css会在每次请求中随HTML文档重新下载。这虽然减少了HTTP的请求次数，却增加了HTML文档的大小。

2.减少cookie的体积

使cookie尽可能的小以减少用户的响应时间

3.样式文件放在顶部，js文件放在底部

外部的JavaScript文件会阻塞其后资源的下载，并且浏览器是下载完全部的css后才会对页面进行渲染，加载js后则立即执行。

4.减少http请求次数

1. 合并文件：把所有的脚本放到一个文件中来减少http请求。
2. 使用浏览器缓存。
3. 使用CSS Sprites精灵图：把所有背景图像都放到一个图片文件中，然后通过CSS的background-image和background-position属性来显示图片的不同部分。

HTML5应用程序缓存和浏览器缓存有什么区别？

• H5引入了应用程序缓存，意味着WEB应用可进行缓存，可以在没网的时候进行访问，它的优势：
  1. 离线缓存：可以在离线时使用
  2. 加载速度更快
  3. 减少服务器的负载：浏览器只从服务器上下载更新的资源，一样的资源不变。
• 浏览器缓存也是缓存了请求到的资源，但是离线不能访问。