前端优化-Javascript篇(1.脚本放在底部)

JerryC 发布于2019-08-19 14:52 / 2248人阅读

摘要：从本篇博客开始，我会跟大家分享下我关于前端优化方面的学习，由于时间原因每篇博客只能分享一小点内容，一点点深入前端优化的细节。在前端优化这个问题上，最被大家熟知的应该就是雅虎前端优化条军规以及雅虎前端优化条规则。

　　从本篇博客开始，我会跟大家分享下我关于前端优化方面的学习，由于时间原因每篇博客只能分享一小点内容，一点点深入前端优化的细节。
　　做过前端的人都知道，前端优化是一个永远都不会停止的话题(当然，不管是哪个技术，优化总是无止境的)。在前端优化这个问题上，最被大家熟知的应该就是雅虎前端优化14条军规以及雅虎前端优化34条规则。大部分也都已经应用到了实际开发中。而我的分享并不是按照优化建议来进行的，我的计划是整个优化按照不同模块进行划分，分别是Javascript，CSS，HTML还有其他的一些细节。今天就先从Javascript开始。
　　Javascript开篇就跟大家分享一个比较简单的规则————脚本后置，这个是一个最基本的优化策略，我想大家都应该知道，可是我还是想通过实际的例子来加深一下自己的理解，也许在这个简单的事情后面可以挖掘出更多有意思的东西。
　　为了验证脚本后置对前端优化究竟会有多大的影响，我把我的博客作为测试对象，在首页插入下面这个脚本:

function doSomething(n){
    //模拟一个需要执行n秒的脚本
    var start = new Date().getTime() ;
    while((new Date().getTime() - start) < 1000 * n){}
}
//执行5秒
doSomething(5) ;

　　我把这个脚本命名为doSomething.js
　　首先，先来看看脚本前置的情况，下图是脚本前置情况下的网络瀑布图
　　
　　其次，再来看看脚本后置的情况，下图是脚本后置情况下的网络瀑布图
　　
　　

　　通过上面两幅图，结果已经很明显了，虽然现代浏览器已经支持资源的并行下载，但是当脚本阻塞时仍然会阻止其他图片资源和页面的加载，如果站点是一个有很多图片的网站那么这种情况将严重影响用户体验；而脚本后置的话，图片和脚本是并行下载，然后先加载图片和页面然后才执行耗时的脚本，这样就不会阻塞图片和页面的加载。
　　从上面的瀑布图我们还可以看出很多浏览器加载策略方面的东西，通过对比不同浏览器的瀑布图也可以看出各自的加载策略，这方面的知识还需要在摸索，也希望有了解的人来说说不同浏览器之间加载策略的不同。

最后，安利下我的个人博客，欢迎访问: http://bin-playground.top

云服务器 GPU云服务器第1篇 linux脚本 $1 脚本javascript javascript脚本

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/78150.html

提高前端性能的黄金法则

摘要：虽然如此，但是网站前端性能优化的思路基本没变。为什么前端性能如此重要数据显示只有的最终用户响应时间花在了下载文档上。前端性能优化一味奉行最佳实践有时候反而过而不及，所以针对项目的实际情况来优化才是明智的选择。前端近几年变化很大，各种工具，库，框架并发。虽然如此，但是网站前端性能优化的思路基本没变。为什么前端性能如此重要？数据显示: 只有 10%~20% 的最终用户响应时间花在了下载...

keithyau 2019-08-19 17:54 评论0 收藏0
前端性能优化（JavaScript补充篇）

摘要：而像和会增加作用域链的长度，所以也会降低性能。但是用获取一些属性时，会不由自主地强迫队列中的所有渲染事件前不完成。在条件增加时，所带来的性能负担要高于，因此建议使用。它代价昂贵，且容易失控。正巧看到在送书，于是乎找了找自己博客上记录过的一些东西来及其无耻的蹭书了~~~ 小广告：更多内容可以看我的博客以下内容均来自《高性能JavaScript》 JavaScript文件加载 ...

molyzzx 2019-08-19 14:42 评论0 收藏0
前端性能优化（JavaScript补充篇）

摘要：而像和会增加作用域链的长度，所以也会降低性能。但是用获取一些属性时，会不由自主地强迫队列中的所有渲染事件前不完成。在条件增加时，所带来的性能负担要高于，因此建议使用。它代价昂贵，且容易失控。正巧看到在送书，于是乎找了找自己博客上记录过的一些东西来及其无耻的蹭书了~~~ 小广告：更多内容可以看我的博客以下内容均来自《高性能JavaScript》 JavaScript文件加载 ...

taoszu 2019-08-01 14:38 评论0 收藏0
高性能网站搭建-前端性能优化 (附Vue首屏加载时间优化详细方案)

摘要：附首屏加载时间过长详细优化方案首先附一张优化过后的图首屏加载时间从原来的到，测试的个人站点注我在优化项目的时候使用的是。如果是的项目影响也不大，优化的方案是结合服务端和的。前言事实上, 只有10%-20%的最终用户响应时间是发在从Web服务器获取HTML文档并传送到浏览器中的。如果希望能够有效地减少页面的响应时间，就必须关注剩余80%-90%的最终用户体验。--Steve Soud...

xingqiba 2019-07-25 14:47 评论0 收藏0
【前端性能优化】高性能JavaScript整理总结

摘要：然后执行环境会创建一个活动对象，活动对象作为函数运行的变量对象，包含所有局部变量命名参数参数集合和，当执行环境销毁，活动对象也被销毁。高性能JavaScript整理总结关于前端性能优化：首先想到的是雅虎军规34条然后最近看了《高性能JavaScript》大概的把书中提到大部分知识梳理了下并加上部分个人理解这本书有参考雅虎特别性能小组的研究成果，所以跟34 军规有很多相似之处有不当之...

zzbo 2019-08-02 16:01 评论0 收藏0