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

时间: 2017-10-26阅读: 1945标签: 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.阿里云: 本站目前使用的是阿里云主机,安全/可靠/稳定。点击领取2000元代金券、了解最新阿里云产品的各种优惠活动点击进入

2.腾讯云: 提供云服务器、云数据库、云存储、视频与CDN、域名等服务。腾讯云各类产品的最新活动,优惠券领取点击进入

3.广告联盟: 整理了目前主流的广告联盟平台,如果你有流量,可以作为参考选择适合你的平台点击进入

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

Web标准

Web标准不是某一个标准,而是由W3C和其他标准化组织制定的一系列标准的集合。主要包括结构(Structure)、表现(Presentation)和行为(Behavior)三个方面。

成为 Web 开发大师你必须知道的 7 件事情

曾经是这样的,懂点编码,并可以偶尔耍点酷,那么你就会被认为是一个Web开发大师。但是现在,情况再也不是这样的了。Web开发已经朝着主流方向发展,开发人员数量显著增加。

web浏览器基础知识【web前端】

Web浏览器的主要功能是展示网页资源,即请求服务器并将结果展示在窗口中。地址栏输入URL到页面显示经历的过程、浏览器的主要组件、浏览器渲染...

web的应用模式

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

Web集群之全网备份脚本

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

web安全漏洞种类以及对应方案

SQL注入、XSS跨站脚本攻击、CSRF跨站请求伪造、越权访问、任意文件上传、任意文件读取、任意文件包含、任意代码执行、撞库攻击、用户名/口令爆破、注册模块设计缺陷、短信接口设计缺陷

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

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

Web发展简史

Web架构: 用超文本技术(HTML)实现信息与信息的连接HTML:HyperText Mark-up Language,即超文本标记语言或超文本链接标示语言, 用统一资源定位技术(URI)实现全球信息的精确定位

web开发,关于XSS的介绍和案例分析

XSS攻击的全称Cross Site Scripting(跨站脚本攻击),为了避免和样式表CSS混淆而简写为XSS。XSS恶意攻击者往Web页面里插入恶意Script代码,当用户浏览该页之时,嵌入其中Web里面的Script代码会被执行,从而达到恶意攻击用户的目的。

Web 研发模式的演变

Web 1.0 时代,非常适合创业型小项目,不分前后端,经常 3-5 人搞定所有开发。页面由 JSP、PHP 等工程师在服务端生成,浏览器负责展现。这种模式的好处是:简单明快

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

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

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