Web 前端优化技术——让你的页面打开速度飞快

1. 削减 HTTP 恳求

兼并脚本和样式表 将多个样式表或脚本文件兼并到一个文件中,能够削减 HTTP 恳求的数量然后缩短呼应时刻。不过兼并一切的样式文件或者脚本文件可能会导致在一个页面加载时加载了多于自己所需求的样式或者脚本,关于只访问该网站一个页面的人来说反而增加了下载量,所以在兼并的时分要权衡利弊。

2. 增加 Expires 头

页面初度访问者会进行许多 HTTP 恳求,可是通过运用一个持久的 Expires 头,能够使这些组件被缓存,下次访问的时分,就能够削减不必要的 HTTP 恳求,然后进步加载速度。

Web 前端优化技术——让你的页面打开速度飞快

3. 运用 CDN

假如应用程序 Web 服务器离用户更近,那么一个 HTTP 恳求的呼应时刻将缩短。另外一方面,假如组件web服务器离用户更近,则多个 HTTP 恳求的呼应时刻将缩短。

4. 将款式表放在头部

将款式表放在头部关于实践页面加载的时刻并不能形成太大影响,可是这会削减页面首屏出现的时刻,使页面内容逐渐出现,改善用户体会,避免“白屏”。

将款式表放在文档底部会阻止浏览器中的内容逐渐出现。为了避免当款式变化时重绘页面元素,浏览器会阻塞内容逐渐出现,形成“白屏”。这源自浏览器的行为:假如款式表仍在加载,构建出现树便是一种糟蹋,因为一切款式表加载解析结束之前无需绘之任何东西。

5. 将脚本放在底部

与款式表相同,脚本放在底部关于实践页面加载的时刻并不能形成太大影响,可是这会削减页面首屏出现的时刻,使页面内容逐渐出现。

js 的下载和执行会阻塞 Dom 树的构建,所以>

6. 紧缩组件

从 HTTP1.1 开始,Web 客户端可以通过 HTTP 恳求中的 Accept-Encoding 头来表明对紧缩的支撑

7. 运用外部的 JavaScript 和 CSS

内联脚本或许款式可以削减 HTTP 恳求,按理来说可以进步页面加载的速度。然而在实践情况中,当脚本或许款式是从外部引进的文件,浏览器就有或许缓存它们,然后在今后加载的时分可以直接运用缓存,而 HTML 文档的巨细减小,然后进步加载速度。

8. 精简 JavaScript 和 CSS

精简便是从代码中移除不必要的字符以削减文件巨细,下降加载的时刻。代码精简的时分会移除不必要的空白字符(空格,换行、制表符),这样整个文件的巨细就变小了。

9. 削减 DNS 查找

DNS 也是开支,通常浏览器查找一个给定域名的 IP 地址要花费 20~120毫秒,在完结域名解析之前,浏览器不能从服务器加载到任何东西。那么怎么削减域名解析时刻,加速页面加载速度呢?

当客户端 DNS 缓存(浏览器和操作系统)缓存为空时,DNS 查找的数量与要加载的 Web 页面中仅有主机名的数量相同,包含页面 URL、脚本、款式表、图片、Flash 对象等的主机名。削减主机名的 数量就可以削减 DNS 查找的数量。

10. 删去重复脚本

在团队开发一个项目时,因为不同开发者之间都或许会向页面中增加页面或组件,因此或许相同的脚本会被增加屡次。重复的脚本会形成不必要的 HTTP 恳求(假如没有缓存该脚本的话),而且执行剩余的 JavaScript 糟蹋时刻,还有或许形成过错。

深入的了解才能更好的学习,千锋重庆web前端培训为学员提供了2周的课程试听,你可以去看看,免费试听一下。


分享到:


相關文章: