前端优化技术页面加载速度快的方法

　　页面的加载速度直接相关着用户的体会。研讨标明，用户最满足的翻开网页时刻是25秒，假如等候超越10秒，99的用户会封闭这个网页。那么怎么优化网页的加载速度呢，下面将从几个方面解说。
　　1。削减HTTP恳求
　　兼并脚本和款式表
　　将多个款式表或脚本文件兼并到一个文件中，能够削减HTTP恳求的数量然后缩短呼应时刻。不过兼并一切的款式文件或许脚本文件可能会导致在一个页面加载时加载了多于自己所需求的款式或许脚本，关于只拜访该网站一个页面的人来说反而增加了下载量，所以在兼并的时分要权衡利弊。
　　字体图标
　　在能够许多运用字体图标的当地咱们能够尽可能运用字体图标，字体图标能够削减许多图片的运用，然后削减HTTP恳求，字体图标还能够经过CSS来设置色彩、巨细等款式。
　　图片地图
　　假定导航栏上有五幅图片，点击每张图片都会进入一个链接，这样五张导航的图片在加载时会发生5个HTTP恳求。可是，运用一个图片地图能够进步功率，这样就只需求一个HTTP恳求。
　　效劳器端图片地图：将一切点击提交到同一个url，一起提交用户点击的x、y坐标，效劳器端依据坐标映射相应
　　客户端图片地图：直接将点击映射到操作
　　经过将多个图片融合到一副图里边，然后经过CSS的一些技能布局到网页上。特别是图片特别多的网站，假如能用CSSSprites下降图片数量，带来的将是速度的提示。
　　咱们可能认为兼并后的图片会比别离图片的总和要大，因为还有可能会附加空白区域。实践上，兼并后的图片会比别离的图片总和要小，因为它下降了图片本身的开支，比如色彩表、格局信息等。
　　2。增加Expires头
　　页面初度拜访者会进行许多HTTP恳求，可是经过运用一个持久的Expires头，能够使这些组件被缓存，下次拜访的时分，就能够削减不必要的HTTP恳求，然后进步加载速度。
　　Expires缺陷：它要求效劳器和客户端时钟严厉同步，过期日期需求常常查看
　　HTTP1。1中引进了CacheControl来战胜Expires头的约束，运用maxage指定组件被缓存多久。CacheControl：maxage1230000若一起拟定CacheControl和Expires，则maxage将掩盖Expires头
　　3。运用CDN
　　假如应用程序Web效劳器离用户更近，那么一个HTTP恳求的呼应时刻将缩短。别的一方面，假如组件web效劳器离用户更近，则多个HTTP恳求的呼应时刻将缩短。
　　CDN（内容发布网络）是一组散布在多个不同地理位置的Web效劳器，用于愈加有效地向用户发布内容。在优化功能时，向特定用户发布内容的效劳器的挑选根据对网络拥堵的丈量。例如，CDN可能挑选网络阶跃数最小的效劳器，或许具有最短呼应时刻的效劳器。
　　CDN还能够进行数据备份、扩展存储才能，进行缓存，一起有助于平缓Web流量峰值压力。
　　CDN缺陷：
　　呼应时刻可能会遭到其他网站流量的影响。CDN效劳供给商在其一切客户之间同享Web效劳器组。
　　假如CDN效劳质量下降了，那么你的作业质量也将下降
　　无法直接操控组件效劳器
　　4。将款式表放在头部
　　将款式表放在头部关于实践页面加载的时刻并不能形成太大影响，可是这会削减页面首屏出现的时刻，使页面内容逐渐出现，改进用户体会，防止白屏。
　　将款式表放在文档底部会阻挠浏览器中的内容逐渐出现。为了防止当款式变化时重绘页面元素，浏览器会堵塞内容逐渐出现，形成白屏。这源自浏览器的行为：假如款式表仍在加载，构建出现树就是一种糟蹋，因为一切款式表加载解析结束之前无需绘之任何东西。
　　5。将脚本放在底部
　　与款式表相同，脚本放在底部关于实践页面加载的时刻并不能形成太大影响，可是这会削减页面首屏出现的时刻，使页面内容逐渐出现。
　　js的下载和履行会堵塞Dom树的构建，所以script标签放在首屏范围内的HTML代码段里会切断首屏的内容。
　　下载脚本时并行下载是被禁用的即便运用了不同的主机名，也不会启用其他的下载。因为脚本可能修正页面内容，因而浏览器会等候；别的，也是为了确保脚本能够依照正确的次序履行，因为后边的脚本可能与前面的脚本存在依靠联系，不依照次序履行可能会发生过错。
　　6。紧缩组件
　　从HTTP1。1开端，Web客户端能够经过HTTP恳求中的AcceptEncoding头来表明对紧缩的支撑
　　假如Web效劳器看到恳求中有这个头，就会运用客户端列出来的办法中的一种来进行紧缩。Web效劳器经过呼应中的ContentEncoding来告诉Web客户端。
　　7。运用外部的JavaScript和CSS
　　内联脚本或许款式能够削减HTTP恳求，按理来说能够进步页面加载的速度。可是在实践情况中，当脚本或许款式是从外部引进的文件，浏览器就有可能缓存它们，然后在今后加载的时分能够直接运用缓存，而HTML文档的巨细减小，然后进步加载速度。
　　影响要素：
　　每个用户发生的页面浏览量越少，内联脚本和款式的论据越强势。比如一个用户每个月只拜访你的网站一两次，那么这种情况下内联将会更好。而假如该用户能够发生许多页面浏览量，那么缓存的款式和脚本将会极大削减下载的时刻，提交页面加载速度。
　　假如你的网站不同的页面之间运用的组件大致相同，那么运用外部文件能够进步这些组件的重用率。
　　加载后下载：
　　有时分咱们期望内联款式和脚本，但又能够为接下来的页面供给外部文件。那么咱们能够在页面加载完结止呕动态加载外部组件，以便用户接下来的拜访。
　　8。精简JavaScript和CSS
　　精简就是从代码中移除不必要的字符以削减文件巨细，下降加载的时刻。代码精简的时分会移除不必要的空白字符（空格，换行、制表符），这样整个文件的巨细就变小了。
　　9。削减DNS查找
　　DNS也是开支，一般浏览器查找一个给定域名的IP地址要花费20120毫秒，在完结域名解析之前，浏览器不能从效劳器加载到任何东西。那么怎么削减域名解析时刻，加速页面加载速度呢？
　　当客户端DNS缓存（浏览器和操作系统）缓存为空时，DNS查找的数量与要加载的Web页面中仅有主机名的数量相同，包含页面URL、脚本、款式表、图片、Flash目标等的主机名。削减主机名的数量就能够削减DNS查找的数量。
　　削减仅有主机名的数量会潜在削减页面中并行下载的数量（HTTP1。1标准主张从每个主机名并行下载两个组件，但实践上能够多个），这样削减主机名和并行下载的计划会发生矛盾，需求咱们自己权衡。主张将组件放到至少两个但不多于4个主机名下，削减DNS查找的一起也答应高度并行下载。
　　10。删去重复脚本
　　在团队开发一个项目时，因为不同开发者之间都可能会向页面中增加页面或组件，因而可能相同的脚本会被增加屡次。
　　重复的脚本会形成不必要的HTTP恳求（假如没有缓存该脚本的话），而且履行剩余的JavaScript糟蹋时刻，还有可能形成过错。