怎样优化网页性能

[问答题]

怎样优化网页性能

菜鸟葫芦娃

优化方向	优化手段
请求数量	合并脚本和样式表，CSS Sprites，拆分初始化负载，划分主域
请求带宽	开启 GZip，精简 JavaScript，移除重复脚本，图像优化
缓存利用	使用 CDN，使用外部 JavaScript 和 CSS，添加 Expires 头，减少 DNS 查找，配置 ETag，使 AjaX 可缓存
页面结构	将样式表放在顶部，将脚本放在底部，尽早刷新文档的输出
代码校验	避免 CSS 表达式，避免重定向

来自百度专家:

来自w3cteach:

编辑于 2016-11-24 08:18:13 回复(0)

编程使我快乐

压缩源码和图片

JS 文件源代码可以混淆压缩，CSS 普通压缩即可，JPG 图片根据具体生产环境可以压缩为原来的50%左右，PNG 图片可以把24色变为8色、去掉一些格式信息等
合适的图片格式

图片占网站的流量比重很大，如果颜色数较多选用 JPG，颜色数教授使用 PNG，另外可以根据浏览器的支持情况使用 WebP 或 SVG 格式
静态资源的合并

浏览器常常限定了对同一域名发起的并发连接数的上限，所以我们合并合并小图片、CSS、JS 文件，减少 HTTP 请求
使用 Gzip 压缩

文本资源的Gzip压缩比很可观，不过图片资源没有很高的压缩比例
使用 CDN 引入开源库、图片

使用一些开源库、第三方的静态资源地址（jQuery、Moment.js、bootstrap等）。一方面可以增加并发下载量，另一方面可以和其他网站共享内存。另外图片也有 CDN 加速，国内有很多图片云存储提供商
延长静态资源的缓存时间

使用缓存，频繁访问网站的访客可以更快地访问。当需要更新资源的时候，可以通过修改文件名的方式，使得用户能拉取到最新内容
CSS 放置在页面头部，JS 放置在页面底部

资源文件这样放置不会阻塞页面渲染，页面不会出现长时间的空白