zoukankan      html  css  js  c++  java
  • Web前端面试题目汇总

    2、行内元素有哪些?块级元素有哪些? 空(void)元素有那些?

    行内元素:a、b、span、img、input、strong、select、label、em、button、textarea

    块级元素:div、ul、li、dl、dt、dd、p、h1-h6、blockquote
    空元素:即系没有内容的HTML元素,例如:br、meta、hr、link、input、img

    5、什么是CSS Hack?

    一般来说是针对不同的浏览器写不同的CSS,就是 CSS Hack。
    IE浏览器Hack一般又分为三种,条件Hack、属性级Hack、选择符Hack(详细参考CSS文档:css文档)。例如:

    // 1、条件Hack<!--[if IE]><style>
                .test{color:red;}
          </style><![endif]-->// 2、属性Hack
        .test{
        color:#0909; /* For IE8+ */
        *color:#f00;  /* For IE7 and earlier */    _color:#ff0;  /* For IE6 and earlier */
        }
       // 3、选择符Hack
        * html .test{color:#090;}       /* For IE6 and earlier */
        * + html .test{color:#ff0;}     /* For IE7 */

    9、浏览器的内核分别是什么?

    IE: trident内核
    Firefox:gecko内核
    Safari:webkit内核
    Opera:以前是presto内核,Opera现已改用Google Chrome的Blink内核
    Chrome:Blink(基于webkit,Google与Opera Software共同开发)

    怎样添加、移除、移动、复制、创建和查找节点?

    1)创建新节点
    createDocumentFragment() //创建一个DOM片段
    createElement() //创建一个具体的元素
    createTextNode() //创建一个文本节点

    2)添加、移除、替换、插入
    appendChild() //添加
    removeChild() //移除
    replaceChild() //替换
    insertBefore() //插入

    3)查找
    getElementsByTagName() //通过标签名称
    getElementsByName() //通过元素的Name属性的值
    getElementById() //通过元素Id,唯一性

    如何消除一个数组里面重复的元素?

    // 方法一:var arr1 =[1,2,2,2,3,3,3,4,5,6],
        arr2 = [];for(var i =0,len =arr1.length; i< len; i++){if(arr2.indexOf(arr1[i]) <0){arr2.push(arr1[i]);}}document.write(arr2);// 1,2,3,4,5,6

    请描述一下cookies,sessionStorage和localStorage的区别

    sessionStorage用于本地存储一个会话(session)中的数据,这些数据只有在同一个会话中的页面才能访问并且当会话结束后数据也随之销毁。因此sessionStorage不是一种持久化的本地存储,仅仅是会话级别的存储。而localStorage用于持久化的本地存储,除非主动删除数据,否则数据是永远不会过期的。

    web storage和cookie的区别

    Web Storage的概念和cookie相似,区别是它是为了更大容量存储设计的。Cookie的大小是受限的,并且每次你请求一个新的页面的时候Cookie都会被发送过去,这样无形中浪费了带宽,另外cookie还需要指定作用域,不可以跨域调用。
    除此之外,Web Storage拥有setItem,getItem,removeItem,clear等方法,不像cookie需要前端开发者自己封装setCookie,getCookie。但是Cookie也是不可以或缺的:Cookie的作用是与服务器进行交互,作为HTTP规范的一部分而存在 ,而Web Storage仅仅是为了在本地“存储”数据而生。

    一次完整的HTTP事务是怎样的一个过程?

    基本流程:

    a. 域名解析

    b. 发起TCP的3次握手

    c. 建立TCP连接后发起http请求

    d. 服务器端响应http请求,浏览器得到html代码

    e. 浏览器解析html代码,并请求html代码中的资源

    f. 浏览器对页面进行渲染呈现给用户

    写一个function,清除字符串前后的空格。(兼容所有浏览器)

    functiontrim(str) {if (str &&typeof str ==="string") {returnstr.replace(/(^s*)|(s*)$/g,"");//去除前后空白符}}
     

    使用正则表达式验证邮箱格式

    var reg =/^(w)+(.w+)*@(w)+((.w{2,3}){1,3})$/;var email ="example@qq.com";console.log(reg.test(email));// true  

    对前端工程师这个职位你是怎么样理解的?

    a. 前端是最贴近用户的程序员,前端的能力就是能让产品从 90分进化到 100 分,甚至更好

    b. 参与项目,快速高质量完成实现效果图,精确到1px;

    c. 与团队成员,UI设计,产品经理的沟通;

    d. 做好的页面结构,页面重构和用户体验;

    e. 处理hack,兼容、写出优美的代码格式;

    f. 针对服务器的优化、拥抱最新前端技术。

    如何解决跨域问题

    JSONP:

    原理是:动态插入script标签,通过script标签引入一个js文件,这个js文件载入成功后会执行我们在url参数中指定的函数,并且会把我们需要的json数据作为参数传入。

    由于同源策略的限制,XmlHttpRequest只允许请求当前源(域名、协议、端口)的资源,为了实现跨域请求,可以通过script标签实现跨域请求,然后在服务端输出JSON数据并执行回调函数,从而解决了跨域的数据请求。

    优点是兼容性好,简单易用,支持浏览器与服务器双向通信。缺点是只支持GET请求。

    JSONPjson+padding(内填充),顾名思义,就是把JSON填充到一个盒子里

    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    <script>
        function createJs(sUrl){
     
            var oScript = document.createElement('script');
            oScript.type = 'text/javascript';
            oScript.src = sUrl;
            document.getElementsByTagName('head')[0].appendChild(oScript);
        }
     
        createJs('jsonp.js');
     
        box({
           'name': 'test'
        });
     
        function box(json){
            alert(json.name);
        }
    </script>
  • 相关阅读:
    DecimalPercentageConverter
    Asp.Net 性能 ViewState 压缩的2种方法
    Listbox template
    Datagrid template for listbox and textbox
    ToPercentConverter : IValueConverter
    繁體中文
    Silverlight ComboBox 设置选中项
    鲁迅:纪念刘和珍君
    ASP.NET系统整合DiscuzNT3.6之注意事项
    [转]js动态创建json类型
  • 原文地址:https://www.cnblogs.com/ahu666/p/6686542.html
Copyright © 2011-2022 走看看