文档介绍：Web 前端优化----- 李家庆 PS :以下内容包含网上资源的整理概括和自己的一些粗浅的看法。一、资源的加载的优化一个网页中包含众多的的资源文件,例如最基本的 html 文件、 css 样式文件、 js 文件、图片资源文件等,然而每一个资源文件都需要一个请求才能去加载,然后才能发挥起作用, 在请求的过程中都会消耗一定时间去得到资源的确认, 所以在资源的加载上可以做出一些的优化。 1. 合并多个外部的 css 文件,减少资源的请求; 2. 合并多个外部的 js 文件,减少资源的请求; js 文件放底部或是在加载的时候加上 defer , 但是 Google 的建议是等待页面加载完成后再加载外部的“ ”; 4. 较小的 css 文件或 js 文件,可以将代码直接插入到 html 页面中; 5. 避免 css 中的***@import 式的引入别的 css 文件,直接使用<link > 标签来请求 css 文件; 6. 避免使用 来调用 js 资源,而直接使用<script src= ””> 来调用资源; css sprites 工具来整合小像素的图片, 然后使用的时候用 css 定位来使用图片, 而达到减少图片资源的请求; 8. 指定图像的尺寸,因为从服务器中请求的图像尺寸与页面显示的尺寸不符的情况下, 当页面加载完成的时候,浏览器需要将图片的尺寸进行重新的调整,消耗一定的时间; 二、请求的优化 1. 避免坏的请求, (包括 404 请求不到的页面)例如找不到某个图片资源,浏览器会再三次向服务器发出请求, 已确认是否丢失资源或是资源真的不在, 这其中就会消耗较多的时间; 2. 延迟 js 文件的加载请求,因为 js 文件在加载的时候,页面会停止处理,所以延迟加载 js 文件, 先加载 css 样式文件及页面的内容, 可以更快的将内容信息呈现给用户, 而后加载 js 文件。如果页面长的情况下,尽量将 js 文件放在第一屏内容和样式加载完成后再加载 js 文件。 3. 使用 keep-alive , http 协议采用“请求- 答应”模式, 每个请求答应都要重新建立连接, 完成后又断开, 普通的默认方式是非 keep-alive 模式的, 要手动开启, 这样可以减少请求的次数; 4. 尽量减少 DNS 的查询次数; 三、其他优化 1. 启用 gzip 对 html 的压缩,可以压缩 50%-70% 以上,减少带宽和时间; 2. 减少重定向资源, 一个资源或页面访问到一半, 转向访问别的页面资源, 会耗费很多的时间; 3. 减少 DOM 元素的使用,可以使 js 遍历元素更快。 4. 使用 CDN (内容分发网络) ,一个服务器对只允许某个页面一定数量的请求资源,无法实现所有资源并行加载, 所以讲网页的资源放在不同的服务器中可以实现更多资源的并行加载; 5. 利用浏览器缓存, 让浏览器将已加载的 css 、 logo 和其他资源“记住”, 即放在浏览器缓存中。这个方法对网站的再次访问体验改进明显,在我们 4399 的首页首次打开时和再次刷新打开时,差别蛮大的,主要还是图片资源的加载,当这些大量的图片被浏览器缓存后, 再次打开速度快了不少。 6. 压缩 css 代码