WEB前端工程师须知的网页优化技巧，你了解几个

现在人们关于网页的阅读速度要求越来越高，而许多程序员在功能优化模块技能单薄，今日给咱们共享一些前端网页的功能优化技巧，期望能对咱们有一点协助

终端用户呼应时刻80%耗费在前端，而大部分时刻都是在下载页面的资源:图片，脚本，flash等等，削减恳求资源简化页面规划成为了功能提高的要害。尽量兼并CSS、JS及图片文件，削减HTTP恳求。

1. 设置header的过期时刻，使内容能够缓存

这个规矩能够从两个方面来看:

关于静态组件，完成"永不过期"的方针，经过设置一个较长时刻的Expires头，例如图片，flash;

关于动态组件:运用恰当的Cache-Control头来处理不同的恳求，如CSS,JS等。

关于次拜访网站的用户来说，图片资源等都是固定不变的，设置为永不过期的Expires头能够在客户端缓存，削减服务端的负载以及恳求数量，而JS，CSS资源能够设置一个恰当的过期时刻。

可是实际上咱们会遇到一个应战:假如版别更新导致本来的CSS或JS有改动，怎么保证终端用户是下载的新的资源文件呢?

常用的一种办法，就是每次有改动时生成一个tag然后加在文件名称中，假如有修正文件名就会不一致，客户端就会强制获取新的资源文件，amazon，google等都是这么处理的;当然还有一种办法就是在资源文件目录上打上tag，可是有一种坏处就是关于没有更改的文件客户端也会从头下载对应的资源，假如关于发布较为频频的web项目，用户在初次拜访时就比较耗功能。

2. 运用Gzip紧缩内容

服务端能够把不只是html还有JS，CSS，

3. 款式放在页头

用户在打开一个页面时，阅读器会逐渐的加载头部，导航栏及logo等，在加载过程中用户能看到页面的反应，提高了用户体会。假如款式放在页脚，带来的问题是，包括在IE的许多阅读器上制止逐渐呈现，他们会阻挠烘托，防止页面款式改变而引起重绘页面元素，用户就只能看到一个空白页。

4. 运用内容分发机制

运用内容分发如CDN加快，运用户从离自己近的服务器下载文件。但一般要求削减DNS查询次数，好像一个页面的恳求资源尽量少的运用不同的主机名，能够削减网站并行下载的数量。但许多网站为了加快下载资源特意用了多个主机名，这样能够并行下载资源。在低版别的阅读器IE6,7中并行连接数为4个，高版别的IE8及以上以及现在较新版的chrome，firefox等阅读器都是6个。一般CSS,JS及图片资源均经过CDN加快，而且运用多个主机名来完成并行下载。

一位好的Web前端开发工程师在常识体系上既要有广度，又要有深度，所以许多大公司即使出高薪也很难招聘到抱负的前端开发工程师。那么怎么体系的学习企业有用的web前端技能呢，为此建立了一个web前端的直播上课学习扣扣群，前面数字是五一四，中心的数字是一六七，终是六七八，将数字连接起来就是了。真实想要学习的能够进入，打酱油的就不要糟蹋咱们的时刻了。现在说的要点不在于解说技能，而是更侧重于对技巧的解说。技能非黑即白，只要对和错，而技巧则见仁见智。

5. 防止运用CSS表达式

CSS表达式核算会十分频频，不仅仅是在烘托和resize时会履行，翻滚页面乃至移动鼠标都会从头核算。

6. 外部引证JavaScript和CSS

假如经过引证外部JavaScript和CSS的方法，由于阅读器会缓存这些资源，下次拜访时能够使得页面加载更快，而假如将它们写在HTML中每次拜访页面时都会再次加载。

6. 削减DNS查询

这点与第2点有相似之处，需求做的就是在削减DNS查询次数与并发下载之间做好平衡。

7. JavaScript放在页脚

相关于CSS而言，JS发起放在页脚加载防止阻止其他资源的并行下载，关于内容性质的网站，将内容的HTML放在相对靠前的方位，而关于交互较多的网页，需求把特别重要的中心组件的JS剥离往前放，而不太重要的则在终加载。更具体的关于Javascript的加载请查看上一篇文章:《从两个bug来看网页内容的装载》

8. 精简JavaScript和CSS

删去JS和CSS中的空白换行，注释等，运用混杂把JS中的长变量换成短变量，能够缩小他们的体积，削减恳求数据所占用的网络带宽.

9. 防止重定向

除了在header中人为的重定向之外，网页重定向常在不经意间发作，被重定向的内容将不会运用阅读器的缓存。比方用户在拜访www.xxx.com，服务器会经过301转向到www.xxx.com/，在后面加了一个"/"。假如服务器的装备欠好，这也会给服务器带来额定的担负。经过装备apache的 alias或运用mod_rewrite模块等办法，能够防止不必要的重定向，而在ngingx中也能够直接装备rewrite规矩。

10. 删去重复的脚本

在页面中重复的脚本会增加功能压力，美国20%的抢手网站中都包括有重复的脚本，团队规划和脚本数量增加了呈现重复脚本的几率。在IE中，包括重复的JS脚本会导致阅读器的缓存不被运用，一同增加不必要的恳求(仅在IE，FF下不会呈现重复的恳求)和重复的脚本履行(在IE和FF下都会重复履行)。

11. 装备ETags

ETag是一种服务器和阅读器用于辨认恳求的阅读器已缓存的资源是否与服务端匹配的机制，比last-modified更灵敏，能愈加准确的知道文件是否被修正过，由于If-Modified-Since只能查看秒级的修正，而ETag是一个仅有的字符串，不会遭到修正时刻的约束。

趁便说说阅读器拜访URL时的作业机制:

a. 次拜访url时，用户从服务器段获取页面内容，并把相关的文件(images,css,js…)放在高速缓存中，也会把文件头中的expired time,last modified, ETags等相关信息也一同保存下来。

b. 用户重复拜访url时，阅读器首先看高速缓存中是否有本站同名的文件，假如有，则查看文件的过期时刻;假如没有过期，则直接从缓存中读取文件，不再拜访服务器。

c. 假如缓存中文件的过期时刻不存在或已超出，则阅读器会拜访服务器获取文件的头信息，查看last modifed或ETags等信息，假如发现本地缓存中的文件在前次拜访后没被修正，则运用本地缓存中的文件;假如修正过，则从服务器上获取新版别。

12. 削减DOM节点，加快页面烘托

13. 削减Cookie的巨细

静态资源运用无cookie的域，客户端恳求它们的时分，削减 Cookie 的重复传输对主域名的影响。Yahoo!运用yimg.com,YouTube运用ytimg.com.Amazon运用images-amazon.com

14. 使Ajax可缓存

Ajax假如运用POST恳求的话，阅读器通常会假定用户是提交数据给服务端的，所以天然不会缓存，由于有数据提交就意味着服务端要所处理，而get方法的Ajax恳求却能够缓存，假如对安全性没有特别高要求的能够运用get方法的Ajax恳求。

15. 用LINK而不必@import方法导入款式

16. 给图片加上正确的宽高值，以削减页面重绘，一同能够防止图片缩放

17.防止频频操作DOM节点

过多的操作还可能导致阅读器死机，听说之前twitter就由于在windows.scroll事情的操作中绑定了过多的dom操作而导致阅读器死机

18. 缩小favicon.ico并缓存，许多时分开发者都会疏忽这个文件，可是每逢有用户保藏网站/网页时，阅读器会主动恳求这个文件，就算这个图标文件没有在你的网页中显着阐明，阅读器也会恳求，假如不增加就会呈现404。