今日前端
2022-09-21 星期三

无所畏惧（fearless）不是没有恐惧；而是你依然心怀恐惧，但无论如何都决定要跳进去。

1.在地址栏里输入一个 URL,到这个页面呈现出来，中间会发生什么？

参考答案

参考答案见这里 (opens new window)

2. HTML5 和 CSS3 用的多吗？你了解它们的新属性吗？有在项目中用过吗？

参考答案

HTML5

  • 8 个语义元素： header section footer aside nav main article figure(经测试，只要figure有样式，其它语义标签只是display:block)
  • 内容元素：
    • mark 高亮 { background-color:mark;color:marktext }
    • progress 进度新的表单控件
    • input type新加属性 date time search color datetime-local
  • canvas 绘图
  • 支持内联 SVG。
  • 多媒体元素 audio(audio中source) video embed track
  • 本地离线存储，把需要离线存储在本地的文件列在一个 manifest 配置文件
  • web 存储 localStorage、SessionStorage

CSS3

  • CSS3 边框如 border-radius，box-shadow 等；
  • CSS3 背景如 background-size，background-origin 等；
  • CSS3 2D，3D 转换如 transform 等；CSS3 动画如 animation等。

3. CSS的重绘和重排的区别，以及需要注意什么？哪些属性会导致重绘和重排

参考答案

一、重绘不一定需要重排，重排必然会导致重绘

  1. 重排：当渲染树的一部分必须更新并且节点的尺寸发生了变化，浏览器会使渲染树中受到影响的部分失效，并重新构造渲染树。 1.1 添加、删除可见的dom 1.2 元素的位置改变 1.3 元素的尺寸改变（外边距、内边距、边框厚度、宽高等几何属性） 1.4 页面渲染初始化 1.5 浏览器窗口尺寸改变
  2. 重绘：是在一个元素的外观被改变所触发的浏览器行为，浏览器会根据元素的新属性重新绘制，使元素呈现新的外观。

二、注意点：减少reflow、repaint

  1. 不要一条一条的修改DOM的样式，可以先定义好css的class，然后修改DOM的className。
  2. 不要把DOM结点的属性值放在一个循环里当成循环里的变量。
  3. 为动画的HTML元件适用fixed或absolute的position，那么修改他们的css是不会reflow

三、尽量使用重绘操作

  • visibility=hidden不改变页面布局，仍然占位，但不会触发绑定的事件(重绘操作)
  • opacity=0 不改变页面布局，仍然占位，可以触发绑定的事件(重绘操作)
  • display: none改变页面布局，不再占位(重排操作)

4. transform属性使用

参考答案

用于元素的2D或3D转换，允许你将元素旋转,缩放,移动,倾斜等。 详细transform (opens new window)

{
    transform:rotate(7deg);
    -ms-transform:rotate(7deg); 	/* IE 9 */
    -moz-transform:rotate(7deg); 	/* Firefox */
    -webkit-transform:rotate(7deg); /* Safari 和 Chrome */
    -o-transform:rotate(7deg); 	/* Opera */
}

transform: none | rotate | scale | skew | translate | matrix;

5. js中数组的方法有哪些

参考答案

参考答案见这里 (opens new window)

← Day2 →