zoukankan      html  css  js  c++  java
  • 面试题:HTML篇(一)

    1、如何实现浏览器内多个标签页之间的通信?

    数据存储有2种方式,服务器存储 和 本地存储。本地存储也就是 cookie和localstorage;

    第一种——调用localStorage

    存储方式:window.localStorage.setItem("name", name);
    
    获取方式:window.localStorage.getItem('name'); 

     

    在一个标签页里面使用 localStorage.setItem(key,value)添加(修改、删除)内容;
    在另一个标签页里面监听 storage 事件。即可得到 localstorge 存储的值,实现不同标签页之间的通信。
    

    第二种——调用cookie+setInterval()

    存储方法:document.cookie = 'name='+name
    读取方式:
    function getCookie(key) {
      return JSON.parse("{"" + document.cookie.replace(/;s+/gim,"","").replace(/=/gim, "":"") + ""}")[key];
    }
    getCookie(name);
    要传递的信息存储在cookie中,每隔一定时间读取cookie信息,即可随时获取要传递的信息。

    参考解答方式: https://blog.csdn.net/meijory/article/details/76358570

    2、浏览器将域名通过网络通信从服务器拿到html文件后,如何渲染页面?

     解析文件从HTML自上而下进行解析,遇到任何样式(link、style)与脚本(script)都会阻塞(外部样式不阻塞后续外部脚本的加载)。所以需要把js文件放到最底部,以防止阻塞渲染速度。

    1.根据html文件构建DOM树和CSSOM树。
    
    2.构建渲染树。
    
    3.页面的重绘(repaint)与重排(reflow,也有称回流)。页面渲染完成后,若JS操作了DOM节点,根据JS对DOM操作动作的大小,浏览器对页面进行重绘或是重排。
    

    3、什么是页面的 重绘 和 重排?

    重排:当DOM变化影响了元素的几何属性(如宽、高、内边距、外边距、或是float、position、display:none;等等)导致节点位置发生变化,此时触发浏览器 重排。
    
    重绘:如果DOM变化仅仅影响的了背景色等非几何属性,此时会触发浏览器的 重绘

      

     4、什么是HTML 的全局属性?

    HTML 属性赋予元素意义和语境。
    

     常见的全局属性?

    5、src和href的区别?

    href:表示超文本引用。用来建立当前元素和文档之间的链接。常用的有:link、a。
    
    浏览器会识别href引用的文档并行下载该文档,并且不会停止对当前文档的处理。
    
    src: 引入。src指向的内容会嵌入到文档中当前标签所在的位置。常用的有:img、script、iframe。
    
    当浏览器解析到src引用时,会暂停浏览器的渲染,直到该资源加载完毕。这也是将js脚本放在底部而不是头部的原因。
    

      

    6、cookie localStorage sessionStorage的区别?

    1.数据跟服务器的通信的区别?
    • cookie 是网站为了标示用户身份而储存在用户本地终端(Client Side)上的数据(通常经过加密)。
    • cookie 数据始终在同源的 http 请求中携带(即使不需要),记会在浏览器和服务器间来回传递。
    • sessionStorage 和 localStorage 不会自动把数据发给服务器,仅在本地保存。
    2.存储大小
    • cookie 数据大小不能超过 4k。
    • sessionStorage 和 localStorage 虽然也有存储大小的限制,但比 cookie 大得多,可以达到 5M 或更大。

     3.有期时间

    • localStorage 存储持久数据,浏览器关闭后数据不丢失除非主动删除数据;
    • sessionStorage 数据在当前浏览器窗口关闭后自动删除。
    • cookie 设置的 cookie 过期时间之前一直有效,即使窗口或浏览器关闭

     4.使用方法

    • sessionStorage 和 localStorage 有更多丰富易用的接口
    • cookie需要自己封装setCookie,getCookie。

      

     7、页面导入样式时,使用 link 和 @import 有什么区别?

    (1) link 属于 HTML 标签,而 @import 是 CSS 提供的;
    (2) 页面被加载的时,link 会同时被加载,而 @import 引用的 CSS 会等到页面被加载完再加载;
    (3) import 只在 IE5 以上才能识别,而 link 是 HTML 标签,无兼容问题;
    (4) link 方式的样式的权重 高于 @import 的权重。
    

      

    8、table 和 div+css 的区别

    主要区别就是:速度和加载方式方面的区别

    <div>:加载方式是即读即加载,遇到<div> 没有遇到</div> 的时候一样加载<div> 中的内容,读多少加载多少;

    <table>:加载方式是完成后加载,遇到<table> 后,在读到</table> 之前,<table> 中的内容不加载

      

     9、谈谈你对HTML语义化的理解:

    1.去掉或者丢失样式的时候能够让页面呈现出清晰的结构;
    
    2.html 语义化就是让页面的内容结构化,便于对浏览器、搜索引擎解析;
    
    3.在没有样式 CCS 情况下也以一种文档格式显示,并且是容易阅读的。
    
    4.搜索引擎的爬虫依赖于标记来确定上下文和各个关键字的权重,利于 SEO。
    
    5.使阅读源代码的人对网站更容易将网站分块,便于阅读维护理解。
    

      

     

      

     

  • 相关阅读:
    lvs三种模式的优缺点对比
    linux下的$0-n作用
    图解 HTTP 笔记(一)——了解 Web 及网络基础
    从源码学习使用 node-delegates
    从源码看 Vue 中的 Mixin
    常见 Web 性能优化方式
    解密虚拟 DOM——snabbdom 核心源码解读
    浅谈 JSONP
    代码覆盖率测试及 GitHub 自动化集成
    Redis 学习笔记
  • 原文地址:https://www.cnblogs.com/liumcb/p/13941588.html
Copyright © 2011-2022 走看看