前端|页面优化技巧了解下

当前位置：首页 > 技术要点 > 正文

分享到：

前端|页面优化技巧了解下

时间：2022-01-06 14:14 　来源：　作者：

　　学习前端难吗？今天就带大家来了解下，关于前端页面优化的知识点，教你如何更快速将你的页面展示给用户！

src=http-%2F%2Fphotocdn.sohu.com%2F20150806%2FImg418276258.gif&refer=http-%2F%2Fphotocdn.sohu

　　现在许多公司往往注重后端优化，而忽略了前端优化想想如果辛苦优化了服务器，后台，排查了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.container === undefined || settings.container === window) {
            fold = (window.innerHeight ? window.innerHeight : $window.height()) + $window.scrollTop();
        } else {
            fold = $(settings.container).offset().top + $(settings.container).height();
        }
        return fold <= $(element).offset().top - settings.threshold;
    };

    $.rightoffold = function(element, settings) {
        var fold;
        if (settings.container === undefined || settings.container === window) {
            fold = $window.width() + $window.scrollLeft();
        } else {
            fold = $(settings.container).offset().left + $(settings.container).width();
        }
        return fold <= $(element).offset().left - settings.threshold;
    };
    $.abovethetop = function(element, settings) {
        var fold;
        if (settings.container === undefined || settings.container === window) {
            fold = $window.scrollTop();
        } else {
            fold = $(settings.container).offset().top;
        }
        return fold >= $(element).offset().top + settings.threshold + $(element).height();
    };

    $.leftofbegin = function(element, settings) {
        var fold;
        if (settings.container === undefined || settings.container === window) {
            fold = $window.scrollLeft();
        } else {
            fold = $(settings.container).offset().left;
        }
        return fold >= $(element).offset().left + settings.threshold + $(element).width();
    };
    $.inviewport = function(element, settings) {
         return !$.rightoffold(element, settings) && !$.leftofbegin(element, settings) &&
                !$.belowthefold(element, settings) && !$.abovethetop(element, settings);
     };

　　关于图片这里，除了延迟加载外，用户上传的图片以及我们所用的资源图片都应该进行压缩处理。如需要进一步提高压缩率，可以使用例如：google开发的webp图片格式等。不过不是所有浏览器都支持webp格式，需要针对浏览器响应。

　　ajax局部加载数据

　　根据上面这段代码，其实我们就可以延迟加载其他内容了，总之呢，这里我们的目的就是尽量减少不必要的请求。比如现在用的很多的下拉式翻页，就是判断到页面底部之后再ajax获取下页内容

　　如果考虑到网页只是局部更新的话，那使用ajax是很合适的，好处显而易见，无需重新请求整页，小巧快速，网页展示也友好一些。善用ajax对前端性能，体验都是有改善的，但是也要考虑到对搜索引擎的友好，如果页面整体功能改变了，或者页面改动量大就要进行取舍了。

　　预加载

　　延迟加载的目的就是减少不必要的请求，在用户有需求时才请求资源
所以对于用户来说，其实是有一点点“等待”的过程的，一般会用loading图，等待文字来改善这里的用户体验，但是有一些需求是希望尽量少出现这种“等待”过程的。这里我们就可以预加载资源，如下，我们先在js中加载图片

　　var img = new Image();
img.src="test.png";

　　提前加载好了图片，用户进行下一步时，图片则是从浏览器缓存中获取，多页数据也可以类似处理，页面初始可以默认加载两页数据。翻到第二页时，就ajax去获取第三页内容，翻到第三页时，就去获取第四页内容……总是提前预加载一页数据，如此可一定程度上减少一些等待的过程。总的来说延迟加载是尽量少加载资源，预加载则是判断可能要的资源，尽量去提前多加载，都是为了优化用户的体验，适用于不同场景。

　　资源合并

　　我们项目内往往会引用多个javascript脚本，和多个css样式文件。所以可以把多个脚本合并到一个js文件内，然后统一引用它就能减少http请求，这里uglify-js和 clean-css 都支持多个文件合并压缩输出。

　　>uglifyjs js1.js js2.js -m -o merge.js

　　>cleancss -o megar.css style1.css style2.css

　　也可以在服务器内合并输出，比如我们看淘宝的合并：

　　他们则是在web服务器内做了处理，请求多个文件，会自动合并
有条件的同学也可以这样进行合并

　　引用优化

　　引用css放在<head>内，引用js放在</body>结束标签前，现在很多朋友都会这么做了。css加载是异步的，更早的加载出样式就能更早呈现出页面。js放在尾部，防止浏览器加载js而阻塞页面，造成页面“白屏”现象。

　　单独域名存放资源

　　如果有条件的话，我们还可以启用额外的服务器，域名来存放资源。这样能减少主域名的HTTP请求数，让主服务器更快响应请求。还能减少主域名的cookie请求。

　　在日前市场需求如此之大的环境下，能不能够高薪就业，最终还是看你能不能真正掌握到实用的web前端开发技术！

　　如果你想切实了解掌握，那就来千锋深圳Web前端培训，这里有专业的老师带你，手把手教你做项目，让你可以快速入门，高效学习，毕业后实现高薪梦想更是很简单。