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

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


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

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

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

Web前端开发的应用和前景:web 1.0到web 3.0

web3.0时代,前端做着前端的工作,尽自己可能去在多端的世界去为用户体验努力,后端去做着后端的工作,去更好的处理数据,利用人工智能?利用爬虫?将数据充分的使用,为用户分析数据,给予用户最想要的数据。

W3C是什么?IETF是什么?

无规矩不成方圆,软件开发当然不能例外。Web开发涉及的厂商和技术非常多,所以必须要有参考的标准,而且需要一系列的标准。Web程序都是通过浏览器来解析执行的,通过页面的展示内容与用户互动,所以Web标准不仅要求各个浏览器都要遵循

如何迁移Flutter项目到Flutter Web?

这篇简单介绍下怎么将一个现有的 Flutter 项目转成 Flutter Web 项目。开始之前先浇一盆冷水,我们理想中的一套代码、多端运行的愿望是要破灭了,至少目前版本的 Flutter Web SDK 是没法做到的

Gavin Wood:创造一个web3.0的加密世界

我最早是以太坊的联合创始人,也是CTO,黄皮书的作者。当开启以太坊时,我们是局外人,关注的焦点更多的是BTC。当时,人们将投身以太坊视为浪费时间和精力。但现在以太坊已经成长起来,进入了完整循环。但与此同时

web页面的回流和重绘

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

Web实现前后端分离,前后端解耦

前后端分离“已经成为互联网项目开发的业界标杆,通过Tomcat+Ngnix(也可以中间有个Node.js),有效地进行解耦。并且前后端分离会为以后的大型分布式架构、弹性计算架构、微服务架构、多端化服务

为什么说 Web 开发的未来在于组件?

预测未来并非易事。在预测社会现象的未来趋势时,我们不能认为未来就是当下现状的简单线性延伸——而 Web 开发就是一种社会现象

web的应用模式

在开发web应用中,有两种模式:1、前后端分离。2、前后端不分离。在前后端分离的应用模式中,我们通常将后端开发的每个视图都成为一个接口。或者API。前端通过访问接口来对数据进行增删改查。

Web前端十种常用的技术

Web前端应用十种常用技术,随着JS与XHTML的应用普及,越来越多的web界面应用技术出现在网站上,比如我们常见的日历控件,搜索下拉框等,这些web界面应用技术大大的丰富了网站的表现形式

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

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

小程序专栏: 土味情话心理测试脑筋急转弯幽默笑话段子句子语录成语大全