摘要:最近面试几家前端职位,想知道目前的前端面试题是偏向哪一块,都主要问到的是语法,闭包,原型链,继承那一块。并且将面试题的知识点汇总一下。参考网站面试题图片过多的时候如何优化图标很多的时候可以用雪碧图图片过大时候可以压缩一下。
最近面试几家前端职位,想知道目前的前端面试题是偏向哪一块,都主要问到的是ES6语法,闭包,原型链,继承那一块。并且将面试题的知识点汇总一下。有助于下次面试。
1.HTML HTML5新特性,语义化HTML5新增了许多标签
SEO(搜索引擎优化);结构更加清晰,方便维护.
浏览器的标准模式和怪异模式在W3C还没有制定出标准之前,不同的浏览器有属于自己一套标准.不同浏览器会根据自己的规则渲染页面.那么渲染出来的页面就不同,为怪异模式。那么W3C制定出一系列标准规则之后。浏览器按这套规则渲染页面那就是标准模式
xhtml和html的区别1.xhtml里面的标签必须闭合。
2.xhtml里面的标签必须小写。
3.xhtml里面必须嵌套元素是正确的。
1.自定义属性可以统一化。
2.以后维护更加的方便,页面结构清晰
3.element.dataset.获取信息
var main = document.querySeletor("div"); console.log(div.dataset.main); //mainmeta标签
meta标签一般表述当前文档的属性.例如作者关键字等等信息。
详细了解参考https://www.cnblogs.com/reaf/...
canvas是一个HTML5提供的绘图API,通过getContent()方法获取画笔才可绘图。与svg的最大差别是svg使用一个 XML 文档来描述绘图.
HTML废弃的标签 IE6 bug,和一些定位写法1.双边距bug:当元素使用float过后,使用margin都会有两倍边距,需要明确其元素类型来解决边距问题. display:inline或display:block;
2.相对父容器绝对定位bug
ie6很多bug可以通过触发layout来解决。无论设置zoom:1或者设置宽高都能触发。
参考链接
IE6中的常见BUG
IE6相对父容器绝对定位的bug及其解决办法
一般来说css和js都是通过外部引入的。这样方便维护管理。
由于浏览器的加载顺序,css放在head标签中,js会阻塞html加载。我建议页面效果显示的js放在body之前,交互,事件的js可以放在后面。
浏览器的渲染:过程与原理
What is progressive rendering?
一般平常的数据渲染,需要用字符串与数据一个个拼接而成,但后期维护很麻烦。于是有了html模板。不同的html模板可以写法也不同。es6有一种是叫模板字符串 数据通过#{}并接而成.
meta viewportmeta介绍参考
常用的meta
css3增加了很多新的特性,但兼容的话一般在IE9+,例如box-sizing,CSS选择器,背景background-size,边框阴影,圆角等等.
伪类一个冒号: 伪元素两个冒号:: 权重级别不一样
:first-child :hover :active
::before ::after 兼容性不好
伪类伪元素
一般用于真正的内容用伪类,但伪元素用于比如图标之类的没有什么实质的内容。
伪类与伪元素差别
display:none元素隐藏.页面宽高不显示.不占页面位置.
opactiy: 0 只是将透明度设置为0,但占页面位置.
visibilty: hidden 也是隐藏元素
link标签引用在head标签里面,@import 引用于在CSS样式表中。
加载顺序问题.link是在页面加载的时候可以同时加载CSS ,@import需要在加载页面内容之后才加载
link兼容性比@import好些。
一般使用于移动端和高级浏览器.运用了弹性布局那么float,clear,vertical-align都会失效。
有分主轴和交叉轴。
1.float方法实现
2.flex布局实现
一般以引用的样式来说 内联样式 > 内部样式 > 外部样式(就近原则)
权重级别
important 最高级
行内 +1000
id +100
属性选择器,类,伪类 +10
元素,伪元素 +1
通用符* 0
CSS权重
基本类型: null,undefined,number,string,boolean
引用类型: object => function,(number,string,boolean)包装对象,Date等等。
基本类型属于栈
引用类型属于堆
null和undefined的区别
null是访问一个尚未存在的对象时所返回的值。 转换成数值类型为 0
undefined是访问一个未初始化的变量时返回的值。 转换数值类型为NaN.
包装对象与基本类型的区别
无法在基本类型上添加方法属性。
包装对象可以添加属性。
轻松理解JS基本包装对象
判断是否是Array类型
1.通过instanceof 判断原型对象是否指向Array构造对象
arr instanceof Array // true
2.对象的constructor属性
arr.constructor = Array // true
解释一下事件冒泡和事件捕获
一般一个事件触发时候会进行事件流,而事件流有两个阶段一个就是从外到里为捕获阶段,从里到外是冒泡阶段。
阻止冒泡方法
function stop(e){ if(e.stopPropagation){ e.stopPropagation(); }else{ e.cancelBubble = true; } }
对闭包的理解?什么时候构成闭包?闭包的实现方法?闭包的优缺点
闭包是外部能访问内部变量的函数。一般来说内部定义的函数能访问到外部的变量。但外部无法访问内部函数里面定义的变量。
function a(){ var i = 0; function b(){ console.log(i) return b; } }
这样就形成了闭包,当外部定义个变量时候,接收a函数的返回值,执行这个函数就能获取到这个变量。
优点 解决外部无法获取内部函数的值
缺点 闭包会使得这个变量一直占据内存中。
this 指向用于三种场景
1.在构造函数中方法使用this,这this指向实例。
2.事件中使用this,这this指向对应的dom元素
3.全局方法使用this。会执行window.如果是node环境下。指向global
call,apply 都是改变函数执行上下文。
call与apply就一个区别就是传入参数的问题。call是一个个传入,apply是以数组的形式传入。
而bind是返回一个函数副本。他不会执行函数。需要自己手动执行函数。
聊一聊call、apply、bind的区别
显示原型和隐式原型,手绘原型链,原型链是什么?为什么要有原型链
http://www.cnblogs.com/wangfu...
1.直接用字面量创建
var obj = {}
2.构造函数创建
function obj(){} var obj1 = new obj;
3.直接通过new object()创建
4.工厂函数创建
JS创建对象几种不同方法详解
变量提升在Javascript中,变量声明和函数声明会最先执行。
函数声明大于变量声明
例如
function a(){} var a; console.log(a) // function a(){}
函数声明
function a(){}
函数表达式
var a = function(){} 等同于 var a = 1;
宿主对象和原生对象(内部对象)的区别
宿主对象 是浏览器提供的对象 BOM如Window和Document等 DOM对象
原生对象(内部对象)是指JS内置的对象 String Number Boolean Date
还有自己定义的对象 自定义对象。
document DOMContentLoaded是DOM加载完毕会执行这个函数 等同于JQ中的$(function(){})
document load 是JS加载完成才执行这个函数
"number"、"string"、"boolean"、"object"、"function" 和 "undefined"
注意 typeof null , array,{} 都检测出object
好处: 1.使得JS语法更加规范化。目前的ES6是严格模式。2.能早点发现代码的错误问题,提高代码的安全性。
坏处: 一般网站都会将JS代码进行压缩,但是有些JS代码有严格模式,而有些代码没有严格模式。当他们合并在一起,会浪费字节。
函数作用域是函数里面有作用域,比如在函数体中定义个变量,在外部访问不到这个变量的。
JS作用域中有三种。全局作用域,函数作用域,块级作用域。es6语法才支持块级作用域。
弄懂JavaScript的作用域和闭包
数组常用API 字符串apiArray
增: arr.push() arr.unshift()
删: arr.pop() arr.shift()
改: arr.reverse() arr.sort() arr.concat() arr.join() arr.slice() arr.splice() arr.toString()
查: arr.indexOf() arr.lastIndexOf()
数组常用API
String
字符串常用API
http://www.jb51.net/article/9...
编写一个通用的事件监听函数https://blog.csdn.net/github_...
web端cookie的设置和获取 原生事件绑定(跨浏览器),dom0和dom2的区别?dom0
ele.onclick = handler;ele.onclick=null;最古老的一种方式
优点:全浏览器兼容
缺点:同一事件只能绑定/解绑一个事件处理器
ele.add/removeEventListener(eventType, handler, catch);
和IE方式:ele.attach/detachEvent(‘on’+eventType, handler);
优点:支持绑定/解绑多个事件处理器
缺点:需要做兼容性判断。
JS原生事件处理(跨浏览器)
如何实现图片滚动懒加载懒加载原理是图片还没到可视区域时先用一张很小的图片来当背景,如果滚动到可视区域时,再加载图片路径。
滚动加载图片(懒加载)实现原理
https://blog.csdn.net/qiqingj...
DOM事件的绑定的几种方式三种绑定事件的方式
1.直接在DOM 上面绑定
2.通过脚本里面绑定
3.通过监听事件绑定
https://www.cnblogs.com/mylov...
工厂模式 Factory Pattern,
单例模式 Singleton Pattern,
模块模式,
发布订阅模式,
中介者模式 Mediator Pattern,
代理模式 Proxy Pattern
https://www.cnblogs.com/tugen...
4.ES6 谈一谈 promisepromise对象主要处理回调函数的对象。实例化一个promise对象之后有三种状态 pending: 初始状态,既不是成功,也不是失败状态。
fulfilled: 意味着操作成功完成,rejected: 意味着操作失败。
实例化promise对象有两个参数 resolve 和 reject 。
promise实例化生成之后可以通过then() 和catch()链式调用自定义方法。
参考网站
1.图标很多的时候可以用雪碧图
2.图片过大时候可以压缩一下。
3.小图标如果不用雪碧图可以考虑用base64编码
4.图片缓存
function aaa(str){ return str.split("").join(" "); } aaa("123"); // 1 2 3怎么获取checkbox的元素,用JS怎么写
document.getElementsByName("") 获取所有name属性的元素
其次还有document.getElementsByTagName() 获取标签元素
document.getElementById 获取ID
document.getElementsByClassName 获取类名
JS
createElement //创建一个元素
createTextNode //创建一个文本节点
JQ
$("
添加,移除,插入
JS
insertBefore() // 被选元素的前面插入
appendChild() // 被选元素的后面插入
removeChild() // 删除
JQ
append() //被选元素插入内容
prepend()
remove()
insertAfter() //被选元素的前面插入
instetBefore()
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/115893.html
摘要:个人也建议不要满足于自己当下所知道的,多去拓展自己,多去学新的东西。作为一个面试者来说,知识点的记忆准备为的是更好的应对面试中技术面中问到的各种问题。 你好,是我琉忆——PHP程序员面试笔试系列图书的作者。 随着越来越多的人开始迈入PHP开发工程师的队列,不管是一个PHP新手还是一个有一两年开发经验的PHPer都不得不去面对找工作前面试这件事。 我现在以个人对面试的经历和见解来全面的对...
摘要:获取的对象范围方法获取的是最终应用在元素上的所有属性对象即使没有代码,也会把默认的祖宗八代都显示出来而只能获取元素属性中的样式。因此对于一个光秃秃的元素,方法返回对象中属性值如果有就是据我测试不同环境结果可能有差异而就是。 花了很长时间整理的前端面试资源,喜欢请大家不要吝啬star~ 别只收藏,点个赞,点个star再走哈~ 持续更新中……,可以关注下github 项目地址 https:...
摘要:好不容易在月号这天中午点左右接到了来自阿里的面试电话。这里会不断收集和更新基础相关的面试题,目前已收集题。面试重难点的和的打包过程多线程机制机制系统启动过程,启动过程等等扫清面试障碍最新面试经验分享,此为第一篇,开篇。 2016 年末,腾讯,百度,华为,搜狗和滴滴面试题汇总 2016 年未,腾讯,百度,华为,搜狗和滴滴面试题汇总 各大公司 Java 后端开发面试题总结 各大公司 Jav...
阅读 1979·2021-09-29 09:35
阅读 1926·2019-08-30 14:15
阅读 2953·2019-08-30 10:56
阅读 930·2019-08-29 16:59
阅读 541·2019-08-29 14:04
阅读 1277·2019-08-29 12:30
阅读 1001·2019-08-28 18:19
阅读 450·2019-08-26 11:51