前端面试笔记（1）

css:

块元素：div、p、h1、ul、ol、li、table、td、tr、dl、dt 等   不允许其他元素在同一行，宽高起作用

内联(行内)元素：a、b、br、em、i、img、input、span、select 等   允许其他元素在同一行，宽高不起作用

块转内联：display:inline     内联转块：display:block

预加载：

css预加载：

.div01 { 
background: url(http://domain.tld/image-01.png) no-repeat -9999px -9999px;
 }  
.div02 { 
background: url(http://domain.tld/image-02.png) no-repeat -9999px -9999px; 
}  
.div03 {
 background: url(http://domain.tld/image-03.png) no-repeat -9999px -9999px;
}

js预加载：

//存放图片路径的数组
    var imgSrcArr = ['img01','img02','img03','img04'];

    var imgWrap = [];

    function preloadImg(arr) {
        for(var i =0; i< arr.length ;i++) {
            imgWrap[i] = new Image();
            imgWrap[i].src = arr[i];
        }
    }

    preloadImg(imgSrcArr);

    //或者延迟的文档加载完毕在加载图片

    $(function () {
        preloadImg(imgSrcArr);
    })

html5:

元素：audio(音频)、video(视频)、nav(导航栏)、header(页眉)、main(内容)、footer(页脚) 等！

 

ajax跨域问题：

1. 通过代理，比如可以通过代理服务器，或者后端获取，前端只需要访问后端的服务器就可以了

2. jsonp方法：

<script>
    function callback(data){
        alert(data.message) //请求的数据
}
</script>


html:
<script src="https://baidu.com/test.js"></script>


test.js:

callback({message:"success"}); 

原理：JSONP的原型：创建一个回调函数，然后在远程服务上调用这个函数并且将JSON 数据形式作为参数传递，完成回调。

弊端：只支持get请求，不支持post请求。

 

3.CORS方法

Cross-Origin Resource Sharing（CORS）跨域资源共享是一份浏览器技术的规范，提供了 Web 服务从不同域传来沙盒脚本的方法，以避开浏览器的同源策略，确保安全的跨域数据传输。现代浏览器使用CORS在API容器如XMLHttpRequest来减少HTTP请求的风险来源。与 JSONP 不同，CORS 除了 GET 要求方法以外也支持其他的 HTTP 要求。服务器一般需要增加如下响应头的一种或几种：

Access-Control-Allow-Origin: *
Access-Control-Allow-Methods: POST, GET, OPTIONS
Access-Control-Allow-Headers: X-PINGOTHER, Content-Type
Access-Control-Max-Age: 86400

求默认不会携带Cookie信息，如果需要携带，请配置下述参数

"Access-Control-Allow-Credentials": true
// Ajax设置
"withCredentials": true

弊端：存在兼容性问题，特别是 IE10 以下的浏览器。

js和jq实现自适应：

1. 在html标签中meta添加

 <meta name="viewport" content="width=device-width,initial-scale=1.0,
    minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/>

width=device-width表示网页的宽度等于设备屏幕的宽度，initial-scale=1.0表示设置页面初始的缩放比例为1，maximum-scale=1.0 和 minimum-scale=1.0 表示设置最大的和最小的页面缩放比例,user-scalable=no表示禁止用户进行缩放。

并且使用rem不使用px：rem为元素设定字体大小时，仍然是相对大小，但相对的只是HTML根元素。

 

2.使用百分比布局

 

3.响应式bootstrap插件

bootstrap下的栅格布局

 

4.相对长度单位em

em的特点 : ① em的值并不是固定的; ② em始终会继承父级元素的字体大小。

em（font size of the element）是指相对于父元素的字体大小的单位。

 

js:

基本数据类型:Undefined (未定义)、Boolean(布尔型true或false)、String(字符串)、Number(数值)、Object(对象或null)、Function(函数)

引用数据类型：Object(对象)、Array(数组)

 

数值的转换：

数值转字符串：var a=10,var age=a.toString()，

检测数据类型：

typeof检测基本数据类型：var a ;  console.log(typeof a)  //undefined

instanceof检测引用数据类型(返回true或false)

Array检测数组

 

作用域：

基本数据类型的作用域：

var  num1=10;

var num2=num1;

他们是两个不同的number类型。互不影响。

引用数据类型的作用域：

var obj1=new Object();

var  obj2=obj1;

他们会指向同一个数据类型