Skip to main content

首屏优化

首屏优化​

个人理解

  • 在<head>标签中使用<script>标签编写document.write('<style>xxx</style>')来编写首屏需要的最最最基本样式
  • 在<head>标签中使用<link>标签配合rel="preload"来加载首屏需要的次要css资源
  • 使用document.write('<style>xxx</style>')
  • 在<body>的最前面编写<div>loading</div>来确保元素最先加载，且不用等待js执行

优缺点

  • document.write实现 0ms级注册
  • preload实现 并行加载
  • 路由懒加载
  • webpcak打包的项目对公共的组件进行抽离，可以设置2次使用以上的组件就进行独立打包
  • 使用现代异步模块加载方案，不再使用webpack传统打包
  • 使用cdn将资源分布存放，静态资源抽离
  • 大图片进行压缩
    • png图片进行亚索
    • 根据客户端系统来尽量加载webp图片
  • 使用UI框架的话，组件注意进行按需引入
  • GZIP
  • 代码压缩
  • 根据具体项目实际情况进行试调

获取当前页面加载时间​

(performance.timing.domComplete - performance.timing.navigationStart)/1000