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

时间: 2017-10-26阅读: 3045标签: web

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


文件的加载

图标的加载:图标尽量使用“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,尤其是外部脚本。


站长推荐

1.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

链接: http://www.fly63.com/article/detial/14

WebAR 如何改变增强现实的未来

增强现实技术在开发人员和智能手机用户中越来越受欢迎,但它还是没有在无所不在的技术中占据一席之地。要体验 AR,用户必须安装专用的程序,但经常会在用过几次后就将其删除,甚至根本去下载它

web开发新手应该知晓的20件事

在我当初刚从事 web 开发的时候,有很多重要的事我并没有事先了解。现在看来,我的很多期望都和现实有很大的差距。在这篇文章里,我会告诉你 20 件事情,这些都是在你准备开始或者刚开始 web 开发不久的时候就应该知晓的

无障碍 Web

Accessibility在 Web 发展的初期,人们习惯把它翻译成无障碍,因为它主要考虑如何让残障人士更容易地访问 Web 内容。诸如有行动障碍的人难以完成需要用鼠标进行的精确手部动作,他们更多的需要靠键盘;

成为Web开发人员的7个简单步骤

你想成为一名Web开发人员,但现在你面前有这样一个问题,那就是你没有在高科技行业工作的经验。你上了一些课程,也花了时间在个人编码项目上

Web前端设计排版小技巧

web设计排版多种多样,如何更好的排版、设计出更符合美学的设计了?设计该如何更好的做好网页设计的布局排版了,今天给大家分享这几个小技巧,希望大家能有所用。

Web前端知识体系精简

Web前端技术由 html、css 和 javascript 三大部分构成,是一个庞大而复杂的技术体系,其复杂程度不低于任何一门后端语言。而我们在学习它的时候往往是先从某一个点切入,然后不断地接触和学习新的知识点,因此对于初学者很难理清楚整个体系的脉络结构。

学习web的方法有哪些

Web技术的参与门槛低,工资高,发展前景良好,已成为近年来的热门岗位,很多IT公司在招聘时都希望招聘会web技术的人员,但是想学好web前端,特别是对于没有基础的初学者来说

Web认证_介绍Web开发中几种常用的认证机制

如今web服务随处可见,成千上万的web程序被部署到公网上供用户访问,有些系统只针对指定用户开放,属于安全级别较高的web应用,他们需要有一种认证机制以保护系统资源的安全,本文将探讨五种常用的认证机制及优缺点。

Web服务常用的几种开发方法

Web服务,即通过程序实现网页服务,服务启动后,一般用户可通过访问URL获取到网站提供的网页服务,如网页浏览、留言、商品购买等。开发Web服务的技术有很多,有Java、Python、ASP.NET、脚本语言等

web页面的回流和重绘

什么是回流? 回流也叫重排(reflow),当页面中的元素发生影响布局的变化,比如:改变宽高,修改显示影藏。页面需要重新布局,就会触发重排。 简单的说就是,页面布局改变,就会触发重排。

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!