web基础要点记录

Posted 2020-12-02 ypengbk

　　最近公司项目做完了，不怎么忙，翻看了一些基础的资料，文章。就做了个简单的记录。

1.Chrome 中文界面下默认会将小于 12px 的文本强制按照 12px 显示, 可通过加入 CSS 属性  -webkit-text-size-adjust: none; 解决；

2. position:inherit; 规定从父元素继承 position 属性的值；

3.使用 window.top.document.compatMode 可查看浏览器渲染模式是标准模式，还是怪异模式；

4.<img>垂直居中的简单方式 display:table-cell; text-align:center; vertical-align:middle; ；

5.闭包简单而言就是内层作用域可以访问外层作用域的变量，闭包中引用到的包裹函数中定义的变量永远不会被释放，应用到闭包时需要注意及时释放闭包函数（内存泄漏）；

6.事件绑定：(1)addEventListener;(2)attachEvent(IE低版本)；

7.阻止事件冒泡  e.stopPropagation();/*标准*/ event.cancelBubble=true; /*<=ie9*/; ；

8.阻止默认事件 return false 或 e.preventDefault(); ；

9.原生JS操作DOM节点 obj.appendChild();/*添加*/ obj.insertBefore();/*插入*/ obj.replaceChild();/*替换*/ obj.removeChild();/*删除*/ ；

10. undefined的产生有三种情况：(1)变量定义了没有被赋值；(2)想要获取一个对象上不存在的属性或者方法；(3)数组中没有被赋值的元素；(not defined 语法错误)

11.变量声明提升：

var foo = 1;
function(){
    console.log(foo);//undefined
    var foo = 2;
    console.log(foo);//2
}
//函数声明与变量声明会被JS引擎隐式提升到当前作用域的顶部，但是只提升名称不会提升赋值部分；

12.arguments.callee：获取当前函数的引用，返回正在被执行的function，也就是所指定的function对象的正文；arguments.caller是返回一个对函数的引用，该函数调用了当前函数；

13.undefined、任意的函数以及 symbol 值，在序列化过程中会被忽略（出现在非数组对象的属性值中时）或者被转换成 null（出现在数组中时）；

14.JS精度不能精确到0.1；

var n = 0.3,m = 0.2, i = 0.2, j = 0.1;
alert((n - m) == (i - j)); //false
alert((n-m) == 0.1); //false
alert((i-j)==0.1); //true

15.bind： 绑定事件，对新添加的事件不起作用，方法用于将一个处理程序附加到每个匹配元素的事件上并返回jQuery对象； live： 方法将一个事件处理程序附加到与当前选择器匹配的所有元素（包含现有的或将来添加的）的指定事件上并返回jQuery对象；delegate： 方法基于一组特定的根元素将处理程序附加到匹配选择器的所有元素（现有的或将来的）的一个或多个事件上；

16.JS函数声明优先于变量声明

function a() {
}
var a;
alert(typeof a);//function

var a; 
function a() { 
}
alert(typeof a);//function

17.arguments的操作

function foo(a) {
    arguments[0] = 2;
    alert(a);//答案：2，因为：a、arguments是对实参的访问，b、通过arguments[i]可以修改指定实参的值
}
foo(1);

18.CSS3新特性

1. CSS3实现圆角（border-radius），阴影（box-shadow），
2. 对文字加特效（text-shadow、），线性渐变（gradient），旋转（transform）
3.transform:rotate(9deg) scale(0.85,0.90) translate(0px,-30px) skew(-9deg,0deg);// 旋转,缩放,定位,倾斜
4. 增加了更多的CSS选择器  多背景 rgba 
5. 在CSS3中唯一引入的伪元素是 ::selection.
6. 媒体查询，多栏布局
7. border-image

19.html5新特性

1. 拖拽释放(Drag and drop) 
2. 语义化更好的内容标签（header,nav,footer,aside,article,section）
3. 音频、视频(audio,video)
4. 画布(Canvas) 
5. 地理(Geolocation) 
6. 本地离线存储 localStorage 长期存储数据，浏览器关闭后数据不丢失；
7. sessionStorage 的数据在浏览器关闭后自动删除
8. 表单控件，calendar、date、time、email、url、search  
9. 新的技术webworker, websocket, Geolocation

20.CSS3新增伪类

p:first-of-type 选择属于其父元素的首个 <p> 元素的每个 <p> 元素；
p:last-of-type  选择属于其父元素的最后 <p> 元素的每个 <p> 元素；
p:only-of-type  选择属于其父元素唯一的 <p> 元素的每个 <p> 元素；
p:only-child    选择属于其父元素的唯一子元素的每个 <p> 元素；
p:nth-child(2)  选择属于其父元素的第二个子元素的每个 <p> 元素；
:enabled、:disabled 控制表单控件的禁用状态；
:checked，单选框或复选框被选中；

21.Ajax：

Ajax并不算是一种新的技术，全称是asynchronous javascript and xml，可以说是已有技术的组合，主要用来实现客户端与服务器端的异步通信效果，实现页面的局部刷新，
早期的浏览器并不能原生支持ajax，可以使用隐藏帧（iframe）方式变相实现异步效果，后来的浏览器提供了对ajax的原生支持
使用ajax原生方式发送请求主要通过XMLHttpRequest(标准浏览器)、ActiveXObject(IE浏览器)对象实现异步通信效果
基本步骤：
var xhr =null;//创建对象 
if(window.XMLHttpRequest){
    xhr = new XMLHttpRequest();
}else{
    xhr = new ActiveXObject("Microsoft.XMLHTTP");
}
     xhr.open(“方式”,”地址”,”标志位”);//初始化请求 
     xhr.setRequestHeader(“”,””);//设置http头信息 
     xhr.onreadystatechange =function(){}//指定回调函数 
     xhr.send();//发送请求 

22.http常用状态码

100-199 用于指定客户端应相应的某些动作。

200-299 用于表示请求成功。

300-399 用于已经移动的文件并且常被包含在定位头信息中指定新的地址信息。

400-499 用于指出客户端的错误。

400  语义有误，当前请求无法被服务器理解。

401  当前请求需要用户验证

403  服务器已经理解请求，但是拒绝执行它。

500-599 用于支持服务器错误。

503 – 服务不可用

23.一个页面从输入 URL 到页面加载显示完成，这个过程中都发生了什么？

分为4个步骤：
1. 当发送一个 URL 请求时，不管这个 URL 是 Web 页面的 URL 还是 Web 页面上每个资源的 URL，浏览器都会开启一个线程来处理这个请求，
同时在远程 DNS 服务器上启动一个 DNS 查询。这能使浏览器获得请求对应的 IP 地址。
2. 浏览器与远程 Web 服务器通过 TCP 三次握手协商来建立一个 TCP/IP 连接。该握手包括一个同步报文，一个同步-应答报文和一个应答报文，
这三个报文在 浏览器和服务器之间传递。该握手首先由客户端尝试建立起通信，而后服务器应答并接受客户端的请求，最后由客户端发出该请求已经被接受的报文。
3. 一旦 TCP/IP 连接建立，浏览器会通过该连接向远程服务器发送 HTTP 的 GET 请求。远程服务器找到资源并使用 HTTP 响应返回该资源，值为 200 的 HTTP 响应状态表示一个正确的响应。
4. 此时，Web 服务器提供资源服务，客户端开始下载资源。

24.多个域名来存储网站资源更有效

确保用户在不同地区能用最快的速度打开网站，其中某个域名崩溃用户也能通过其他域名访问网站，并且不同的资源放到不同的服务器上有利于减轻单台服务器的压力。

25.伪数组转标准数组，log方法添加一个”(app)”前缀

function log(){
      var args = Array.prototype.slice.call(arguments);  //为了使用unshift数组方法，将argument转化为真正的数组
      args.unshift(‘(app)‘);
      console.log.apply(console, args);
};

26.this指向问题

var User = {
  count: 1,
  getCount: function() {
    return this.count;
  }
};
console.log(User.getCount());  //1
var func = User.getCount;
console.log(func());  // undefined

func是在winodw的上下文中被执行的，所以会访问不到count属性。

如何确保Uesr总是能访问到func的上下文，即正确返回1

Function.prototype.bind = Function.prototype.bind || function(context){
   var self = this;
   return function(){
      return self.apply(context, arguments);
   };
}
var func = User.getCount.bind(User);
console.log(func());

27.window.onload 与 $(document).ready(function(){})的区别

window.onload()方法是必须等到页面内包括图片的所有元素加载完毕后才能执行。
$(document).ready()是DOM结构绘制完毕后就执行，不必等到加载完毕。

28.eval 是把对应的字符串解析成JS代码并运行；应该避免使用eval，不安全，非常耗性能

29. "use strict" 意思是使用严格模式，使用严格模式，一些不规范的语法将不再支持

30. new操作符new完之后

1、创建一个空对象，并且 this 变量引用该对象，同时还继承了该函数的原型。
2、属性和方法被加入到 this 引用的对象中。
3、新创建的对象由 this 所引用，并且最后隐式的返回 this 。

31.HasOwnProperty不会去查找原型

32. AMD（Asynchronous Modules Definition）、CMD（Common Module Definition）规范的区别

主要通过requirejs与seajs的对比

1、对于依赖的模块，AMD 是提前执行，CMD 是延迟执行。不过 RequireJS 从 2.0 开始，也改成可以延迟执行（根据写法不同，处理方式不同）。CMD 推崇 as lazy as possible.
2、CMD 推崇依赖就近，AMD 推崇依赖前置。
3. AMD 的 API 默认是一个当多个用，CMD 的 API 严格区分，推崇职责单一。比如 AMD 里，require 分全局 require 和局部 require，都叫 require。CMD 里，没有全局 require，
而是根据模块系统的完备性，提供 seajs.use 来实现模块系统的加载启动。CMD 里，每个 API 都简单纯粹。

33.

Object.hasOwnProperty( ) 检查属性是否被继承 
Object.isPrototypeOf( ) 一个对象是否是另一个对象的原型 
Object.propertyIsEnumerable( ) 是否可以通过for/in循环看到属性 
Object.toLocaleString( ) 返回对象的本地字符串表示 
Object.toString( ) 定义一个对象的字符串表示 
Object.valueOf( ) 指定对象的原始值

34.js的运行主要分两个阶段：js的预解析和运行，预解析阶段所有的变量声明和函数定义都会提前，但是变量的赋值不会提前

35.javascript对象的几种创建方式

1. 工厂模式

function createStudent(name,sex,grade){                                                         
    var o = new Object();
    o.name = name;
    o.sex = sex;
    o.grade = grade;

    o.sayName = function(){
        console.log(this.name);
    }
    return o;
}
var s1 = createStudent(‘Claiyre‘,‘famale‘,1);

2. 构造函数模式

function Student(name,sex,grade){                                                   
    this.name = name;
    this.sex = sex;
    this.grade = grade;
    this.sayName = function(){
        console.log(this.name);
    }
}
var s2 = new Student(‘孙悟空‘，‘male‘,2);

3. 原型模式

function Student_1(){

}
Student_1.prototype.name = ‘Claiyre‘;
Student_1.prototype.sex = ‘female‘;
Student_1.prototype.class = 5;
Student_1.prototype.sayName = function (){
    console.log(this.name);
}

var s5 = new Student_1();                                                         
s5.sayName();    //Claiyre
var s6 = new Student_1();
s6.sayName();    //Claiyre

4. 混合构造函数和原型模式

function Student(name,sex,grade){                                                   
    this.name = name;
    this.sex = sex;
    this.grade = grade;
}

Student.prototype.sayName = function(){
        console.log(this.name);
}
Student.prototype.school = ‘Joooh school‘;

5. 动态原型模式

function Person(name, age, job) {
    //属性
    this.name = name;
    this.age = age;
    this.job = job;
    // 方法
    if(typeof this.sayName != ‘function‘) {
        Person.prototyep.sayName =  function(){
            alert(this.name);
        }
    }
}
var friend = new Person(‘Nicholas‘, 29, ‘Software Engineer‘);
friend.sayName();

6. 寄生构造函数模式

function SpecialArray(){
    var array = new Array();
    array.push.apply(array,arguments);
    array.toPipedString = function(){
        return this.join("|");
    };
    return array;
}
var colors = new SpecialArray("red","green","pink");
alert(colors.toPipedString());// red|green|pink
alert(colors instanceof SpecialArray); // false 

7. 稳妥构造函数模式

先说稳妥二字，别人定义了一个稳妥对象，即没有公共属性，而且其方法也不引用this对象，这种模式适应于一些安全环境中（禁止使用this和new），或防止数据被其他应用程序改动，像下面这样：
function Person(name,age,gender){
    var obj = new Object();
    obj.sayName = function(){
        alert(name);
    };
    return obj;
}
var person = Person("Stan",0000,"male"); // 这里没有使用new操作符
person.sayName(); // Stan
alert(person instanceof Person); // false

36.javascript继承的几种方法

//1. 原型链继承


// 父亲类
function Parent() {
    this.value = ‘value‘;
}
Parent.prototype.sayHi = function() {
     console.log(‘Hi‘);
}
// 儿子类
function Child() {

}
// 改变儿子的prototype属性为父亲的实例
Child.prototype = new Parent();

var child = new Child();
// 首先现在child实例上进行查找，未找到，
// 然后找到原型对象（Parent类的一个实例），在进行查找，未找到，
// 在根据__proto__进行找到原型，发现sayHi方法。

// 实现了Child继承
 child.sayHi();

//2. 借用构造函数继承


　　 // 父亲类
    function Parent(name) {
        this.name = name;
        this.color = [‘pink‘, ‘red‘];
    }
    // 儿子类
    function Child(name) {
        Parent.call(this, name);

        // 定义自己的属性
        this.value = ‘test‘;
    }
    var child = new Child(‘qq‘);
    // 将qq传递给Parent
    console.log(child.name); // qq

//3. 组合继承(原型+借用构造)


　　 // 父亲类
    function Parent() {
        this.color = [‘pink‘, ‘red‘];
    }
    Parent.prototype.sayHi = function() {
        console.log(‘Hi‘);
    }

    // 儿子类
    function Child() {
        Parent.call(this); // 第二次调用构造函数：在新对象上创建一个color属性
    }
    Child.prototype = new Parent(); // 第一次调用构造函数Child.prototype将会得到一个color属性，屏蔽了原型中的color属性。

//4. 原型式继承


　　function createAnother(o) {
        // 创建一个临时构造函数
        function F() {

        }
        // 将传入的对象作为它的原型
        F.prototype = o;
        // 返回一个实例
        return new F();
    }

//5. 寄生式继承


　　 function Parent() {
        this.color = [‘pink‘, ‘red‘];
    }
    function createAnother(o) {
        // 获得当前对象的一个克隆
        var another = new Object(o);
        // 增强对象
        o.sayHi = function() {
                console.log(‘Hi‘);
            }
        // 返回对象
        return another;
    }

//6. 寄生组合式继承


　　 // 创建只继承原型对象的函数
    function inheritPrototype(parent, child) {
        // 创建一个原型对象副本
        var prototype = new Object(parent.prototype);
        // 设置constructor属性
        prototype.constructor = child;
        child.prototype = prototype;
    }
    // 父亲类
    function Parent() {
        this.color = [‘pink‘, ‘red‘];
    }
    Parent.prototype.sayHi = function() {
        console.log(‘Hi‘);
    }
    // 儿子类
    function Child() {
        Parent.call(this);
    }
    inheritPrototype(Parent, Child);

 

37.Sass、Less

它们是动态的样式语言，是CSS预处理器,CSS上的一种抽象层。他们是一种特殊的语法/语言而编译成CSS。
变量符不一样，less是@，而Sass是$;
Sass支持条件语句，可以使用if{}else{},for{}循环等等。而Less不支持;
Sass是基于Ruby的，是在服务端处理的，而Less是需要引入less.js来处理Less代码输出Css到浏览器

38.this的理解

在JavaScript中，this通常指向的是我们正在执行的函数本身，或者是，指向该函数所属的对象。
全局的this → 指向的是Window
对象中的this → 指向其本身
事件中this → 指向事件对象

39.web性能优化的几个方案

1、尽量减少 HTTP 请求
2、使用浏览器缓存
3、使用压缩组件
4、图片、JS的预载入
5、将脚本放在底部
6、将样式文件放在页面顶部
7、使用外部的JS和CSS
8、精简代码

40.jquery.extend 与 jquery.fn.extend的区别

Jquery.extend用来扩展jQuery对象本身；jquery.fn.extend用来扩展jQuery实例