web前端应该从几个方面来优化性能

ckllj 发布于2019-08-29 12:12 / 1607人阅读

摘要：从用户角度来说，优化能让页面加载的更快，对用户的操作能及时的响应，能提升用户的更好的体验效果。从服务商的角度来说，优化能解决页面的请求次数，或者减少请求所带来的带宽。

1.从用户角度来说，优化能让页面加载的更快，对用户的操作能及时的响应，能提升用户的更好的体验效果。
2.从服务商的角度来说，优化能解决页面的请求次数，或者减少请求所带来的带宽。
前端优化的方式有很多，主要可以分为两大类；
第一种就是页面级的优化：
例如 HTTP请求次数，脚本的无阻塞加载，内联脚本优化的问题，
第二种代码级的优化：
例如 Javascript中的DOM 操作优化、CSS选择符优化、图片优化以及 HTML结构优化等等。另外，本着提高投入产出比的目的，后文提到的各种优化策略大致按照投入产出比从大到小的顺序排列。
一，页面级优化
1.减少HTTP请求，记得我在面试的时候，面试官问答过这个问题，当时我答的时候就说了减少HTTP请求，回来我想的时候，具体实现减少HTTP请求有哪些实现的方法呢；
首先我们需要了解http请求的过程：请求都是需要花费成本的，既时间成本加资源成本，一个完整的请求通过DNS寻址，到连接到服务器，发送请求，等待服务器响应请求，接收数据，这是一个漫长的过程，资源上每个请求都是要携带数据的，因此每个请求都是要占带宽的。

<1>合理设置http缓存
在前端浏览器中，把你需要的数据，可以在第一次请求的时候将数据保存在js对象中，这样可以极大的较少服务器访问，那么如何实现呢？
首先我们创建一个cache.js,

var clsCodes ={
    "clsCodes":["BOOL","STATUS","USER_TYPE","REPORT_STATUS" ]
}
var dist;
//前端定义一个函数来调用后端接口获得的数据，然后再保存到本地
function getdists(){
    //$.post(url,data,callback,Type)
    $.post(getContextpath()+" "/api/sys/getDictList",
            clsCodes,
            function(resultBean,stauts,xhrRequest){
                if(resultBean.data!=undefined){
                    dist=resultBean.data;
                }
            },
            json
    );
}

第二种代码级别优化

***1.css部分优化***
将样式表至于顶部；
避免使用css表达式；
用link代替@import;
***2.js部分***
把脚本置于页面底部
使用外部 JavaScript 和 CSS
削减 JavaScript 和 CSS
剔除重复脚本
减少DOM访问
开发智能事件处理程序
***image部分***
合并图片，使用css sprite

GPU云服务器云服务器前端性能优化前端开发性能优化 web性能优化 web前端优化

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/111738.html

web前端应该从几个方面来优化性能

摘要：从用户角度来说，优化能让页面加载的更快，对用户的操作能及时的响应，能提升用户的更好的体验效果。从服务商的角度来说，优化能解决页面的请求次数，或者减少请求所带来的带宽。 1.从用户角度来说，优化能让页面加载的更快，对用户的操作能及时的响应，能提升用户的更好的体验效果。2.从服务商的角度来说，优化能解决页面的请求次数，或者减少请求所带来的带宽。前端优化的方式有很多，主要可以分为两大类；第一...

andycall 2019-08-01 16:28 评论0 收藏0
腾讯前端求职直播课——面试篇

摘要：主讲人石小勇腾讯高级前端工程师，核心成员之一，现主要负责腾讯兴趣部落的研发设计工作闲聊前端从移动时代开始，前后端分离之后，前端这个岗位才开始慢慢火起来一线城市前端需求量大，但合格前端很少大话面试面试如相亲，为什么这么说五大要素颜王面试的第一主讲人：AlloyTeam@石小勇(腾讯高级前端工程师，AlloyTeam核心成员之一，现主要负责腾讯QQ兴趣部落的研发设计工作) 1.闲聊前端 ...

YFan 2019-08-21 16:01 评论0 收藏0
腾讯前端求职直播课——面试篇

摘要：主讲人石小勇腾讯高级前端工程师，核心成员之一，现主要负责腾讯兴趣部落的研发设计工作闲聊前端从移动时代开始，前后端分离之后，前端这个岗位才开始慢慢火起来一线城市前端需求量大，但合格前端很少大话面试面试如相亲，为什么这么说五大要素颜王面试的第一主讲人：AlloyTeam@石小勇(腾讯高级前端工程师，AlloyTeam核心成员之一，现主要负责腾讯QQ兴趣部落的研发设计工作) 1.闲聊前端 ...

gxyz 2019-08-29 12:57 评论0 收藏0
腾讯前端求职直播课——面试篇

摘要：主讲人石小勇腾讯高级前端工程师，核心成员之一，现主要负责腾讯兴趣部落的研发设计工作闲聊前端从移动时代开始，前后端分离之后，前端这个岗位才开始慢慢火起来一线城市前端需求量大，但合格前端很少大话面试面试如相亲，为什么这么说五大要素颜王面试的第一主讲人：AlloyTeam@石小勇(腾讯高级前端工程师，AlloyTeam核心成员之一，现主要负责腾讯QQ兴趣部落的研发设计工作) 1.闲聊前端 ...

miya 2019-08-01 17:11 评论0 收藏0