网页性能优化

最新推荐文章于 2024-05-17 10:26:37 发布

好_快

最新推荐文章于 2024-05-17 10:26:37 发布

阅读量172

点赞数 1

分类专栏：前端学习文章标签：性能优化白屏首屏

本文链接：https://blog.csdn.net/ZWQ0325/article/details/89006969

版权

前端学习专栏收录该内容

3 篇文章 0 订阅

订阅专栏

一、网页加载流程图

二、白屏与首屏

在这里插入图片描述

2.1 白屏时间

白屏时间：页面开始展示的时间点 - 开始请求的时间点

开始请求的时间点：performance.timing.navigationStart或者标签开始执行的时间
页面开始展示的时间点：标签末尾执行的时间

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <script>
            //测试时间起点
            var StartTime = +new Date();
        </script>
        <title>白屏时间</title>
        <link ref="" href="">
        <link ref="" href="">
        <script>
            //测试时间终点
            var endTime = +new Date();
        </script>
    </head>
    <body>
        <h1>白屏时间</h1>
    </body>
</html>

原理：按照文档流从上到下解析，边解析边显示
在这里插入图片描述

最终得到
白屏时间：endTime - performance.timing.navigationStart/startTime（不支持performance时）

2.2 首屏时间

首屏时间：首屏加载完成的时间点 - 页面开始请求时间点

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>白屏时间</title>
        <script type="text/javascript">
            //开始时间
            window.pageStartTime = Date.now();
        </script>
    </head>
    <body>
        <!-- 首屏可见模块1、2 -->
        <div class="module1"></div>
        <div class="module2"></div>
        <script type="text/javascript">
            //首屏时间
            window.firstScreenTime = Date.now();
        </script>
         <!-- 首屏不可见模块3、4 -->
        <div class="module3"></div>
        <div class="module4"></div>

    </body>
</html>

最终得到
首屏时间：firstScreenTime - performance.timing.navigationStart/pageStartTime（不支持performance时）

三、优化方向

3.1 减少请求文件数

每次网络请求比较耗时的过程：

DNS解析和寻址、
服务器建立连接、
发送数据、
等待服务端响应、
接受数据
…

以上过程比较耗时，请求数量变多的时候，页面加载变慢，服务器压力变大。为了避免，尽量减少请求数量，常见的做法有

小图片合并成雪碧图或者iconfont
js、css文件合并

3.2 减少资源体积

减少资源体积从以下角度入手

精简代码
压缩js、css、图片
开启Gzip

其中压缩js、css、图片有2大类方法

在线压缩工具
工具包clean-css、UglifyJS、imagemin

3.3 提高网络传输

使用浏览器缓存
使用CDN

在这里插入图片描述

好_快

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
网页性能优化

一、网页加载流程图二、白屏与首屏2.1 白屏时间白屏时间：页面开始展示的时间点 - 开始请求的时间点开始请求的时间点：performance.timing.navigationStart或者标签开始执行的时间页面开始展示的时间点：标签末尾执行的时间<!DOCTYPE html><html> <head> <me...
复制链接

扫一扫