性能优化-页面文件加载

最新推荐文章于 2020-05-12 09:42:58 发布

小笼包是馒头

最新推荐文章于 2020-05-12 09:42:58 发布

阅读量162

点赞数

分类专栏：前端杂项文章标签：性能优化页面加载 JS加载 Css加载

本文链接：https://blog.csdn.net/xiaolongbaobushibao/article/details/89499062

版权

前端杂项专栏收录该内容

13 篇文章 0 订阅

订阅专栏

前言

页面阻塞加载JS，上来就是干随便放是要影响性能的。

解决方式

1、调整JS顺序

将<script>标签放到页面底部</body>标签之前，页面渲染完再加载脚本

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<script type="text/javascript" src="script1.js" ></script>
<script type="text/javascript" src="script2.js" ></script>
<script type="text/javascript" src="script3.js" ></script>
</body>
</html>

2、合并文件、CDN加速、代码压缩、雪碧图

合并文件：浏览器允许的并发请求资源数（同域）有限制，如果文件太多，多次请求会浪费时间。

一般打包工具都支持多个文件合并成一个文件。

CDN加速：有些公用工具，可以使用CDN资源，不受当前域请求资源数限制，网络速度也会比较稳定。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link href="https://libs.baidu.com/twitter-bootstrap/4.3.1/css/bootstrap.css" rel="stylesheet">
</head>
<body>
<script type="text/javascript" src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js" ></script>
<script type="text/javascript" src="script1.js" ></script>

</body>

</html>

代码压缩：100K的代码压缩下就几K，缩短下载时间

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<!-- <link href="https://cdn.bootcss.com/twitter-bootstrap/4.3.1/css/bootstrap.css" rel="stylesheet">
-->
<link href="https://cdn.bootcss.com/twitter-bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">
<body>

<!-- <script type="text/javascript"  src="http://libs.baidu.com/jquery/2.0.0/jquery.full.js" ></script>-->
<script type="text/javascript"  src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js" ></script>
</body>

</html>

雪碧图

CSS sprite音译,同可口可乐的雪碧。将很多小图标放到一个图片，通过css定位显示指定坐标的部分图片。类似看报纸，一张报纸不同区域显示不同内容。

3、动态加载OR按需加载

动态加载

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<script type="text/javascript">
	window.onload = function () {
		var script = document.createElement("script");
		script.type = "text/javascript";
		script.src = "script1.js";
		document.getElementsByTagName("head")[0].appendChild(script);
	}
</script>
</body>

</html>

按需加载

一般来说这种情况在单页应用比较常见，等有需要的时候再插入 <Script/>

4、多用非阻性代码

异步请求使用ajax
慎用 alert、confirm之类的

5、调优工具：window.performance.timing

性能分析工具，会把页面加载的所有资源消耗记录下来，具体含义基本上看变量名就可以读懂。参考文章如上,看着分析的数据，再对症下药。

console.log(window.performance.timing)
//结果
{
    "timeOrigin":1556095133494.328,
    "timing":{
        "navigationStart":1556095133554,
        "unloadEventStart":1556095133863,
        "unloadEventEnd":1556095133863,
        "redirectStart":0,
        "redirectEnd":0,
        "fetchStart":1556095133556,
        "domainLookupStart":1556095133557,
        "domainLookupEnd":1556095133557,
        "connectStart":1556095133858,
        "connectEnd":1556095133859,
        "secureConnectionStart":0,
        "requestStart":1556095133859,
        "responseStart":1556095133860,
        "responseEnd":1556095133862,
        "domLoading":1556095133887,
        "domInteractive":1556095136737,
        "domContentLoadedEventStart":1556095136737,
        "domContentLoadedEventEnd":1556095136737,
        "domComplete":1556095137268,
        "loadEventStart":1556095137268,
        "loadEventEnd":1556095137269
    },
    "navigation":{
        "type":1,
        "redirectCount":0
    }
}

比如页面load时间

var perfData = window.performance.timing; 
var pageLoadTime = perfData.loadEventEnd - perfData.navigationStart;

6、Chrome开发者工具

Performance、Memory、Javascript Profiler。
这类的文章很多，搜一下就有了。

毕竟我们都是面向网络编程。

小笼包是馒头

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
性能优化-页面文件加载

前言页面阻塞加载JS，上来就是干随便放是要影响性能的。解决方式1、调整JS顺序将<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body>...
复制链接

扫一扫

专栏目录