后续陆续推出大学生解惑系列文章,欢迎把疑惑发给我
一、这个问题考什么?
是不是有点难为人的意思?也不让去改前端业务代码,也不能改打包方式,那就是提升网速了呗,提升谁的,提升用户的?你怎么提升用户的网速呢?所有还得想一下,从哪些角度去考虑可以提升js加载的速度,然后再刨除改业务逻辑代码,改打包方式这2种不就行了
二、哪些方法可以提升?
<thml>
<head>
<title>title内容</title>
</head>
<body>
<div id="app"></div>
<script src="app.css"></script>
<script src="app.js"></script>
<script src="chunk.js"></script>
</body>
</html>
1、上面的是基础代码,是理想的情况,但实际情况却复杂的多,如果app.js顶部有其他需要执行的js片段,那么就会主js就会加载的慢
2、css的加载会影响主js的加载吗?当然会,html dom树是js + css的结合体,所以css加载的慢了,主js和css配合的过程就会变长,也会让用户觉得LCP指标变长
3、如果主js前面有一些依赖js,如vue.min.js这些,也会有影响,但这个几乎就没有办法了,但如果是其他外部js呢,最好还是放到主js下面,或者给其加上async,希望其可以变成异步加载
4、如果主js体积变小了,是不是就加载的也快了呢,那怎么变小呢?没压缩的压缩一下,压缩前删一些代码,但是面试官说不让我们改业务逻辑
5、通过webpack打包工具,将主js拆分一下,做一下首屏需要的js体积小一些,非首屏的懒加载一下,但面试官也说了不让改打包命令
6、dns域名预解析,上面的案例只是写了最基础的,其实主js应该是带有域名的,dns预解析可以在js加载的时候提前解析域名,使解析域名这一步尽量节省时间,这里主要是dns-prefetch
<head>
......
<link rel="dns-prefetch" href="//www.jsdomain.com">
</head>
<body>
<div id="app"></div>
<script src="//www.jsdomain.com/js/app.js"></script>
......
</body>
7、做了域名预解析,还需要对应的添加主js预加载,我们知道js都是从服务器压缩,下载下来,然后浏览器解压缩,解析,浏览器的性能现在都很强大了,所以从服务端下载这个过程就很重要,也比较耗时。所以提前预加载,可以让浏览器下载,解析,等到最下面script标签的时候,几乎就剩下执行了,这里主要是preload
<head>
......
<link rel="dns-prefetch" href="//www.jsdomain.com">
......
<link rel="preload" href="//www.jsdomain.com/js/app.js" as="script">
</head>
<body>
<div id="app"></div>
<script src="//www.jsdomain.com/js/app.js"></script>
......
</body>
三、面试官这么问意图是什么?
你想啊,如果你入职成功了,想让你做一些性能优化的工作,那么你先读代码,改代码,改打包命令,谁这么心大敢让你改。而且性能优化嘛,肯定是有指标数据考量的,整天给领导汇报我们做了什么,但领导不关心你做了什么,他更关心你指标数据提升了多少。所以我们要尽最大可能的少动代码而尽快的提升指标数据。