Categories


Tags


JavaScript如何影响网站加载速度

当考虑到移动网站排名的时候,我们通常第一个想到的因素就是网站的加载速度。而加快网站加载速度的方式,通常第一个想到的都是从图片的大小入手,这确实非常有效,但是我们经常忽略的影响一个网站加载速度的因素就是JavaScript,这个几乎出现于每个页面代码中的语言。

在网站的代码中,HTML(超文本标记语言)控制网页的结构和内容;CSS(层叠样式表)控制站点在不同设备上的外观和展现形式;JavaScript则使页面更具交互性和动态性。在现在的网站建设中,我们都需要用到JS来让网页具有我们期望的功能。但是JS在满足我们对功能的需求的同时,也对站点的加载速度产生了影响。在过去的五年中,仅移动网页的平均JS大小已经从101kb增长到了387kb。

JavaScript如何影响网站加载速度 网站优化 站长 好文分享 第1张

JavaScript对站点加载速度的影响是两方面的。

其一,JS代码在网页大小的占比中,仅次于图片,排名第二,这会拖累网页的下载速度;

其二,当下载完毕后,浏览器需要运行该JS脚本,这同样会拖慢页面上其它元素的下载与加载速度,而这些被拖慢的元素可能比JS本身要重要得多。

JavaScript如何影响网站加载速度 网站优化 站长 好文分享 第2张

JS对站点加载速度的影响取决于其类型

从加载形式上来讲,JS可以分为如下几类:阻塞型,内联型,异步加载型以及延后加载型。

1.阻塞型JS

阻塞型JS指的是该JS要与网页同步加载,当浏览器读取网页代码到有JS的这一行时,在下载并处理加载完毕对应的JS之前,下面的代码不会被读取与加载。网页的展现也会一直停止直到JS加载完毕。顺带一提,如果你不指定JS的加载样式,那么JS将会默认为阻塞型加载方式。

2.内联型JS(inline)

内联型JS指的是将JS直接写入网页代码中,而不需要外部调用。这种脚本与阻塞型相同,当浏览器读取到该JS时,会优先加载JS停止后续读取,一直到JS加载完毕。内联型JS与阻塞型JS不同之处在于无需单独下载调用的JS包。

3.异步加载型JS

异步加载型JS允许浏览器在下载解析JS时,同时继续解析后面的代码(分析代码并构建呈现网页)。它的实现方式是为JS赋予HTML中的async属性,告知浏览器无需为了该JS而将其他所有的东西都搁置。

4.延后加载型js

延后加载型js告知浏览器在解析并构建完成页面之前,不要执行该js。实现方式是为该JS赋予defer的属性。

如何优化JS来加快网站加载速度

首先,网站应该尽量减少对js的依赖,JavaScript经常用于执行不能用HTML或CSS完成的任务。随着W3C逐渐将一些js的特性添加到HTML或CSS标准中,并由浏览器实现,这些能用HTML或CSS达成的功能就不要使用JS,因为HTML / CSS一般而言是更高效的。一个有效的例子就是现在的自响应式图片已经无需用JS来实现,CSS和HTML就可以做到。

其次,尽可能的选择异步与延后型JS而不要用内联与阻塞样式。当网站的重要功能或者构建都需要依赖JS时,那么该种JS确实需要用到阻塞样式确保网页功能与展现的完全。而实现其他作用的JS,应当使用异步与延后型JS,确保网页首先加载于用户面前。

第三,减少JS数量。现今的绝大多数浏览器最多同时允许六个请求,如果你的网页同步请求数量超过了6个,那么第七个就需要等到其中一个加载完毕才会被执行,这会导致请求与响应的时间更长,拖慢网站速度。

最后,尽量压缩JS大小。JS文件越大,就需要越长的时间来解析与运行。每多一KB,就多1ms是比较合理的估计。最大的搜索引擎—谷歌就建议使用UglifyJS或者Google Closure Compiler工具来减小JS大小。

文章来源:青岛新锐数字传媒 微信公众号:qdnewray 文章地址:http://www.nmedia.net.cn/view_2929.html

来源:卢松松博客


Public @ 2009-02-09 15:37:09

从SEO角度看网站重新设计

1.调整网页标题,使之更明确简洁,有助于SEO优化; 2.优化网页H1标签的内容,描述更准确; 3.添加网页关键词优化,字数要求在125字左右; 4.添加网页描述(Meta Description),让用户和搜索引擎对你的网页有更清晰的认知; 5.添加外部链接,扩大网站曝光率; 6.优化新网站地图,提供搜索引擎蜘蛛爬行你的网站; 7.添加网站内容,让高质量的内容成为网站的基石; 8.优化图片A

Public @ 2023-03-02 06:00:21

如何设计一个成功的网站

1. 确定目标受众: 确定你希望网站吸引的受众群体并了解他们的需求和偏好,以此作为你网站设计的基础。 2. 网站结构的简洁性: 在设计网站时,应该尽量保持简单而清晰的布局和导航,让用户可以直观的理解网站的内容结构和信息架构。 3. 沉浸式体验: 网站设计不应该仅仅是美学和布局,用户体验应该与之紧密结合在一起,通过提供互动功能、引人注目的图片和动画等方式,创造出有趣、有趣和沉浸式的用户体验。

Public @ 2023-06-09 23:50:28

优化你的站点,让它加载的再快一些

你的网站是不是因为所有的大图片而经常加载的很慢?大约需要一个普通的拨号用户多长时间来耐心地等待一个网站在他/她的浏览器上完全加载?60秒?30秒?经统计30秒是可以忍受的,实际上每位用户(尤其是56K或更慢的modem用户)都没有那么大的耐心在线等待,如果网站在20秒或者更短的时间内不能加载他们会点离你的网站。如果你的站点中采用了很多重磅的网络图片和Flash文件(尤其在主页上),你很可能处于极其

Public @ 2016-03-11 15:37:07

决定网站访问速度的几个因素以及优化方向

影响网站访问速度的因素有: 1. 服务器性能:服务器性能越好,网站响应速度就越快。 2. 网络带宽:带宽越大,网站传输速度越快,访问速度也就越快。 3. 网站优化:包括代码优化、图片优化、文本优化等,能够减少访问时间和页面大小,从而提升网站访问速度。 4. 网络拥堵:例如繁忙的路口上,交通堵塞会影响车辆的通过速度,网络拥堵也会影响网站的访问速度。 优化方向: 1. 选择好的服务器和托管服务商

Public @ 2023-04-18 22:00:29

更多您感兴趣的搜索

0.622248s