前端优化代码主要的几种方式!

一、减少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结构能更快的释放。

五、控制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-11-05 10:26:40

前端优化代码主要的几种方式!的相关文章

iOS代码加密的几种方式

众所周知的是大部分iOS代码一般不会做加密加固,因为iOS APP一般是通过AppStore发布的,而且苹果的系统难以攻破,所以在iOS里做代码加固一般是一件出力不讨好的事情.万事皆有例外,不管iOS.adr还是js,加密的目的是为了代码的安全性,虽然现在开源畅行,但是不管个人开发者还是大厂皆有保护代码安全的需求,所以iOS代码加固有了生存的土壤.下面简单介绍下iOS代码加密的几种方式. iOS代码加密的几种方式 1.字符串加密 字符串会暴露APP的很多关键信息,攻击者可以根据从界面获取的字符串

实现前端页面跳转的几种方式

实现前端页面跳转的几种方式 推荐使用 <script language='javascript'> document.location = 'http://mail.qq.com/domain/longtimenosee.cc' </script> 相关阅读 http://www.jb51.net/article/25403.htm http://my.oschina.net/ososchina/blog/340854

对Java代码加密的两种方式,防止反编译

使用Virbox Protector对Java项目加密有两种方式,一种是对War包加密,一种是对Jar包加密.Virbox Protector支持这两种文件格式加密,可以加密用于解析class文件的java.exe,并且可以实现项目源码绑定制定设备,防止部署到客户服务器的项目被整体拷贝. 两种加密方式 War 包加密 当你的项目在没有完成竣工的时候,不适合使用 war 文件,因为你的类会由于调试之类的经常改,这样来回删除.创建 war 文件很不爽,最好是你的项目已经完成了,不改了,那么就打个 w

springmvc 前端 发ajax请求的几种方式

一.传json单值或对象 1.前端 1 var data = {'id':id,'name':name}; 2 $.ajax({ 3 type:"POST", 4 url:"user/saveUser", 5 dataType:"json", 6 //contentType:"application/json", //不能添加这个头 7 data:data, //这里不能进行JSON.stringify,发送请求的数据在:fo

解决前端跨域请求的几种方式

利用 JSONP 实现跨域调用 说道跨域调用,可能大家首先想到的或者听说过的就是 JSONP 了. 1.1 什么是JSONP JSONP 是 JSON 的一种使用模式,可以解决主流浏览器的跨域数据访问问题.其原理是根据 XmlHttpRequest 对象受到同源策略的影响,而 <script> 标签元素却不受同源策略影响,可以加载跨域服务器上的脚本,网页可以从其他来源动态产生 JSON 资料.用 JSONP 获取的不是 JSON 数据,而是可以直接运行的 JavaScript 语句. 1.2

前端上传文件的几种方式

出于安全考量,操作系统分配给浏览器的权限较低,而单个网页所拥有对用户电脑操作的权限就更低了,这是为了防止因用户的操作不当导致恶意网页随意增删改动用户本地的文件,所以在前端网页中所有的文件操作必须全都由用户来主动操作触发文件上传. 用户触发文件上传操作的类型大致有以下几种常用方法 使用input标签,通过一个type设置为file的输入框可以选中本地文件 通过html5的拖拽方法进行文件上传 通过在编辑框进行文件复制 下面我们就对这几种不同的上传方法进行一个详细的分析,分析不同方法的一个特效和优劣

ListView优化adapter getview的两种方式ViewHolder vs HolderView

 一.ViewHolder方式 如果你还没听说过ViewHolder,那么你该去好好看看官方文档了,而不是埋头写代码. 一个ListView的item布局中需要赋值的子元素太多为了避免重复的调用FindViewById方法,我们一般考虑使用ViewHolder方式来实现BaseAdapter. 如下: //在外面先定义,ViewHolder静态类 static class ViewHolder { public ImageView img; public TextView title; publ

前端动画效果实现的三种方式

第一种,js中setTimeout和setintervel,把动画元素设置position:absalute,然后操作left.top来移动.此种方法内存消耗大,显示效果差,不推荐. 第二种,CSS3中的animation动画,添加动画@keyframs name {0% {'left','0px'} 50% {'left','100px'}}.此种方法可以实现的效果多,旋转移动,可以实现精细化动画,推荐使用. 第三种,CSS3中的transition过渡,设置过渡时间,通过js添加CSS属性t

前端优化-代码层面

<script type="text/javascript"> console.time(`test`) var len = 100 var ul = document.getElementById('list') for (var i = 0; i < len; i++) { var li = document.createElement('li') ul.innerHTML += `<li>${i}</li>` } console.time