摘要:从用户角度来说,优化能让页面加载的更快,对用户的操作能及时的响应,能提升用户的更好的体验效果。从服务商的角度来说,优化能解决页面的请求次数,或者减少请求所带来的带宽。
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
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/50544.html
摘要:从用户角度来说,优化能让页面加载的更快,对用户的操作能及时的响应,能提升用户的更好的体验效果。从服务商的角度来说,优化能解决页面的请求次数,或者减少请求所带来的带宽。 1.从用户角度来说,优化能让页面加载的更快,对用户的操作能及时的响应,能提升用户的更好的体验效果。2.从服务商的角度来说,优化能解决页面的请求次数,或者减少请求所带来的带宽。前端优化的方式有很多,主要可以分为两大类;第一...
摘要:主讲人石小勇腾讯高级前端工程师,核心成员之一,现主要负责腾讯兴趣部落的研发设计工作闲聊前端从移动时代开始,前后端分离之后,前端这个岗位才开始慢慢火起来一线城市前端需求量大,但合格前端很少大话面试面试如相亲,为什么这么说五大要素颜王面试的第一 主讲人:AlloyTeam@石小勇(腾讯高级前端工程师,AlloyTeam核心成员之一,现主要负责腾讯QQ兴趣部落的研发设计工作) 1.闲聊前端 ...
摘要:主讲人石小勇腾讯高级前端工程师,核心成员之一,现主要负责腾讯兴趣部落的研发设计工作闲聊前端从移动时代开始,前后端分离之后,前端这个岗位才开始慢慢火起来一线城市前端需求量大,但合格前端很少大话面试面试如相亲,为什么这么说五大要素颜王面试的第一 主讲人:AlloyTeam@石小勇(腾讯高级前端工程师,AlloyTeam核心成员之一,现主要负责腾讯QQ兴趣部落的研发设计工作) 1.闲聊前端 ...
摘要:主讲人石小勇腾讯高级前端工程师,核心成员之一,现主要负责腾讯兴趣部落的研发设计工作闲聊前端从移动时代开始,前后端分离之后,前端这个岗位才开始慢慢火起来一线城市前端需求量大,但合格前端很少大话面试面试如相亲,为什么这么说五大要素颜王面试的第一 主讲人:AlloyTeam@石小勇(腾讯高级前端工程师,AlloyTeam核心成员之一,现主要负责腾讯QQ兴趣部落的研发设计工作) 1.闲聊前端 ...
阅读 1170·2021-09-03 10:44
阅读 546·2019-08-30 13:13
阅读 2773·2019-08-30 13:11
阅读 1911·2019-08-30 12:59
阅读 1000·2019-08-29 15:32
阅读 1558·2019-08-29 15:25
阅读 909·2019-08-29 12:24
阅读 1229·2019-08-27 10:58