网站前端性能优化常用几种方式 一、总结 一句话总结： http请求优化（减少cookie体积，减少http请求次数） 加载策略（预加载，推迟加载内容） 静态资源（样式文件放在顶部，把js文件放在底部） 1、JavaScript和CSS是应该放在外部文件中呢还是把它们放在页面本身之内呢？ 放在外部文件中：浏览器会缓存这些文件，单页面也更小，用户访问多个网页的话外部文件可以复用
在实际应用中使用外部文件可以提高页面速度，因为JavaScript和CSS文件都能在浏览器中产生缓存。内置在HTML文档中的 JavaScript和CSS则会在每次请求中随HTML文档重新下载。这虽然减少了HTTP请求的次数，却增加了HTML文档的大小。从另一方面来说， 如果外部文件中的JavaScript和CSS被浏览器缓存，在没有增加HTTP请求次数的同时可以减少HTML文档的大小。
关键问题是，外部JavaScript和CSS文件缓存的频率和请求HTML文档的次数有关。虽然有一定的难度，但是仍然有一些指标可以一测量它。 如果一个会话中用户会浏览你网站中的多个页面，并且这些页面中会重复使用相同的脚本和样式表，缓存外部文件就会带来更大的益处。
因此保持coockie尽可能的小以减少用户的响应时间十分重要。
3、为什么把样式文件放在顶部，把js文件放在底部？ 浏览器是下载完全部CSS后才会对页面进行渲染，加载JS后则立即执行 4、为什么可以为文件头指定Expires或Cache-Control？ 比如静态文件设置为永不过期就可以更好的利用缓存对于静态内容：设置文件头过期时间Expires的值为“Never expire”（永不过期）；
对于动态内容：使用恰当的Cache-Control文件头来帮助浏览器进行有条件的请求。
转自：网站性能优化 - webNick - 博客园
https://www.cnblogs.com/puyongsong/p/5968935.html
终端用户响应的时间中，有80%用于下载各项内容，这部分时间包括下载页面中的图像、样式表、脚本、Flash等。通过减少页面中的元素可以减少HTTP请求的次数，这是提高网页速度的关键步骤。
减少页面组件的方法其实就是简化页面设计。那么有没有一种方法既能保持页面内容的丰富性又能达到加快响应时间的目的呢？这里有几条减少HTTP请求次数同时又可能保持页面内容丰富的技术。
1、合并文件：合并文件是通过把所有的脚本放到一个文件中来减少HTTP请求的方法，例如可以简单地把所有的CSS文件都放入一个样式表中。当脚本 或者样式表在不同页面中使用时需要做不同的修改，这可能会相对比较麻烦，但即便如此也要把这个方法作为改善页面性能的重要一步；
2、CSS Sprites：CSS Sprites是减少图像请求的有效方法。把所有的背景图像都放到一个图片文件中，然后通过CSS的background-image和background-position属性来显示图片的不同部分;
3、图片地图：图片地图是把多张图片整合到一张图片中。虽然文件的总体大小不会改变，但是可以减少HTTP请求次数。图片地图只有在图片的所有组成 部分在页面中是紧挨在 一起的时候才能使用，如导航栏。确定图片的坐标和可能会比较繁琐且容易出错，同时使用图片地图导航也不具有可读性，因此不推荐这种方法；
4、内联图像：内联图像是使用data:URL scheme的方法把图像数据加载页面中，这可能会增加页面的大小。把内联图像放到样式表（可缓存）中可以减少HTTP请求同时又避免增加页面文件的大小，但是内联图像现在还没有得到主流浏览器的支持。