懒加载与预加载

页面加载流程 ：

 html文件下载-》head要求资源解析完成-》加载资源-》dom树渲染

资源加载细节：下载html-》解析资源需要，给资源排队-》按照排队，一次发出请求（但不是等上个请求返回）

 

页面资源如何加载：

1.资源的加载根据浏览器的不太有细微差别，大多数是大同小异，唯独ie6，是阻塞

2.一般来说script和css资源是优先图片资源

3.一般来说script会阻塞后面的资源加载和渲染

4.请求时并发的，但是有最大并发限制

所以对于资源我们可以做如下事情

1.渲染相关的资源放在head

2.有依赖关系的要注意先后顺序

2.大的执行长的js程序，异步加载 defer asnc

 

懒加载：

按非必要的资源延后加载 ，原理是等到需要的时候用js去加载

应用：首屏内容过多，一次加载耗时，让用户尽快看到页面

     用户后续事宜某个需要大量资源（比如地图，聊天）

预加载

先用遮罩遮住，

应用：需要流畅体验的应用

 

webpack 模块懒加载：

es6方式  ：component:() => import ('@components/HelloWorld')    import 前面还可写注释，指定打包后的js名字

require方式:component:() =>resolve=>require.ensure([], ()=>resole(require('@components/HelloWorld')))

 

打包：  vue npm run build 生成的dist 文件下面的文件

vendor.js 第三方js 

app.js  自己业务逻辑

manifest：webpack 配置代码

 

 

前端还有哪些可以优化：

1.代码层面的优化

    闭包常驻内存

    代码复杂度

 

2.http层面的优化（经验累计）

   尽量缩小请求体积

  尽量减少请求次数

 

3.服务器层面的优化

  cdn 加速（分配最近的服务器）

4.架构层面的优化

  页面缓存 数据缓存  前后端耦合台紧密，中间加一层 node  （淘宝就是用node 做中间层）

   v8