web前端面试题附答案009-不改业务逻辑代码不改打包方式，怎么让js加载的更快？

本文链接：https://blog.csdn.net/xingyu_qie/article/details/127138346

后续陆续推出大学生解惑系列文章，欢迎把疑惑发给我

一、这个问题考什么？

是不是有点难为人的意思？也不让去改前端业务代码，也不能改打包方式，那就是提升网速了呗，提升谁的，提升用户的？你怎么提升用户的网速呢？所有还得想一下，从哪些角度去考虑可以提升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>