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

时间: 2017-10-26阅读: 1044标签: 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,尤其是外部脚本。


web页面录屏实现

如果你的应用有接入到web apm系统中,那么你可能就知道apm系统能帮你捕获到页面发生的未捕获错误,给出错误栈,帮助你定位到BUG。但是,有些时候,当你不知道用户的具体操作时,是没有办法重现这个错误的,这时候,如果有操作录屏,你就可以清楚地了解到用户的操作路径

选择学习Web前端开发的理由

在互联网的影响下,移动互联网产业的发展也突飞猛进,越来越多的企业开始攻击移动互联网的大蛋糕。根据可靠的数据分析,中国对开发商的需求高达200万人,而且数据仍在改善。

关于Web应用开发流程的总结

假设最简单的情况,一个开发人员,开发所有的代码,一个测试人员。一个测试的服务器,一个生产的服务器。开发人员需要为公司开发一个项目,开发人员首先分析产品经理的需求,建立相应的模型,然后进行如下步骤:

站在Web3.0 理解IPFS是什么

文本尝试站在未来Web3.0的高度来看看IPFS究竟用来解决什么问题。IPFS是一项非常激动人心的技术,尽管它仍在发展的早期(区块链也是),还有很多问题需要我们一起解决,如NAT穿透问题,浏览器支持问题,内容存储激励问题,存储数据安全与隐私保护问题。

Web容器_Web服务器及常见的Web容器有哪些?

首先来理解一下简单的一个请求发送到响应的过程。客户端,通常是浏览器或者一些应用发送请求到你的服务器地址,比如访问你的Url或者其他的东西。而我们的服务器通常要分为两个部分,一部分是服务器硬件,有了硬件之后还有有硬件上对应运行的软件。

对W3C标准,对表现与数据分离、Web语义化等有深刻理解

网页主要由三部分组成:结构(Structure)、表现(Presentation)和行为(Behavior)。所以W3C对应的标准也分三方面:结构化标准语言主要包括XHTML和XML,表现标准语言主要包括CSS,行为标准主要包括对象模型(如W3C DOM)、ECMAScript等

Web登录其实没那么简单

一个简单的HTML例子看看用户信息安全:标准的HTML语法中,支持在form表单中使用<input></input>标签来创建一个HTTP提交的属性,现代的WEB登录中,form表单会在提交请求时,会获取form中input标签存在name的属性,作为HTTP请求的body中的参数传递给后台,进行登录校验。

Web集群之全网备份脚本

实现指定目录或文件定时打包到本地的/backup目录以本机IP命名的目录下,并且对打包的文件做md5哈希,然后将哈希的结果写入到当前目录下md5.log文件中,然后将打包的文件推送到backup服务端;还得将7天前的备份文件给删除,每一步的操作都写入到日志中

web前端开发入门_ web前端需要掌握的知识体系

web前端开发入门的知识体系包括哪些东西呢?大致分为:基本工具使用、比如Git/GitHub,编辑器,调试工具等;静态页面功底;JS与JQuery功底;JS进阶,在无人指导的情况下,看书是一种学习途径。比如《JS高级程序设计》《权威指南》是前端开发者必看书籍。

Atag - Web Components 最佳实践

上一次社区中谈论起 Web Components 已经可以追溯到三四年前了,彼时 Web Components 仍处于不稳定的草案阶段,Polymer 的出世使大家似乎看到了新一代的前端技术,但直到今天,在今年五月 Google I/O 发布 Polymer 3 之后

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

广告赞助文章投稿关于web前端网站点搜索站长推荐网站地图站长QQ:522607023

小程序专栏: 土味情话心理测试脑筋急转弯