前端面试题--刷题进行时(题目答案总结)

最近开始用琐碎的时间看看前端基础的面试题目,很久之前记录的一些题目都没有答案,这回开始每天总结几道,查询记录下答案,顺便也贴到这里来,方便查询。
\color{blue}{1、Doctype作用?严格模式与混杂模式如何区分?它们有何意义?}
告知浏览器是以什么文档标准解析文档;
严格模式:标准模式;混杂模式:兼容模式、混杂模式
意义:如果只存在严格模式,那很多旧网站必会受到影响;如果只存在兼容模式,则又回到浏览器大混乱时代,没有统一的标准,每个浏览器都有自己的解析模式。
\color{blue}{2、HTML5 为什么只需要写 <!DOCTYPE HTML>?}
html5不基于SGML,不需要对DTD进行引用,但需要doctype来规范浏览器的行为,不存在严格模式和兼容模式,有相对宽容的语法,已经尽可能的实现了向后兼容。
SGML是标准通用标记语言,比HTML、xml更老的标准
\color{blue}{3、行内元素有哪些?块级元素有哪些? 空(void)元素有那些?}
行内:a、b、span、input、button、select、strong、label、em、textarea
块级:div、p、 ul 、 li、 h1-h6、 dl、 dt、 dd、 blockquate
空(没有内容的HTML元素):br、 meta、 img 、 hr、 link、 input
\color{blue}{4、页面导入样式时,使用link和@import有什么区别?}
1、link是XHTML标签,可以引用css、RSS、定义rel属性;import只能引入css
2、打开页面是link跟页面同时加载;import 加载完界面后加载
3、link无兼容问题;import低版本浏览器不支持
4、link 支持使用javascript控制DOM改变样式,import不支持
\color{blue}{5、介绍一下你对浏览器内核的理解?}
分为渲染引擎和js引擎:
渲染引擎负责取得网页的内容(HTML、css等)、整理讯息(加载css)、计算网页的显示方式,然后输出到浏览器或打印机。内核不同显示第效果也不同。
js引擎:解析和执行js来实现网页动态效果。
webkit:谷歌浏览器内核--渲染速度快、源码清晰、兼容性较差
trident:IE、360、低版本对h5等一些支持度差
Gecko:火狐--消耗内存多,有丰富开发接口
\color{blue}{6、见的浏览器内核有哪些?}
webkit:谷歌
trident:IE、360,搜狗
gecko:火狐
\color{blue}{7、html5有哪些新特性、移除了那些元素?如何处理HTML5新标签的浏览器兼容问题?如何区分 HTML 和 HTML5?}
针对位置、图标、存储、多任务等功能的添加:
拖拽释放API、地理API
语义化更好的标签:audio、video、header、footer、
\color{blue}{8、简述一下你对HTML语义化的理解?}
根据内容的结构化,选择合适的标签,便于开发者阅读和优雅的编写代码。
why:
为了在没有css的情况下,页面也能呈现很好的结构(为了好看)
用户体验更好:例如title、alt等用于解释名词或者信息
有利于SEO:和搜索引擎建立更好的沟通,有利于爬虫抓取更多的有效信息。
方便其他设备解析,比如阅读器等
便于团队开发和维护,语义化具有更好的可读性,减少差异化。
注意什么?
尽可能少的应用无语义的标签 比如div和span
在语义不明显时,比如可以使用div和p,尽量用p,具有上下间距更好兼容
不使用纯样式标签,比如font 、b 等,改用css设置
需要强调的可用strong
表格标题用caption,表头thead,主题tbody,底部tfoot,表头和一般单元格要分开,表头用th,一般用td
每个input 都要对应label 说明文本
<meta charset="utf-8">

\color{blue}{9、HTML5的离线储存怎么使用,工作原理能不能解释一下?}
使用:头部添加manifest属性

image.png

manitest文件格式:

CACHE MANIFEST

#v0.11

CACHE:

js/app.js

css/style.css

NETWORK:

resourse/logo.png

FALLBACK:

/ /offline.html

(1)CACHE:需要离线缓存的文件,不用写页面自身
(2)NETWORK:文件只能在线情况下访问,不缓存。
(3)FALLBACK:若一地个资源访问失败,则访问这里的资源,比如404页面

工作原理:
基于一个新建的.appcache文件,通过这个文件上的结息清单离线存储资源,这些资源就会像cookie一样被存储,之后网络处于离线状态时,浏览器会通过离线缓存的文件加载页面,和cookie文件一样,h5的离线缓存也需要服务器环境。

\color{blue}{10、浏览器是怎么对HTML5的离线储存资源进行管理和加载的呢?}

在线情况下,浏览器发现HTML文件头部有manifest属性,浏览器会请求manifest文件,如果第一次访问,则按照文件中内容下载对应资源缓存;下次在线访问时,如果资源已被缓存,则浏览器直接读取缓存文件,然后对比新的manifest和旧的manifest文件,如果有变化,则重新下载文件内容进行缓存,若没有变化则不作任何操作;离线加载时会直接获取缓存文件加载。

\color{blue}{11、浏览器的渲染过程?}

1、首先获取html,然后构建dom树
2、其次根据css构建render树,render树中不包含定位和几何信息
3、最后构建布局数,布局是含有元素的定位和几何信息

\color{blue}{12、重构、回流?}

浏览器的重构指的是改变每个元素外观时所触发的浏览器行为,比如颜色,背景等样式发生了改变而进行的重新构造新外观的过程。重构不会引发页面的重新布局,不一定伴随着回流,回流指的是浏览器为了重新渲染页面的需要而进行的重新计算元素的几何大小和位置的,他的开销是非常大的,
回流可以理解为渲染树需要重新进行计算,一般最好触发元素的重构,避免元素的回流;比如通过通过添加类来添加css样式,而不是直接在DOM上设置,当需要操作某一块元素时候,最好使其脱离文档流,这样就不会引起回流了,比如设置position:absolute或者fixed,或者display:none,等操作结束后在显示

\color{blue}{13、css选择器优先级关系}
!important > 内联样式 > ID选择器 > 类选择器 = 属性选择器 = 伪类选择器 > 标签选择器 = 伪元素选择器 > 通配符选择器

JavaScript

\color{blue}{1、JavaScript的数据类型?}

基本数据类型:Number,String,Boolean,Undefined,Null
复杂数据类型:Object,Array,Function,RegExp,Date,Error
全局数据类型:Math

\color{blue}{2、JavaScript的闭包?}

闭包简单的说就是一个函数能访问外部函数的变量,这就是闭包,比如说:

function a(x){
       var tem=3;
      function b(y){
          console.log(x+y+(++tem));
     }
}

a函数中的b函数就是闭包了,b函数可以使用a函数的局部变量,参数,最典型的闭包应该是下面这样,将定义在函数中的函数作为返回值

function a(x){
       var tem=3;
      function b(y){
          console.log(x+y+(++tem));
     }
return b;
}

闭包的另一种作用是隔离作用域,请看下面这段代码

for(var i=0;i<2;i++){
     setTimeout(function(){
             console.log(i);
       },0);
}

上面这段代码的执行结果是2,2而不是0,1,因为等for循环出来后,执行setTimeout中的函数时,i的值已经变成了2,这就是没有隔离作用域所造成的,请看下面代码

for(var i=0;i<2;i++){
      (function(i){
             setTimeout(function(){
              console.log(i);
        },0)
    })(i);
}

这样就会输出0,1,我们的立即执行函数创建了一个作用域,隔离了外界的作用域,闭包的缺点是,因为内部闭包函数可以访问外部函数的变量,所以外部函数的变量不能被释放,如果闭包嵌套过多,会导致内存占用大,要合理使用闭包。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 216,843评论 6 502
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 92,538评论 3 392
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 163,187评论 0 353
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 58,264评论 1 292
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 67,289评论 6 390
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 51,231评论 1 299
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 40,116评论 3 418
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,945评论 0 275
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 45,367评论 1 313
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,581评论 2 333
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,754评论 1 348
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,458评论 5 344
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 41,068评论 3 327
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,692评论 0 22
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,842评论 1 269
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 47,797评论 2 369
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,654评论 2 354

推荐阅读更多精彩内容

  • 请参看我github中的wiki,不定期更新。https://github.com/ivonzhang/Front...
    zhangivon阅读 7,127评论 2 19
  • 前端开发面试题 面试题目: 根据你的等级和职位的变化,入门级到专家级,广度和深度都会有所增加。 题目类型: 理论知...
    怡宝丶阅读 2,582评论 0 7
  • 本文由我收集总结了一些前端面试题,初学者阅后也要用心钻研其中的原理,重要知识需要系统学习、透彻学习,形成自己的知识...
    王钰峰阅读 488评论 0 2
  • 第一部分HTML&CSS整理答案1.什么是HTML5? 答:HTML5是最新的HTML标准。 注意:讲述HTML5...
    Programmer客栈阅读 2,009评论 0 12
  • 加入了一个创意写作团队。 原来叫642天创意写作,写了两天,发起者将写作命名为创意写作自虐。 写到第三天,发现确实...
    莫莫queen阅读 470评论 0 4