js实现一些常用网站的打开速度

Posted 2023-05-04

用js代码实现，比如百-度页面打开速度，然后显示出加载这个网页所需要的时间

不需要写代码，如果你用的是Chrome浏览器，右键审查元素进入到开发控制台中，就有一个timeline的选项，那里可以看到各个资源的加载情况。

如果你就是想看从加载成功到渲染完成的这个时间段，可以在onload事件进行处理。

var time = 0
var timer = setInterval(function()
    time += 1
, 1000)

window.onload = function()
    clearInterval(timer)
    console.log("渲染时间：", time)

正常的代码，渲染都不会太耗时间，真正影响性能的是网络加载，也就是你的Js代码要尽可能轻量，且做到模块之间少冗余。

追问

我是有这个任务，要求用js代码实现。所以必须这么做，就写代码显示一些常用网站的打开时间就可以了，可以帮忙吗？

参考技术A

js并不能实现如此的功能。
因为js文件本身就是被加载进来的，所以当js文件未被加载的时候，它是无法对之前加载进来的文件进行监控的，也就是说js只能在自己已经被加载进来之后，对再次被加载进来的文件进行操作。

如果你只是为了查看加载时间的话，可以在“开发者工具”里面的network里面查看。

前端网站常规优化方案

参考技术A 1、减少请求次数

2、减小资源大小

3、提高响应和加载速度

4、优化资源加载时机

5、优化加载方式

1、合并、压缩、混淆html/css/js文件（webpack实现，减小资源大小）

2、Nginx开启Gzip，进一步压缩资源（减小资源大小）

3、图片资源使用CDN加速（提高加载速度）

4、符合条件的图标做base64处理（减小资源大小）

5、样式表放首部，JS放尾部（JS单线程，会阻塞页面；资源加载方式）

6、设置缓存（强缓存和协商缓存，提高加载速度）

7、link或者src添加rel属性，设置prefetch或preload可预加载资源。（加载时机）

8、如果使用了UI组件库，采用按需加载（减小资源大小）

9、SPA项目，通过import或者require做路由按需（减小资源大小）加载

10、服务端渲染SSR，加快首屏渲染，利于SEO

11、页面使用骨架屏，提高首页加载速度（提高加载速度）

12、使用 JPEG 2000, JPEG XR, and WebP 的图片格式来代替现有的jpeg和png，当页面图片较多时，这点作用非常明显

13、使用图片懒加载-lazyload