前端代码优化方法

一、减少HTTP请求

1.合并CSS、js:每次调用js、css都要发送一次http请求,所以并不是分开写好几个文件比较好

js、css压缩。js压缩可以用grunt

HTML优化:

  • 使用语义化标签
  • 减少iframe:iframe是SEO的大忌,iframe有好处也有弊端
  • 避免重定向

CSS优化:

  • 删除空样式
  • 不滥用浮动,字体,需要加载的网络字体根据网站需求再添加
  • 选择器性能优化
  • 避免使用表达式,避免用id写样式

js优化:

  • 压缩
  • 减少重复代码

2.图片优化

  • 图片合并,CSS sprite技术
  • 不要在html中使用缩放图片
  • 用更小的并且可缓存的 favicon.ico
  • 缩小图片分辨率;
  • 改变图片格式,推荐PNG格式;
  • 降低图片保存质量。

二、减少DOM操作

减少对DOM元素的查询和修改,jquery也是有弊端的

方法:

  • 缓存已经访问过的元素
  • "离线"更新节点, 再将它们添加到树中
  • 避免使用 JavaScript 输出页面布局--应该是 CSS 的事儿

三、使用JSON格式来进行数据交换

JSON是一种轻量级的数据交换格式,采用完全独立于语言的文本格式,是理想的数据交换格式。同时,JSON是 JavaScript原生格式,这意味着在 JavaScript 中处理 JSON数据不需要任何特殊的 API 或工具包。

  与XML序列化相比,JSON序列化后产生的数据一般要比XML序列化后数据体积小

注意json的格式一定要严格符合标准

四、js、css文件的加载顺序

css放在<head>里,

js放在<body>结束前:浏览器在执行JavaScript代码时,不能同时做其它事情,即<script>每次出现都会让页面等待脚本的解析和执行(不论JavaScript是内嵌的还是外链的),JavaScript代码执行完成后,才继续渲染页面。这个也就是JavaScript的阻塞特性。

  因为这个阻塞的特点,建议把JavaScript代码放到</body>标签以前,这样既能有效的防止JavaScript的阻塞,又能使得页面的HTML结构能更快的释放。

五、CDN加速

CDN(Content Delivery Network,内容分发网络)

其基本思路是尽可能避开互联网上有可能影响数据传输速度和稳定性的瓶颈和环节,使内容传输的更快、更稳定。通过在网络各处放置节点服务器所构成的在现有的互联网基础之上的一层智能虚拟网络,CDN系统能够实时地根据网络流量和各节点的连接、负载状况以及到用户的距离和响应时间等综合信息将用户的请求重新导向离用户最近的服务节点上。其目的是使用户可就近取得所需内容,解决 Internet网络拥挤的状况,提高用户访问网站的响应速度。

不足:实时性不好

六、控制cookie大小和污染、session不要存入大数据

Cookie是本地的磁盘文件,每次浏览器都会去读取相应的Cookie

使用Cookie跨域操作时注意在适应级别的域名上设置coockie以便使子域名不受其影响

针对 Web 组件使用域名无关性的 Cookie

设置合理的生命周期,清除时期

session是存在服务器的,所以如果存入大量的数据会给服务器带来很大的压力

六、 添加 Expires 或 Cache-Control 信息头 (Add an Expires or a Cache-Control Header)
各个浏览器都有针对的方案, Apache 例子【注意:下面的说明例子还不够精细,具体的环境上还要加一些调整】:

ExpiresActive On
ExpiresByType image/gif "modification plus 1 weeks"Lighttpd 启用 mod_expire 模块 后:

$HTTP["url"] =~ "\.(jpg|gif|png)___FCKpd___1quot; {
     expire.url = ( "" => "access 1 years" )
}Nginx 例子参考:

location ~* \.(jpg|gif|png)$ {
  if (-f $request_filename) {
        expires      max;
    break;
  }       
}

时间: 2024-10-16 16:12:48

前端代码优化方法的相关文章

转摘_结合个人经历总结的前端入门方法

转载请注明出处: https://github.com/qiu-deqing/FE-learning Table of Contents generated with DocToc FE-learning 必备基础技能 基本开发工具 学习方法和学习目标 入门之路 继续提高 一些个人经历 LingyuCoder的学习经历 工具 技能 语言基础 进阶 项目 未来 其他 入门书 一些不错的网站 历程 MrRaindrop的学习经历 缘起 项目,下一个项目 收集癖和知识管理 跟对神 读书 前端的定位 最

前端入门方法(大全)

转载请注明出处: https://github.com/qiu-deqing/FE-learning Table of Contents generated with DocToc FE-learning 必备基础技能 基本开发工具 学习方法和学习目标 入门之路 继续提高 一些个人经历 LingyuCoder的学习经历 工具 技能 语言基础 进阶 项目 未来 其他 入门书 一些不错的网站 历程 MrRaindrop的学习经历 缘起 项目,下一个项目 收集癖和知识管理 跟对神 读书 前端的定位 最

基于微软XAML技术的前端开发方法

使用XAML技术的平台目前包括WPF,Silverlight,Windows8等平台,未来的Windows10统一Windows App也使用XAML技术. 前端开发指通过可视化集成开发环境进行用户界面的设计和实现,结合手动编写XML界面描述代码,完成表现层开发的过程.基于XAML技术的前端开发使用的开发环境是Blend,输出是XAML代码.由于目前版本的Blend 2013存在一些问题,需要和VS配合使用.Blend 2015进行了重大改进,较好地解决了各种问题,但还未发布正式版. 下面总结一

MVC中利用ViewBag传递Json数据时的前端处理方法

用viewBag传递Json字符串到前端时,json字符串中的“会被转义为& quot,前端处理方法为@Html.Raw(Json.Encode(ViewBag.Data)),再用eval()函数解析得到json对象:var data=eval("(" + @Html.Raw(Json.Encode(ViewBag.Data)) + “)”); 如何传递的是json对象则前端使用用 jsonData=eval( @Html.Raw(ViewBag.jsonData)); 原文地

前端代码优化(转)

所谓代码优化是指对程序代码进行等价(指不改变程序的运行结果)变换.程序代码可以是中间代码(如四元式代码),也可以是目标代码.等价的含义是使得变换后的代码运行结果与变换前代码运行结果相同.优化的含义是最终生成的目标代码短(运行时间更短.占用空间更小),时空效率优化.原则上,优化可以再编译的各个阶段进行,但最主要的一类是对中间代码进行优化,这类优化不依赖于具体的计算机. 要点: 一. 尽量采用div+css布局您的页面,div+css布局的好处是让搜索引擎爬虫能够更顺利的.更快的.更友好的爬完您的页

前端代码优化

ID和class(类)名总是使用可以反应元素目的和用途的名称,或其他通用名称.代替表象和晦涩难懂的名称. 应该首选具体和反映元素目的的名称,因为这些是最可以理解的,而且发生变化的可能性最小. 通用名称只是多个元素的备用名,他们兄弟元素之间是一样的,没有特别意义.区分他们,使他们具有特殊意义,通常需要为“帮手”. 尽管class(类)名和ID 的语义化对于计算机解析来说没有什么实际的意义,语义化的名称 通常是正确的选择,因为它们所代表的信息含义,不包含表现的限制. 不推荐 .fw-800 { fo

前端排序方法

做编程,排序是个必然的需求.前端也不例外,虽然不多,但是你肯定会遇到. 不过说到排序,最容易想到的就是冒泡排序,选择排序,插入排序了. 冒泡排序 依次比较相邻的两个元素,如果后一个小于前一个,则交换,这样从头到尾一次,就将最大的放到了末尾. 从头到尾再来一次,由于每进行一轮,最后的都已经是最大的了,因此后一轮需要比较次数可以比上一次少一个.虽然你还是可以让他从头到尾来比较,但是后面的比较是没有意义的无用功,为了效率,你应该对代码进行优化. 图片演示如下: 代码实现: function bubbl

前端优化方法(全)

1.Minimize HTTP Requests 减少HTTP请求 图片.css.script.flash等等这些都会增加http请求数,减少这些元素的数量就能减少响应时间.把多个JS.CSS在可能的情况下写进一个文件,页面里直接写入图片也是不好的做法,应该写进CSS里,利用 CSS sprites 将小图拼合后利用background来定位. 2.Use a Content Delivery Network 利用CDN技术 CDN 确实是好东西,8过服务器提供商的这项服务一般是要收费的,我以前

我的前端布局方法

前些日子无聊的时候学了下前端,说实话没有美感前端和搬砖没有区别,唯一值得一提的就是他的布局方法.我的这个方法用于写死网页,不含各种框架的自适应性功能,而且主要想记录一下思想. 写前端不同于算法优化,算法中经常是能少一个数组就少一个数组,而前端只要保证不乱,多套几个div没有任何关系,也没人会深究你浪费了几个div.所以基本上是每一个模块都套一个div,兄弟也好后代也好,有意义就套,只要自己不嫌麻烦就行.而且始终秉持一个思想,先布局后写内容,写每一块思路都要清晰,多写几遍谁都会熟练,再多总结把用的