zoukankan      html  css  js  c++  java
  • Javascript面试问题大全--基础篇

    1、有关BFC的理解
    2、盒模型的理解
    3、box-sizing的理解
    4、渐进增强 VS 优雅降级
    5、url->页面加载完成的整个流程
    6、js组成部分
    7、如何跨域访问
    8、js判断数组
    9、严格模式
    10、ajax的优缺点
    11、HTML、XML、XHTML 有什么区别
    12、html语义化
    13、内容与样式分离
    14、meta标签的使用
    15、文档声明的作用
    16、严格模式和混杂模式
    17、<!doctyle html>的作用
    18、常见浏览器内核
    19、页面导入样式时,使用link和@import有什么区别
    20、浏览器内核的理解复制代码


    有关BFC的理解

    BFC用来格式化块级盒子
    BFC: 提供一个环境,html元素会在这个环境中按照一定的规则进行布局。
    ex: 例如浮动元素会形成bfc,浮动元素内部子元素主要受该浮动元素影响,但是两个浮动元素互相不影响。
    这个可以理解为一个独立容器,里边规则不会影响到外边。
    那么什么情况下会生成bfc呢:
    1、浮动元素,float除none以外的值
    2、绝对定位,position(absolite,fixed)
    3、dispaly = inline-blocks|table-cells|table-captions
    4、overflow除visible以外的值
    作用:
    1、可以阻止元素被浮动元素覆盖
    2、包含浮动元素
    3、如果属于同一个bfc的两个元素上下margin会发生重叠,但如果两个元素属于两个不同的bfc那么margin就不会发生重叠

    盒模型的理解

    css盒子模型,包含了content,padding,border,margin
    这些基本的比如比如哪儿是content大家都了解我就说了在设置width = 300px时代表的是content的宽度那么最终的宽度是content+padding+border+margin.
    css外边距合并
    刚才在bfc中提到,在一个bfc中,css外边距是会发生重叠的,解决方法就是放在两个bfc中。当我们使用盒模型的时候需要注意的是浏览器的兼容性,这个很好解决在html中声明 <!DOCTYPE html>,ul在mozilia默认有padding值,而在IE中只有margin有值
    盒模型中我们常使用一个属性叫box-sizing,这会单独起一页,这也是面一经常出的问题

    box-sizing的理解

    box-sizing: content-box|border-box|inherit
    content-box是默认值,总宽度= margin+border+padding+width
    border-box: 在css中设置的width = border + padding + content,那么总宽度 = margin + width常在box宽度是100%,又想要两边有内间距
    inherit: 这就不用说了,是继承

    渐进增强 VS 优雅降级

    渐进增强:低浏览器实现基本功能,高级浏览器实现交互、效果达到更好的体验
    优雅降级: 在高级浏览器实现完整功能,然后针对低级浏览器进行hack以便低级浏览器能够正常运行
    两者是因为各种版本的浏览器对css3的支持情况而不同所造成的

    url->页面加载完成的整个流程

    1、浏览器查询域名对应的IP地址
    2、浏览器根据IP地址与服务器建立socket连接
    3、浏览器与服务器进行通信:浏览器请求,服务器处理请求
    4、浏览器与服务器断开连接
    这个内容太多了,我会专门写一篇blog来解释,但是面试这些回答这些就够了

    js组成部分

    1、ECMAScript 定义脚本语言的属性、方法和对象
    2、文档对象类型(DOM):把整个页面规划成由节点层级构成的文档
    3、浏览器对象模型(BOM):处理浏览器宽口和框架

    如何跨域访问

    1、jsonp跨域访问
    2、window.name进行跨域
    3、html5中的window.postMessage方法
    4、http头部信息中加入origin
    这个在我一片blog中专门讲到了两种jsonp和origin如今最常用的两种跨域请求方式

    js判断数组

    return Object.prototype.toString.call(arg) === '[object Array]'复制代码

    严格模式

    使用方法:进入严格模式的标志 'use strict',语法更加严格,更安全,提高运行速度。
    1、全局变量显示声明
    2、静态绑定:属性和方法归属的对象,在编译阶段就确定
    3、增强的安全措施:①禁止this指向全局对象②禁止在函数内部遍历调用栈
    4、禁止删除变量,除非创建对象使用configurable=true
    5、显示报错:对对象的只读属性,只有getter的对象赋值,对禁止扩展的对象添加新属性都会报错
    6、重名错误:对象不能有同名的参数,函数不能有重名的参数
    7、禁止八进制表示法
    8、禁止arguments赋值,不会追踪参数的变化,禁止使用arguments.callee
    9、函数必须声明在顶层
    10、新增保留字

    ajax的优缺点

    优点:减轻服务器的负担,按需取数据,最大程度减少冗余请求,局部刷新。
    缺点:浏览器之间有差异,对流媒体和移动设备支持不够好

    HTML、XML、XHTML 有什么区别

    html:超文本标记语言,显示信息,不区分大小写
    xhtml:升级版的html,区分大小写
    xml:可扩展标记语言被用来传输和存储数据

    html语义化

    直观认识标签和属性的作用,便于阅读和维护

    内容与样式分离

    可以确保网页平稳退化,易于维护

    meta标签的使用

    meta name="keyword" 告诉搜素引擎网页的关键词
    meta name="description" 告诉搜素引擎站点的内容
    mata name="author" content="name"站点制作望着
    meta name="viewport" content="width=device-width, initial-scale=1.0"
    响应式页面

    文档声明的作用

    让浏览器解析器知道需要用什么规范来解析文档

    严格模式和混杂模式

    严格模式:浏览器最高标准呈现页面
    混杂模式:页面以一种比较宽松的向后兼容的方式显示

    <!doctyle html>的作用

    使用html5标准来解析渲染页面,如果不写就进入混杂模式

    常见浏览器内核

    IE 用的是trident
    firefox Gecko
    opera Blink
    safari Chrome webkit复制代码

    页面被加载时,link被同时加载,@import会页面加载完成后在加载

    浏览器内核的理解

    渲染引擎和JS引擎
    渲染引擎:负责取得网页的内容、整理讯息,以及计算网页的显示方式
    JS引擎:解析和执行js来实现网页的动态效果

  • 相关阅读:
    git 看不到别人创建的远程分支
    win10 系统开始菜单没反应的解决方法
    Fiddler 抓取 https 设置详解(图文)
    MongoDB + Express + art-template 项目实例-博客管理系统
    使用 XAML 格式化工具:XAML Styler
    [WPF] 在单元测试中使用 Prism 的 EventAggregator,订阅到 ThreadOption.UIThread 会报错
    分别使用 Python 和 Math.Net 调用优化算法
    在 Azure 上执行一些简单的 python 工作
    Linux默认路由与直连路由
    网站使用域名访问而禁止ip访问的配置
  • 原文地址:https://www.cnblogs.com/evaxtt/p/14545074.html
Copyright © 2011-2022 走看看