前端设计师---优化页面的加载速度

一:从脚本入手的优化:

删除javascript中不必要的注释,简洁优化代码是必须养成的好习惯,尽量不要将函数的调用直接加在HTML标签中<div onclick="">这种用法不被提倡。尽量使用js动态添加,减少标签污染,提高代码的可复用性。

合并相似的js代码,或者可以直接封装成函数,既提高代码复用性,又省去加载脚本的时间。

引入JavaScript 编写的 jQuery 插件Lazy Load,它可以延迟加载长页面中的图片。在浏览器可视区域外的图片不会被载入,直到用户将页面滚动到它们所在的位置。例如本人的破折君博客就采用这个图片延迟加载功能。

Script中的Defer属性

如果是编写脚本的时候加入defer属性,那么浏览器在下载脚本的时候就不必立即对其进行处理,而是继续对页面进行下载和解析,这样会提高下载的性能。
这样的情况有很多种。比如你定义了很多javascript变量,或者在引用文件(.inc)中写了很多的脚本需要处理,那不妨在这些脚本中加入defer属性,对性能的提高肯定有所帮助。

二:从HTML标签入手的优化:

HTML标签中一些默认的属性可以省略,例如<input type="text">可以不用写,input的默认属性即为text。例如<form method="get">可以省略,因为默认属性就是get.

<head>中字符集以及<meta>字符编的完整准确定义与声明会减少页面加载过程中的渲染次数,

三 :从CSS入手的优化:

标签的CSS样式中,img标签的height和width如果提前设定的话,会在浏览器加载页面时省去计算图片尺寸,从而提高页面的加载速度。

直接使用例如sass,compass这种CSS工具,减少代码的冗余。

整合CSS代码:比如margin-left:0px;margin-right:10px;;margin-top:20px;写成margin:20px  10px 0 0 ;

使用雪碧图工具Sprite将同类的图片整合在一起,减少页面的请求加载图片的次数。

提前定义图片的大小,减少加载过程中计算图片大小的时间。

选择合适格式的图片:我们通常都用JPG PNG 或者GIF。

时间: 2024-08-25 02:10:59

前端设计师---优化页面的加载速度的相关文章

Web前端优化,提高加载速度

研究表明:用户最满意的打开网页时间是2-5秒,如果等待超过10秒,99%的用户会关闭这个网页.也许这样讲,各位还不会有太多感触,接下来我列举一组数据:Google网站访问速度每慢400ms就导致用户搜索请 求下降0.59%;Amazon每增加100ms网站延迟将导致收入下降1%;雅虎如果有400ms延迟会导致流量下降5-9%.网站的加载速度严重影响了用户体验,也决定了这个网站的生死存亡. 可能有人会说:网站的性能是后端工程师的事情,与前端并无多大关系.我只能说,too young too sim

前端性能优化--图片懒加载(lazyload image)

图片懒加载(当然不仅限于图片,还可以有视频,flash)也是一种优化前端性能的方式.使用懒加载可以想要看图片时才加载图片,而不是一次性加载所有的图片,从而在一定程度从减少服务端的请求 什么是懒加载 懒加载怎么个懒法,就是你不想看就不给你看,我也懒得加载出来,懒得去请求.通俗的说就是你不要就不给你,怎么地.举个栗子,比如在进入某个页面的时候,它会有许多的图片,有些图片可能在下面,当我们点进页面但没有滑动下去或没看完整个页面,那么下面的图片就会"没用",加载了也白加载,而且还降低了网页的加

【前端开发】提高网站加载速度

尊重原创:但是出处不明...... YSlow是yahoo美国开发的一个页面评分插件,非常的棒,从中我们可以看出我们页面上的很多不足,并且可以知道我们改怎么却改进和优化. 仔细研究了下YSlow跌评分规则主要有12条: 1. Make fewer HTTP requests 尽可能少的http请求..我们有141个请求(其中15个JS请求,3个CSS请求,47个CSS background images请求),多的可怕.思考了下,为什么把这个三种请求过多列为对页面加载的重要不利因素呢,而过多的I

关于页面的加载速度

关于页面的加载速度 ??12月初的时候,刚刚换完项目组的我终于迎来了自己独立完成的第一个项目:旅游产品活动页面.这是目前我接手的独立完成的最大的一个项目. 整个项目周期大约为两个礼拜,内容包括: 根据活动时间判断一键领取多个优惠券; 九宫格式抽奖及轮播中奖信息; 根据时间轴返回每天的秒杀数据; 遍历不同的产品列表等... ??其实整个项目看起来真的没有什么,而且有些功能自己之前也是写过的,但是真正自己做的时候却漏洞百出,今天先不说那些小错误小漏洞,说一下自己千辛万苦写完的页面遇到的最大的问题:加

如何优化网页的加载速度

1.优化图片资源的格式和大小 一个网页中,图片资源的大小占比是最多的,而且单个的文件的大小也很可观.因此,在保证图片质量不变的情况下,尽可能的使用高压缩率的图片格式,图片格式可以按照这个优先级选择webp > jpeg > png > bmp.同时也要根据图片展示尺寸来拉取大小最为匹配的图片资源,不要没事就把原图拉下来使用.以前我就遇到过这种情况,一个196*196大小区域展示的图片,它的文件竟然达到了几兆,最后才发现把1960*1960分辨率的原图拉下来了. 2.开启网络压缩 大部分浏

如何有效的优化网页的加载速度?优化网页速度的7种方法

首先,我们来看下网页的加载流程.打开一个网页,会先拉取一个html页面,然后浏览器解析了这个html页面后,会根据页面的内容,去拉取javascript.css和图片文件,最终根据这些文件,将页面渲染出来. 我们可以看到,影响一个网页展示速度的主要因素不是网页本身,而是它依赖的一些其它文件,如果优化了这些资源的加载速度,那么网页展示的速度也就上去了. 让我来一一列举: 1.优化图片资源的格式和大小 一个网页中,图片资源的大小占比是最多的,而且单个的文件的大小也很可观.因此,在保证图片质量不变的情

前端技术-HTML页面的加载

HTML页面的加载 HTML页面的加载实际上是基于http过程+浏览器对数据的解析渲染. http协议的请求过程是基于TCP协议的.http是要基于TCP连接基础上,简单的说,TCP单纯建立连接,不涉及任何我们需要请求的实际数据,简单的传输.http基于TCP建立的连接来收发数据,即实际应用上来的. 一个HTML页面的加载的交互流程大致如下: 0.输入URL1.解析URL2.构造并发送HTTP请求服务器的永久重定向响应(从 http://example.com 到 http://www.exam

前端性能优化 - 资源预加载

转帖: https://css-tricks.com/prefetching-preloading-prebrowsing 当提到前端性能优化时,我们首先会联想到文件的合并.压缩,文件缓存和开启服务器端的 gzip 压缩等,这使得页面加载更快,用户可以尽快使用我们的 Web 应用来达到他们的目标. 资源预加载是另一个性能优化技术,我们可以使用该技术来预先告知浏览器某些资源可能在将来会被使用到. 引用 Patrick Hamann 的解释: 预加载是浏览器对将来可能被使用资源的一种暗示,一些资源可

前端性能优化 – 资源预加载

导语    当提到前端性能优化时,我们首先会联想到文件的合并.压缩,文件缓存和开启服务器端的 gzip 压缩等,这使得页面加载更快,用户可以尽快使用我们的 Web 应用来达到他们的目标. 资源预加载是另一个性能 当提到前端性能优化时,我们首先会联想到文件的合并.压缩,文件缓存和开启服务器端的 gzip 压缩等,这使得页面加载更快,用户可以尽快使用我们的 Web 应用来达到他们的目标. 资源预加载是另一个性能优化技术,我们可以使用该技术来预先告知浏览器某些资源可能在将来会被使用到. 引用 Patr