前端开发的优化问题

发表于 | 分类于

前端优化问题

  • 减少http请求次数：css spirit,data uri
  • JS，CSS源码压缩
  • 前端模板 JS+数据，减少由于HTML标签导致的带宽浪费，前端用变量保存AJAX请求结果，每次操作本地变量，不用请求，减少请求次数
  • 用innerHTML代替DOM操作，减少DOM操作次数，优化javascript性能
  • 当需要设置的样式很多时设置className而不是直接操作style
  • 图片预载
  • 避免在页面的主体布局中使用table，table要等其中的内容完全下载之后才会显示出来，显示比div+css布局慢
  • 保持良好的编程习惯，避免重复的CSS，JavaScript代码，多余的HTML标签和属性

实现DIV的水平垂直居中

宽高已定(父、子容器宽高都固定大小)

设置position: absolute(父元素记得设置: relative), 然后top和left设置50%, 50%, 再设置margin-left=宽/2, margin-top:宽/2

父容器固定宽高，子容器固定宽高或不设置宽高

依然是利用position：子div的上下左右都设置成0，然后margin设置auto。关键是要设置position：子absolute，父relative。

不论是否固定宽高都可用. 问题在于兼容性. ie9及以下不支持

设置父级flex属性: display:flex; justify-content:center; align-items: center;

html

1
2
3
4
5
6
7
8
9
10
11
<div class="div1">
    <div class="div2">
    </div>
    <div class="div2">
    </div>
    <div class="div2">
    </div>
</div>

css

1
2
3
4
5
6
7
8
9
10
11
12
13
14
.div1{
    width:500px;
    height:500px;
    border:1px solid black;
    display: flex;
    justify-content: center;
    align-items: center;
}
.div2{
    background: yellow;
    width:100px;
    height:100px;
    margin-right: 5px;
}

父子容器都设宽高

父级元素设置display:table-cell ，然后vertical-align：middle。这种方法可以设置垂直居中. 这时候只要在子元素里设置margin:auto即可实现水平居中

让DIV在页面水平垂直居中

css

1
2
3
4
5
6
7
8
9
10
11
12
13
14
*{
    margin:0;
    padding: 0;
}
.div1{
    width: 200px;
    height: 200px;
    background-color: yellow;
    position: absolute;
    top:50%;
    left: 50%;
    margin-left: -100px;
    margin-top: -100px;
}

图片替换方法

  • text-indent属性，并且给其设置一个较大的负值，x达到隐藏文本的效果
1
2
3
4
5
6
7
8
<h1 class="technique-three">w3cplus</h1>
 
.technique-three {
  width: 329px;
  height: 79px;
  background: url(images/w3cplus-logo.png);
  text-indent: -9999px;
}

js有哪些基本类型?

  • 基本数据类型：Undefined, Null, Boolean, Number, String
  • 引用数据类型： Object, Array, Date, RegExp, Function

基本类型与引用类型有什么区别?

  • 存储
    基本类型值在内存中占据固定大小的空间,因此被保存在栈内存中
    引用类型的值是对象, 保存在堆内存中. 包含引用类型的变量实际上包含的并不是对象本身, 而是一个指向该对象的指针　
  • 复制
    从一个变量向另一个变量复制基本类型的值, 会创建这个值的一个副本
    从一个变量向另一个变量复制引用类型的值, 复制的其实是指针,　因此两个变量最终都指向同一个对象
  • 检测类型
    确定一个值是哪种基本类型可以用typeof操作符,
    而确定一个值是哪种引用类型可以使用instanceof操作符

apply和call的用法和区别

apply和call的区别在哪里

1
2
3
4
5
6
7
8
9
apply和call都能继承另外一个对象的方法和属性；
Function.apply(obj,args)方法能接收两个参数
obj：这个对象将代替Function类里this对象
args：这个是数组，它将作为参数传给Function（args-->arguments）
call:和apply的意思一样,只不过是参数列表不一样.
Function.call(obj,[param1[,param2[,…[,paramN]]]])
obj：这个对象将代替Function类里this对象
params：这个是一个参数列表

call()和apply()示例展示

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
*定义一个Person类*/ 
function Person(name,age) { 
     this.name=name; 
     this.age=age;
} 
 /*定义一个学生类*/ 
 function Student(name,age,grade) { 
    //Person.apply(this,arguments);//特点：this指代student对象，只接收2个参数，arguments为隐式类数组对象，用来接收传入的参数；
      Person.call(this,name,age);//特点：this指代student对象，可以接收任意多个参数
      this.grade=grade; 
 } 
 var student =new Student("zhangsan",22,"二年级");//方法Student()也是object的一个实例
 //测试 
 alert("name:"+student.name+"\n"+"age:"+student.age+"\n"+"grade:"+student.grade);
//学生类里面我没有给name和age属性赋值啊,为什么又存在这两个属性的值呢,这个就是apply的神奇之处.

结果

1
2
3
name:zhangsan
age:22
grade:"二年级"

什么情况下用apply,什么情况下用call

1
2
3
使用apply的情况：在给对象参数的情况下,如果参数的形式是数组的时候,比如apply示例里面传递了参数arguments,这个参数是数组类型。
使用call的情况： 如果我的Person的参数列表是这样的(age,name),而Student的参数列表是(name,age,grade),这样就可以用call来实现了,也就是直接指定参数列表对应值的位置(Person.call(this,age,name,grade));

什么是闭包? 闭包有什么作用?

  • 闭包是指有权访问另一个函数作用域中的变量的函数. 创建闭包常见方式,就是在一个函数内部创建另一个函数.
  • 作用:
    • 匿名自执行函数 (function (){ … })(); 创建了一个匿名的函数，并立即执行它，由于外部无法引用它内部的变量，因此在执行完后很快就会被释放，关键是这种机制不会污染全局对象。
    • 缓存, 可保留函数内部的值
    • 实现封装
    • 实现模板
  • js闭包的用途

指出 document load 和 document ready 两个事件的区别

  • 一是ready，表示文档结构已经加载完成（不包含图片等非文字媒体文件）
  • 二是onload，指示页面包含图片等文件在内的所有元素都加载完成。
  • jQuery中$(function(){/ do something/});他的作用或者意义就是:在DOM加载完成后就可以可以对DOM进行操作。一般情况先一个页面响应加载的顺序是，域名解析-加载html-加载js和css-加载图片等其他信息。

图片预加载的实现

图片预加载