前端开发，页面加载速度性能优化，如何提高web页面加载速度

更新日期: 2017-10-26阅读: 4.5k标签: web分享

复制链接

新浪微博

QQ 好友

扫一扫分享

一个网页访问速度的快慢，不仅看它服务器的配置，这里除去你空间主机配置很烂的情况以外，我们从网站开发方面来探讨，前端技术需要从哪些方面提高访问的速度，需要用到哪些技术手段。

文件的加载

图标的加载:图标尽量使用“sprite雪碧图”或者字体图标，区别就做自适应用字体图标保证缩放的高清度，如果只是Pc端就建议采用雪碧图，通过定位来设置背景图标的显示。

样式的加载：不要使用内联样式，一般除了公用的样式通过外部引用，内部页面的建议在<head>头部通过style的来直接写入。

图片的加载：可以通过预加载或者异步加载的形式，如果是大小比较小的时候，建议采用base64形式写入。

js的加载：js一般都选择在页面尾部加载（建议将.js库文件地址替换成CDN的地址）。如果页面内容不是非重要的，需要seo抓取的，我们可以同ajax的异步模式来获取内容。

按需加载：这个是网站性能优化立竿见影的一项。比如图片：<img src="伪装地址" width="360" height="250" data-src="实际地址">

压缩，精减文件体积

模块公用化：对应页面公用的模块需要采用公共引用，避免重复造轮子，增加不必要的内容。

程序结构：这个需要你有一定的开发经验，如果通过更少，更精炼的代码实现相同的功能。

文件压缩与合并：采用gulp，Grunt，uglify等方式来实现。这里使用方法不做讲解。

GZIP压缩 :可以通过服务器动态脚本进行,也可以更简单的使用apache服务器可以在网站根目录。

其他操作

缓存技术：除了js，css，image浏览器默认都会有缓存外，数据可以先判断缓存是否存在，没有再去服务器请求获取，减少服务器压力的同时，也优化的页面加载。

延迟显示：采用让用户可以更快地看见可见区域的内容，延迟加载或展现可见区域外的内容。

cdn加速：可以让网站内容发布到最接近用户的网络“边缘”，使用户可以就近取得所需的内容，提高用户访问网站的响应速度。

减少http请求量：如果网站收到太多的HTTP请求，它的访客就会有响应时间延迟的体验，这不仅增加了CPU使用率也增加了页面的加载时间。

避免页面堵塞：在脚本执行中，如果过程出现中止，只能完了才会继续原先的加载，就会出现页面堵塞。因此建议避免阻塞型的JavaScript，尤其是外部脚本。