前端总结（一）

最新推荐文章于 2022-11-16 08:44:22 发布

cdgogo

最新推荐文章于 2022-11-16 08:44:22 发布

阅读量164

点赞数

分类专栏：前端面试

本文链接：https://blog.csdn.net/cdgogo/article/details/108305599

版权

前端面试专栏收录该内容

2 篇文章 0 订阅

订阅专栏

一、position属性四个值区别和用法

1、static（静态定位）：默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。

2、relative（相对定位）：生成相对定位的元素，通过top,bottom,left,right的设置相对于其正常（元素本身）位置进行定位。可通过z-index进行层次分级。　
　
3、absolute（绝对定位）：生成绝对定位的元素，相对于 **static 定位以外**的**第一个父元素**进行定位。元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。可通过z-index进行层次分级。

4、fixed（固定定位）：生成绝对定位的元素，相对于**浏览器窗口**进行定位。元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。可通过z-index进行层次分级。

二、display:none、visibility ：hidden、 opacity:0的区别是什么

1 opacity=0，该元素隐藏起来了，但不会改变页面布局，并且，如果该元素已经绑定一些事件，如click事件，那么点击该区域，也能触发点击事件的（隐藏，可触发）

2 visibility=hidden，该元素隐藏起来了，但不会改变页面布局，但是不会触发该元素已经绑定的事件（隐藏、不能触发）

3 display=none，把元素隐藏起来，并且会改变页面布局，可以理解成在页面中把该元素删除掉一样（直接删除，消失）

三、$(document).ready()方法和window.onload有什么区别？

$(document).ready:是**DOM结构绘制完毕后就执行，不必等到加载完毕。意思就是DOM树加载完毕，就执行，不必等到页面中图片或其他外部文件都加载完毕。并且可以写多个.ready。**

window.onload:是页面**所有元素都加载完毕，包括图片等所有元素。只能执行一次**。

四、一个页面从输入url到页面加载显示完成，过程中都发生了什么

浏览器根据请求的URL交给DNS域名解析，找到真实IP，向服务器发起请求；

服务器交给后台处理完成后返回数据，浏览器接收文件（HTML、JS、CSS、图象等）；

浏览器对加载到的资源（HTML、JS、CSS等）进行语法解析，建立相应的内部数据结构（如HTML的DOM）；

载入解析到的资源文件，渲染页面，完成。

五、性能优化

1、减少Http请求，减少http的主要手段是合并CSS、合并javascript、合并图片等。

2、使用浏览器缓存

3、启用压缩

4、CSS Sprites（CSS精灵图）

5、LazyLoad Images
图片懒加载，大图片用此技术，不会出现加载延迟卡顿

6、CSS放在页面最上部，javascript放在页面最下面

7、减少cookie传输

8、使用CDN加速（内容分发网络）

六、DNS解析

什么是DNS解析？当用户输入一个网址并按下回车键的时候，浏览器得到了一个域名。而在实际通信过程中，我们需要的是一个IP地址。因此我们需要先把域名转换成相应的IP地址，这个过程称作DNS解析。

七、js闭包

所谓闭包就是说，一个函数能够访问其函数外部作用域中的变量。

「函数」和「函数内部能访问到的变量」（也叫环境）的总和，就是一个闭包。
在这里插入图片描述

闭包的三大特点为：

1、函数嵌套函数
2、内部函数可以访问外部函数的变量
3、参数和变量不会被回收。

总结：
闭包是指有权访问另一个函数作用域中的变量的函数，创建闭包的最常见的方式就是在一个函数内创建另一个函数，通过另一个函数访问这个函数的局部变量。闭包的缺点就是常驻内存，会增大内存使用量，使用不当很容易造成内存泄露。

闭包的作用在于，可以通过闭包，设计私有变量及方法。

作用：可以读取函数内部的变量，另一个就是让这些变量的值始终保持在内存中，不会被垃圾回收机制清除，方便调用上下文的局部变量。利于代码封装

八、浏览器兼容

初始化样式
不同浏览器的默认样式存在差异，可以使用 Normalize.css 抹平这些差异。当然，你也可以定制属于自己业务的 reset.css
IE 条件注释
html5shiv.js，解决 ie9 以下浏览器对 html5 新增标签不识别的问题。
respond.js，解决 ie9 以下浏览器不支持 CSS3 Media Query 的问题。
CSS 兼容前缀

九、es6新特性

1.不一样的变量声明：const和let
let表示声明变量，而const表示声明常量，两者都为块级作用域；const 声明的变量都会被认为是常量，意思就是它的值被设置完成后就不能再修改了

2、模板字符串

3、箭头函数
……

十、跨域

跨域是由浏览器同源策略引起的，是指页面请求的接口地址，必须与页面url地址处于同域上（即域名，端口，协议相同）。这是为了防止某域名下的接口被其他域名下的网页非法调用，是浏览器对JavaScript施加的安全限制。

这个措施出发点是好的，但在项目开发的过程中，常常给前端开发者带来麻烦。由于页面开发中，静态资源是放在本地电脑上的，访问这些资源通常通过IP方式（127.0.0.1）或者localhosts来访问，与线上服务器所在域名不符，不能顺利进行接口调用。

跨域解决办法有哪些？

JSONP

原理: <script>标签不受跨域限制，ps：所有src属性都不受同源限制，比如<img>

JSONP缺点: 只支持GET请求，不支持其他类型请求；优点：兼容性很好好，可以在古老的浏览器中运行。

CORS
CORS是一个W3C标准，全称是"跨域资源共享"（Cross-origin resource sharing）。它允许浏览器向跨源服务器，发出XMLHttpRequest请求。

不管是标准的CORS或黑科技JSONP，都不是纯前端能解决的，都需要服务器端配合。

JSONP需要服务器端返回的JS文件内有回掉方法。CORS需要服务器端配置CORS信息。

JSONP是只读的，也就是说只能从服务器端获取数据，不能提交数据。

CORS是标准，对服务器端更友好。虽然服务器端需要配置，但是控制的粒度可以更细。可以控制允许哪些IP、哪些HTTP method可以访问、哪些header信息可以暴露给前端

十一、异步

异步加载也叫非阻塞模式加载,浏览器在下载js的同时,还会执行后续的页面处理.

何时需要异步
1 需要等待的情况
2 在等待过程中不能像alert一样阻塞程序运行
3 等待的情况需要异步、
使用场景:

1 定时任务setTimeout, setInterval
2 网络请求 ajax 动态img图片加载
3 事件绑定

十二、数组去重

1.它是最简单的数组去重方法（indexOf方法）
实现思路：新建一个数组，遍历去要重的数组，当值不在新数组的时候（indexOf为-1）就加入该新数组中；

var arr=[2,8,5,0,5,2,6,7,2];
function unique1(arr){
  var hash=[];
  for (var i = 0; i < arr.length; i++) {
     if(hash.indexOf(arr[i])==-1){
      hash.push(arr[i]);
     }
  }
  return hash;
}

2.实现思路：双层循环，外循环表示从0到arr.length，内循环表示从i+1到arr.length
将没重复的右边值放入新数组。（检测到有重复值时终止当前循环同时进入外层循环的下一轮判断）

function unique4(arr){
  var hash=[];
  for (var i = 0; i < arr.length; i++) {
    for (var j = i+1; j < arr.length; j++) {
      if(arr[i]===arr[j]){
        ++i;
      }
    }
      hash.push(arr[i]);
  }
  return hash;
}

十三、css3 transtion和animation区别

触发条件不同。transition通常和hover等事件配合使用，由事件触发。animation则和gif动态图差不多，立即播放。
循环。 animation可以设定循环次数。
精确性。 animation可以设定每一帧的样式和时间。tranistion 只能设定头尾。 animation中可以设置每一帧需要单独变化的样式属性， transition中所有样式属性都要一起变化。

十四、数组方法

十五、js六大数据类型

js中有六种数据类型，包括五种基本数据类型（Number,String,Boolean,Undefined,Null）,和一种复杂数据类型（Object）

typeof 操作符

由于js中的变量是松散类型的，所以它提供了一种检测当前变量的数据类型的方法，也就是typeof关键字.
typeof 123　　 //Number
typeof ‘abc’　　//String
typeof true //Boolean
typeof undefined //Undefined
typeof null //Object
typeof { } //Object
typeof [ ] //Object
typeof console.log() //Function

null类型进行typeof操作符后，结果是object，原因在于，null类型被当做一个空对象引用。

十六、事件委托机制

目的——为了减少对DOM的操作，使用事件委托。

原理——事件委托是利用事件的冒泡原理来实现的，何为事件冒泡呢？就是事件从最深的节点开始，然后逐步向上传播事件，举个例子：页面上有这么一个节点树，div>ul>li>a;比如给最里面的a加一个click点击事件，那么这个事件就会一层一层的往外执行，执行顺序a>li>ul>div，有这样一个机制，那么我们给最外面的div加点击事件，那么里面的ul，li，a做点击事件的时候，都会冒泡到最外层的div上，所以都会触发，这就是事件委托，委托它们父级代为执行事件

十七、移动端横竖屏适配方案

十八、return false、 break的区别

十九、H5本地存储数据 localStorage，sessionStorage的区别

cdgogo

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
前端总结（一）

一、position属性四个值区别和用法1、static（静态定位）：默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。2、relative（相对定位）：生成相对定位的元素，通过top,bottom,left,right的设置相对于其正常（元素本身）位置进行定位。可通过z-index进行层次分级。　　3、absolute（绝对定位）：生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。元素的位置通过 “
复制链接

扫一扫

专栏目录