1.数据类型:

  可变的引用类型:object(array ,function,正则);

  不可变的原始类型:null, undefined, number, string, boolean, symbol(es6)

//引用类型var arr1 = [1,2];var arr2 = arr1arr2.push(3)console.log(arr1) //[1,2,3]
//原始类型var str1 = "111";var str2 = str1;str2 = "222"console.log(str1)    //111

2.if的真和假: 

  以下情况会被认为返回false:(反之为真)

  • " " 空的字符串
  • 为 0 的数字
  • 为 null 的对象
  • 为 undefined 的对象
  • 布尔值 false

3.事件冒泡,默认行为:

 1).DOM2级事件规定的时间流包括 三个阶段:

  • 事件捕获阶段
  • 处于目标阶段
  • 事件冒泡阶段

事件冒泡: 当一个元素接收到事件的时候,会把她接收到的事件依次向上传递,一直到window.

默认行为: 触发事件动作发生后的表现,比如点击链接会跳转,点击提交按钮会提交并刷新页面.

 2)阻止事件冒泡 

  w3c:event.stopPropagation()

  ie:event.canleBubble = true;

window.event? window.event.cancelBubble = true : e.stopPropagation();    //兼容的写法

  写法:

 document.getElementById("button").addEventListener("click",function(event){alert("button");event.stopPropagation();    },false);

3)取消默认事件

  w3c的方法是e.preventDefault(),IE则是使用e.returnValue = false;·

//假定有链接<a href="http://caibaojian.com/" id="testA" >caibaojian.com</a>
var a = document.getElementById("testA");
a.onclick =function(e){if(e.preventDefault){e.preventDefault();}else{window.event.returnValue == false;}
}

  return false;

<div id='div'  onclick='alert("div");'><ul  onclick='alert("ul");'><li id='ul-a' onclick='alert("li");'><a href="http://caibaojian.com/"id="testB">caibaojian.com</a></li></ul>
</div>
var a = document.getElementById("testB");
a.onclick = function(){return false;
};

5.闭包:

  闭包: 就是能够读取到其他函数内部变量的函数(通俗点讲就是函数a的内部函数b,被函数a外部的一个变量引用的时候, 就产生了一个闭包)

function  a() {n = 99;function b () {alert(n);} retrun b;
}
var result = a ();
result();  //99

6.$().ready()和window.onload

 区别:

1) 运行时间

  window.onload必须等到页面内包含图片的全部元素载入完成后才运行。

  $(document).ready()是DOM结构绘制完成后就运行,不必等到载入完成。

2) 编写个数不同

  window.onload不能同一时候编写多个,假设有多个window.onload方法,仅仅会运行一个。

  $(document).ready()能够同一时间编写多个。而且都能够得到运行。

 如何用js实现ready()方法;

function ready(fn){if(document.addEventListener){        //标准浏览器document.addEventListener('DOMContentLoaded',function(){//注销时间,避免重复触发document.removeEventListener('DOMContentLoaded',arguments.callee,false);fn();        //运行函数},false);}else if(document.attachEvent){        //IE浏览器document.attachEvent('onreadystatechange',function(){if(document.readyState=='complete'){document.detachEvent('onreadystatechange',arguments.callee);fn();        //函数运行}});}
}

7,px和em和rem的区别?

px:像素大小

em:如果自己有font-size的像素,如果自己标签没有设置font-size就继承父级的。

rem:是继承html标签的font-size的像素

8.DOM节点的增删改查?

  查:getElementByIsd()....等等

  增;appendChild():末尾插入;

    insertbeforer():特定位置插入;

  改:replaceChild():接受两个参数,第一个为要插入的节点,第二个为要替换的节点;

  删:removeChild();

  创建:createElement()  

  复制:cloneNode(true|false) ; //默认是 false。克隆节点本身; 为 true,克隆节点及其属性,以及后代;

9,JSONP的原理?

  根据浏览器同源策略,所谓同源就是协议、主机、端口号都相同时成为同源。a 域的js不能直接访问 b域名的信息,但是script 标签的src属性可以跨域引用文件,jsonp是请求之后后台包装好一段json,并且把数据放在一个callback函数,返回一个js文件,动态引入这个文件,下载完成js之后,会去调用这个callback,通过这样访问数据。

10,如何判断一个数组和类数组?

  Object.prototype.toString.call()

11,什么是事件委托,jquery和原生js怎么去实现?

  事件委托:利用事件冒泡的原理(不清楚请看3.1)当一个子级没有绑定事件时他会一直向上寻找,此时父级绑定的事件就是事件委托.

  具体实现:

    原生js:

//原生的实现方法
//情景:为父级绑定事件,点击子级时分别显示子级自己的html内容
farter.onclick = function(ev){var ev = ev || window.event;       //兼容var target = ev.target || ev.srcElement;   //target是获取当前的元素节点if(target.nodeName.toLowerlase == "child"){arert(target.innerHTML) ;}
} 

    jq:

  delegate("选择器","事件",回调函数)

12,web前端开发,如何提高页面性能优化?(请参考雅虎军规)

  内容:

  1.尽量减少HTTP请求数

2.减少DNS查找

3.避免重定向

4.让Ajax可缓存

5.延迟加载组件

6.预加载组件

7.减少DOM元素的数量

8.跨域分离组件

9.尽量少用iframe

10.杜绝404

css部分:

11.避免使用CSS表达式

12.选择<link>舍弃@import

13.避免使用滤镜

14.把样式表放在顶部

js部分:

15.去除重复脚本

16.尽量减少DOM访问

17.用智能的事件处理器

18.把脚本放在底部

CSS && JS:

19.把JavaScript和CSS放到外面

20.压缩JavaScript和CSS

img:

21.优化图片

22.优化CSS Sprite

23.不要用HTML缩放图片

24.用小的可缓存的favicon.ico(P.S. 收藏夹图标)

cookie:

25.给Cookie减肥

26.把组件放在不含cookie的域下

移动端:

27.保证所有组件都小于25K

28.把组件打包到一个复合文档里

服务器:

29.Gzip组件

30.避免图片src属性为空

31.配置ETags

32.对Ajax用GET请求

33.尽早清空缓冲区

34.使用CDN(内容分发网络)

35.添上Expires或者Cache-Control HTTP头

-------------------------------------------未完待续--------------------------------------------

前端面试题--重要基础知识回顾(一)相关推荐

  1. 前端面试题(理论知识+HTML+CSS+JavaScript)

    之前我也收集整理分享了一些前端面试题目的文章,有的附了答案,有的没有附答案:虽然我们不是为了做题而做题目,也不是只为了在面试中过关,我们做题目的,首先,是看我们对基础知识的掌握程度:其次,也是对重要知 ...

  2. 前端面试题汇总 - 基础

    前端面试基础题汇总 HTML5基础 H5新增内容 什么是BFC BFC特性 localStorage和sessionStorage 一个小问题:清除图片间隙 元素水平垂直居中 浏览器输入URL后的流程 ...

  3. 前端面试题---HTML基础

    文章目录 1. HTML 文件中的 DOCTYPE 是什么作用? 2. HTML.XML.XHTML 之间有什么区别? 3. 前缀为 `data-` 开头的元素属性是什么? 4. 谈谈你对 HTML ...

  4. 前端面试题——HTML基础篇

    如何进行网站的性能优化 content方面 减少http请求 合并文件 css精灵图 减少 DNS 查询 DNS缓存 将资源分布到恰当数量的主机名 减少 DOM 元素的数量 Server方面 使用CD ...

  5. 2023高薪前端面试题(一、前端基础——HTTP/HTML/浏览器)

    说一下http和https? http:超文本传输协议,是一个基于请求与响应.无状态的应用层协议,以明文方式发送信息,最初设计目的是提供一种发布和接收 HTML 页面的方法. https:是http的 ...

  6. 前端面试题 回顾与复习(更新中)

    还没有完全整理好 希望大家见谅 后面逐步优化 原生DOM操作 如需替换 HTML DOM 中的元素,请使用replaceChild(newnode,oldnode)方法 从父元素中删除子元素 pare ...

  7. 前端面试题汇总(css基础篇)

    前端面试题汇总(css基础篇) 1 css sprite是什么,有什么优缺点 概念:将多个⼩图⽚拼接到⼀个图⽚中. 通过 background-position 和元素尺⼨调节需 要显示的背景图案. ...

  8. 前端面试题汇总(JS 基础篇)

    前端面试题汇总(JS 基础篇)** 1.javascript 的 typeof 返回哪些数据类型** object number function boolean underfind stringty ...

  9. 【前端面试题】—53道常见NodeJS基础面试题(附答案)

    说到前端就不得不提到后端,我们给用户展示页面所需的数据正是从后端获取的,所以了解后端的运行原理和技术的实现很有必要. Node. js是一个不错的选择,它是基于JavaScript语法的一套服务器端( ...

最新文章

  1. 核爆rpg手机版_好嗨游戏:不玩吃亏 ,20款全世界最佳移动RPG角色扮演游戏(上)...
  2. linux作为办公机器,Ubuntu能否做日常办公使用?
  3. Disruptor之概览
  4. 女程序员被阿里录取工资二万六,辞职时被领导挽留:给你四万留下
  5. 1.Rabbitmq学习记录《本质介绍,协议AMQP分析》
  6. Python案例:获取全国城市列表(区号与名称)
  7. php性能测试xhprof,PHP性能分析之Xhprof的使用
  8. Lc101对称二叉树
  9. OpenSessionInViewFilter失效问题
  10. 世界上主要BIOS厂家介绍(Phoenix,AMI,Insyde,Byosoft)
  11. 2022凯立德导航懒人包完整版(地图包)绝对可以用
  12. JAVA中三个点“...”是什么意思
  13. 云计算安全-云服务举例
  14. ACM------吃在工大(合工大OJ 1359)
  15. iPad能装Android系统,我错了,原来iPad真的能装Windows和MacOS系统
  16. Google Earth Engine(GEE)农作物种植结构提取
  17. 云课堂计算机课病毒及安全设置答案,智慧职教云课堂PC端
  18. 动力节点『lol版』Java学习路线图(七)架构师提升必备技术点
  19. Spring 编程式定时任务
  20. Windows10安装Ubuntu桌面子系统WSL2

热门文章

  1. Web 趋势榜:上周最有意思又热门的 10 大 Web 项目 - 210709
  2. PHP进行图片下载的时候,出现图片损坏,无法打开(实质原因,多输出了一个空白字符ZWNBSP )
  3. Linux sed删除文件注释行并删除空行
  4. win10 + mac双系统安装常用工具
  5. golang go mod包管理自定义包及init初始化函数介绍
  6. linux命令使用示例:查看某目录属于哪个分区
  7. maven报错: 错误的类文件:… 类文件具有错误的版本 52.0,应为 54.0
  8. JVM加载class文件的原理简述
  9. MySQL优化union查询
  10. Redis分布式锁加时效和不加时效两种方案的最全代码实现