interview css+html

Posted on

Interview CSS HTML

1.CSS盒模型

box-sizing:conent-box;
box-sizing:border-box;

2.Html5的新特性

  • 标签语义化：header,footer,nav,aside,article,去掉了frame 和frameset，新增了表单元素，提交表单的时候验证输入值是否满足email的格式input type=”email” name=”email”；url：提交表单的时候验证输入值是否满足url的格式input type=”url” name=”url”；number：根据你的设置提供选择数字的功能，其中min为最小值，max为最大值，value为默认值，step为点击箭头时数字的变化量，max、min、step、value均可不写，目前某些浏览器还不支持。input type=”number” name=”number” min=2 max=100 step=5 value=”15”
  • 音视频元素，video，audio

  • api： 获取当前地理信息，navigator.geolocation.getCurrentPosition(successCallback, errorCallback)

  • websocket

  • webstorage：webstorage是本地存储，包括localStorage和sessionStorage。localStorage是持久化存储在客户端，只要用户不删除就不会消失

  • 缓存：html5允许我们自己控制哪些文件要缓存，哪些不用。

    1.给html增加manifest属性，并赋值为cache.manifest

    2.cache.manifest：

    CACHE MANIFEST
#v1.2
CACHE:  //要缓存的文件
a.js
b.js
NETWORK    : //表示只在用户在线的时候才需要的文件，不会缓存
c.js
FALLBACK
/    /index.html   //表示如果找不到第一个资源就用第二个资源代替

  • web worker，web worker是运行在浏览器后台的js程序，不影响主程序的运行，是另开的一个js线程，可以用这个线程执行复杂的数据操作，然后把操作结果通过postMessage传递给主线程

  • 对html语义化的理解：就是用正确的标签包含正确的内容，比如nav标签就应该包含导航条的内容，而不是用其他的用途。标签语义化的好处是结构良好，便于阅读，方便爬虫，提高搜索率

  • cookie sessionStorage localStorage的区别

    cookie是存储在浏览器，并且随着浏览器的请求一起发送到服务器的，有一定的过期时间，过了过期时间就会自动消失。sessionStorage和localStorage也是存在客户端，属于webStorage，但是比cookie存储要大。localStorage是持久化存储在客户端，sessionStorage的存活是一个会话期间，浏览器关闭就自动消失

  • 多个页面之间如何通信

    使用cookies，使用web worker， localStorage 和sessionStorage

  • 浏览器的渲染过程

    1.首先获取html，然后构建dom树

    2.根据css构建render树，render树种不包含定位和几何信息

    3.最后构建布局树，布局是含有元素的定位和几何信息

  • 重构 回流

    浏览器的重构是指改变每个元素外观的时候所触发的浏览器行为，比如颜色，比如背景灯样式发生了改变进行的重新构造新外观的过程。重构一般不会引发页面的重新布局，不一定伴随着回流。

    回流指的是浏览器为了重新渲染页面的需要而进行的重新计算元素的几何大小和位置的。开销是非常大的。回流可以理解为渲染树需要进行重新计算。一般最好触发元素的重构，避免元素的回流，比如通过添加类来添加css样式，而不是直接在DOM上设置，当需要操作某一块元素的时候，最好使其脱离文档流，这样就不会引起回流了。比如设置position:absolute或者fixed或者display:none.