web前端性能优化--如何提高页面加载速度
对一名前端工作人员来说,性能的优化还是很重要的.
减少http请求
1.图片地图:假设导航栏有多张图片,点击每张图片都会进入一个连接,这样在加载时就会产生多个htttp请求.而此时如果我们用图片地图——所有点击提交到同一个url,同时提交用户点击的x,y坐标,服务端再根据坐标映射响应,如此一来就只需一个http请求即可,大大提高效率.
2.CSS Sprites: CSS精灵.将多张图片融合到一张图里面,通过css的一些技术布局得到网页上.
3.字体图标:在可以大量使用字体图标的地方我们尽可能使用字体图标,可以减少很多图片的使用,从而减少http请求.
使用CDN
CDN的全称Content Delivery Network,即内容分发网络.其基本思路就是尽可能避开互联网上有可能影响数据阐述速度和稳定性的瓶颈和环节,使内容传输更快/更稳定.
如果应用程序web服务器离用户更近,那么一个http请求的响应时间将缩短.
CDN(内容分发网络)是一组分布在多个不同地理位置的web服务器,用于更加有效的向用户发布内容. CDN系统能够实时地根据网络流量(网络上传输的数据量)和各节点的连接、负载状况以及到用户的距离和响应时间等综合信息将用户的请求重新导向离用户最近的服务节点上。其目的是使用户可就近取得所需内容，解决 Internet网络拥挤的状况，提高用户访问网站的响应速度。
添加Expires
页面的初次访问者会进行很多http请求,但是通过使用一个长久的Expires头,可以使这些组件被缓存,下次访问的时候,就可以减少不必要的http请求,从而提高加载速度.
压缩组件
从HTTP1.1开始,web客户端可以通过HTTP请求中的Accept-Encoding头来表示对压缩的支持 Accept-Encoding:gzip,defalte.
如果web服务器看到请求中这个头,就会使用客户端列出来的方法中的一种来进行压缩.web服务器通过响应中的Content-Encoding来通知web客户端. Content-Encoding:gzip.
将样式表放在头部
将样式表写在头部对于实际页面加载的事件并不能造成太大影响,但这回减少首屏出现的时间,使内容逐步呈现,改善用户体验,防止白屏.
将脚本放在底部
更样式表相同,脚本放在底部对实际页面加载的时间并不能造成太大影响,但会减少首屏出现的时间,是内容逐步呈现.
js的下载和执行会阻塞DOM树的构建(中断了DOM树的更新),所以script标签放在首屏范围内的HTML代码段了会截断首屏的内容.
避免CSS表达式
CSS表达式是动态设置CSS属性的一种强大并且危险的方式,它受到了IE5到IE8之间版本的支持.
用js事件处理机制来动态改变元素的样式,使函数运行次数在可控范围之内.
使用外部的js和CSS
当脚本或者样式是从外部引入的文件时,浏览器就有可能缓存它们,从而在以后加载的时候能够直接使用缓存,而HTML文档的大小减小,从而提高加载速度.
减少DNS查找
域名解析是页面加载的第一步.当我们在浏览器的地址栏输入网址,按回车后,先从域名解析开始,过程是域名解析→发起TCP的3次握手→建立TCP连接后发起http请求→服务器响应http请求,浏览器得到html代码→浏览器解析html代码,并请求html代码中的资源(如css,js图片等)→浏览器对页面进行渲染呈现给用户.
精简javascript
精简就是从代码中移除不必要的字符以减少文件大小，降低加载的时间。代码精简的时候会移除不必要的空白字符（空格，换行、制表符），这样整个文件的大小就变小了。
精简CSS
除了移除空白、注释之外，CSS可以通过优化来获得更多的节省：合并相同的类；移除不使用的类；使用缩写(属性连写)
避免重定向
重定向的含义:将用户从一个url重新跳转到另一个url.
当页面发生了重定向，就会延迟整个HTML文档的传输。在HTML文档到达之前，页面中不会呈现任何东西，也没有任何组件会被下载。
删除重复脚本
在团队开发一个项目时，由于不同开发者之间都可能会向页面中添加页面或组件，因此可能相同的脚本会被添加多次。
重复的脚本会造成不必要的HTTP请求（如果没有缓存该脚本的话），并且执行多余的JavaScript浪费时间，还有可能造成错误。
配置ETag
ETag含义:实体标签(EntityTag)是唯一标识了一个组件的一个特定版本的字符串，是web服务器用于确认缓存组件的有效性的一种机制，通常可以使用组件的某些属性来构造它。
为什么要引入ETag
ETag主要是为了解决Last-Modified无法解决的一些问题：
- 一些文件也许会周期性的更改，但是他的内容并不改变(仅仅改变的修改时间)，这个时候我们并不希望客户端认为这个文件被修改了，而重新GET;
- 某些文件修改非常频繁，比如在秒以下的时间内进行修改，(比方说1s内修改了N次)，If-Modified-Since能检查到的粒度是s级的，这种修改无法判断(或者说UNIX记录MTIME只能精确到秒);
- 某些服务器不能精确的得到文件的最后修改时间。
使Ajax可缓存
什么样的AJAX请求可以被缓存？
POST的请求，是不可以在客户端缓存的，每次请求都需要发送给服务器进行处理，每次都会返回状态码200。（可以在服务器端对数据进行缓存，以便提高处理速度）
GET的请求，是可以（而且默认）在客户端进行缓存的，除非指定了不同的地址，否则同一个地址的AJAX请求，不会重复在服务器执行，而是返回304。
Ajax请求使用缓存
在进行Ajax请求的时候，可以选择尽量使用get方法，这样可以使用客户端的缓存，提高请求速度。