前端页面优化：如何更快速将你的页面展示给用户？

本文链接：https://blog.youkuaiyun.com/tzllxya/article/details/90644736

本文探讨了前端页面优化的重要性，包括请求优化、ajax局部加载数据、预加载、资源合并、引用优化、单独域名存放资源、离线存储和本地存储等方面，旨在减少不必要的请求，提高页面加载速度，提升用户体验。通过实例和技巧，阐述了如何运用这些方法来优化前端性能，以达到更快地展示页面内容给用户的目标。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

现在许多公司往往注重后端优化，而忽略了前端优化想想如果辛苦优化了服务器，后台，排查了sql，却在最后页面加载展示的时候很慢，也得不偿失其实，前后台优化都是相辅相成的
后台优化好了，响应请求速度快，前台展示的更迅速，前台优化了不必要的请求，后台压力也会更小。

首先我们来优化HTTP请求数

由于用户浏览的，往往只是局部网页，
所以只加载用户可视范围内的资源，就会减少一些不必要的请求，也会减少浏览器加载资源的消耗
考虑到移动端可视范围，网络流量，性能，延迟加载作用尤为明显

图片延迟加载

适合延迟加载的东西很多，最需要的当然是图片。

图片延迟加载的原理就首先将要延迟加载的图片src替换为空白图片或者参数指定的loading图
然后根据当前元素的位置(offset)来判断是否在页面可视范围(页面宽/高度+滚动宽/高度)

如果在，就将真实图片资源路径替换回src让浏览器加载

防止浏览器解析到HTML中<img>标签的src属性就开始下载资源，最好将原<img>的src属性去掉
统一配置lazyload的参数去加载loading图吧,如我们项目中这样：

 $(".main_content img").lazyload({
                placeholder: "/images/loading.gif",
                threshold:200
            });

再来看到lazyload的源代码，可视范围判断上下左右,写的十分完善

  $.belowthefold = function(element, settings) {
        var fold;

        if (settings.contain