【第1期】20道推荐给FE Engineer不易注意到的点

hannie76327
437 阅读10分钟

1. flash和js通过什么类如何交互?

Flash提供了ExternalInterface接口与JavaScript通信，ExternalInterface有两个方法，call和addCallback：

  • ExternalInterface.addCallback("在js里可调用的flash方法名",flash内方法) //在flash中通过这个方法公开 在js中可调用的flash内的方法;

  • ExternalInterface.call("js方法",传给js的参数) //在flash里调用js里的方法

2. substr、substring、 slice区别

参数都是正数

  • slice接收的是起始位置和结束位置(不包括结束位置)
  • substring接收的是起始位置和结束位置(不包括结束位置)
  • substr接收的则是起始位置和所要返回的字符串长度。

注：substring是以两个参数中较小一个作为起始位置，较大的参数作为结束位置

var test = 'hello world';

test.slice(4,7)             //o w
test.substring(4,7)        //o w
test.substr(4,7)           //o world

test.substring(7,4)          //o w

接收的参数有负数

  • slice会将它字符串的长度与对应的负数相加，结果作为参数
  • substring则干脆将负参数都直接转换为0
  • substr则仅仅是将第一个参数与字符串长度相加后的结果作为第一个参数
var test = 'hello world';  

test.slice(-3)        //rld    
test.substring(-3)    //hello world   
test.substr(-3)        //rld    
test.slice(3,-4)       //lo w    
test.substring(3,-4)   //hel    
test.substr(3,-4)      //空字符串

3. border:none以及border:0的区别

  1. 效果

边框样式无

border: none 

border-style:none;

边框宽度为0px

border: 0 

border-width:0;
  1. 性能差异 border:0;

浏览器对border-width、border-color进行渲染，占用内存。

border:none;

浏览器不进行渲染，不占用内存。

  1. 计算出的样式

Chrome：

border:none;
border:initial none initial;

border:0;
border:0 initial  initial ;

Firefox、360：

border:none; 
border:medium none;

border:0;
border:0 none;
  1. 浏览器兼容

  • IE7-不支持border:none;

  • W3C提示：请始终把border-style属性声明到border-color属性之前，元素必须在改变颜色之前获得边框。

错误说法：

  1. 当定义了border:none，即隐藏了边框的显示，实际就是边框宽度为0
  2. 当定义边框时，仅设置边框宽度也可以达到显示的效果

4. CSS Sprites

  1. 简介
  • CSS Sprites在国内很多人叫css精灵，是一种网页图片应用处理方式。
  • 它允许将一个页面涉及到的所有零星图片都包含到一张大图中， 利用CSS的“background-image”，“background- repeat”，“background-position”的组合进行背景定位，访问页面时避免图片载入缓慢的现象。
  1. 优点
  • CSS Sprites能很好地减少网页的http请求，从而大大的提高页面的性能，这是CSS Sprites最大的优点，也是其被广泛传播和应用的主要原因；
  • CSS Sprites能减少图片的字节；
  • CSS Sprites解决了网页设计师在图片命名上的困扰，只需对一张集合的图片命名，不需要对每一个小图片进行命名，从而提高了网页制作效率。
  • CSS Sprites只需要修改一张或少张图片的颜色或样式来改变整个网页的风格。
  1. 缺点
  • 图片合并麻烦：图片合并时，需要把多张图片有序的合理的合并成一张图片，并留好足够的空间防止版块出现不必要的背景。
  • 图片适应性差：在高分辨的屏幕下自适应页面，若图片不够宽会出现背景断裂。
  • 图片定位繁琐：开发时需要通过工具测量计算每个背景单元的精确位置。
  • 可维护性差：页面背景需要少许改动，可能要修改部分或整张已合并的图片，进而要改动css。在避免改动图片的前提下，又只能（最好）往下追加图片，但这样增加了图片字节。

5. 浏览器的内核引擎

基本上是四分天下：

  • Trident: IE 以Trident 作为内核引擎；
  • Gecko: Firefox 是基于 Gecko 开发；
  • WebKit: Safari, Google Chrome，傲游3，猎豹浏览器，百度浏览器，opera浏览器；
  • Presto: Opera的内核，但由于市场选择问题，主要应用在手机平台--Opera mini

注：2013年2月Opera宣布转向WebKit引擎
注：2013年4月Opera宣布放弃WEBKIT，跟随GOOGLE的新开发的blink引擎

6. 几个阻止行为的区别

  • preventDefault() 阻止事件默认行为
  • stopPropagation() W3C标准的阻止冒泡 ，作用在后续节点上，目的在执行完绑定到当前元素上的所有事件处理程序之后，停止执行所有后续节点的事件处理程序
  • stopImmediatePropagation 作用在当前节点以及事件链上的所有后续节点上，目的是在执行完当前事件处理程序之后，停止当前节点以及所有后续节点的事件处理程序的运行
  • cancelBubble() ie的阻止冒泡

7. transform 、 translate、 transition、 animation区别

  • transform：应用于元素的2D或3D转换。这个属性允许你将元素旋转，缩放，移动，倾斜等;
  • translate：移动，是transform的一个方法
  • transition：属性是一个简写属性，用于设置四个过渡属性：
    transition-property
    transition-duration
    transition-timing-function
    transition-delay
  • animation 属性是一个简写属性，用于设置六个动画属性：
    animation-name
    animation-duration
    animation-timing-function
    animation-delay
    animation-iteration-count
    animation-direction

8. 可继承样式

azimuth, border-collapse, border-spacing,
caption-side, color, cursor, direction, elevation,
empty-cells, font-family, font-size, font-style,
font-variant, font-weight, font, letter-spacing,
line-height, list-style-image, list-style-position,
list-style-type, list-style, orphans, pitch-range,
pitch, quotes, richness, speak-header, speaknumeral,
speak-punctuation, speak, speechrate,
stress, text-align, text-indent, texttransform,
visibility, voice-family, volume, whitespace,
widows, word-spacing

注意：background不可以继承

9. 标签不受浮动影响

 <div class="profile">
     <img src="a.jpg" alt="avatar" class="avatar">
     <p class="desc">Some description</p>
 </div>
 <article>
     <h2>Posts</h2>
 </article>
 <style>
     .profile .avatar { float: left }
 </style>

比如article不受浮影响的方式：

  1. 父级div定义height
  2. 结尾处加空div标签clear:both
  3. 父级div定义伪类:after和zoom
  4. 父级div定义overflow:hidden
  5. 父级div也浮动，需要定义宽度
  6. 结尾处加br标签clear:both

比较好的是第3种方式

article { clear: both }
.profile::after { content: ''; display: block; clear: both }
.profile { overflow: hidden }

10. h5常用标签

<header></header>
<nav></nav>
<section></section>
<aside></aside>
<footer></footer>
<article></article>

11. 在大部分情况下，需要遵循的最佳实践

  • 将渲染阶段的开销转嫁到计算阶段之上
  • 使用多个分层的 Canvas 绘制复杂场景
  • 不要频繁设置绘图上下文的 font 属性
  • 不在动画中使用 putImageData 方法
  • 通过计算和判断，避免无谓的绘制操作
  • 将固定的内容预先绘制在离屏 Canvas 上以提高性能
  • 使用 Worker 和拆分任务的方法避免复杂算法阻塞动画运行

12. form 元素的enctype属性

  1. enctype属性在get请求中会被忽略，在post请求中才有效
  2. application/x-www-form-urlencoded表示会对特殊字符进行转义
  3. text/plain 以文本的形式进行编码，不会对特殊字符进行编码
  4. multipart/form-data向服务器发送二进制文件的时候有用，例如提交文件！！！ （ form 元素的 enctype 属性设置）

13. link和@import的区别：

  • link是XHTML标签，无兼容问题；@import是在CSS2.1提出的，低版本的浏览器不支持。
  • link可以加载CSS，Javascript；@import只能加载CSS。
  • link加载的内容是与页面同时加载；@import需要页面网页完全载入以后加载。
  • 写法不同

link的写法

<link rel="stylesheet" href="index.css">

import的写法：

<style type=”text/css”>
    @import url（“index.css”）；
</style>

14. DOM树中总共分为如下几种节点格式：

  • Element类型（元素节点）
  • Text类型（文本节点）
  • Comment类型（注释节点）
  • Document类型（document节点）。

15. http

  • HTTP是无连接：无连接的含义是限制每次连接只处理一个请求。服务器处理完客户的请求，并收到客户的应答后，即断开连接。采用这种方式可以节省传输时间。
  • HTTP是媒体独立的：意味着，只要客户端和服务器知道如何处理的数据内容，任何类型的数据都可以通过HTTP发送。客户端以及服务器指定使用适合的MIME-type内容类型。
  • HTTP是基于客户端/服务端（C/S）的架构模型，通过一个可靠的链接来交换信息，是一个无状态的请求/响应协议。

16. 网页打开过程中UDP和TCP使用场景

DNS在进行域名解析时使用UDP，但是在域名服务器之间传输时使用的是TCP

17. websocket特点

  • 和http协议不同，是基于tcp的协议
  • websocket只需要服务端和客户端一次握手，就可以自由进行数据传送和接收
  • 允许服务端主动发送数据，不需要使用轮询的方式

18. linux每个文件目录都有其独特的功能和作用

  • /bin 存放普通用户可以使用的指令。
  • /usr 这个目录中包含了命令库文件和在通常操作中不会修改的文件，其地位类似Windows上面的”Program Files”目录（安装程序的时候，默认就是安装在此文件内部某个子文件夹内。输入命令后系统默认执行/usr/bin下的程序。
  • /etc 全局的配置文件存放目录。存放系统和软件的配置。
  • /boot 引导程序，内核等存放的目录。

19. iframe的特点

  1. 创建比一般的 DOM 元素慢了 1-2 个数量级

iframe 的创建比其它包括 scripts 和 css 的 DOM 元素的创建慢了 1-2 个数量级，使用 iframe 的页面一般不会包含太多 iframe，所以创建 DOM 节点所花费的时间不会占很大的比重。但带来一些其它的问题：onload 事件以及连接池（connection pool）

  1. 阻塞页面加载

及时触发 window 的 onload 事件是非常重要的。onload 事件触发使浏览器的 “忙” 指示器停止，告诉用户当前网页已经加载完毕。当 onload 事件加载延迟后，它给用户的感觉就是这个网页非常慢。
window 的 onload 事件需要在所有 iframe 加载完毕后（包含里面的元素）才会触发。在 Safari 和 Chrome 里，通过 JavaScript 动态设置 iframe 的 SRC 可以避免这种阻塞情况

  1. 唯一的连接池

浏览器只能开少量的连接到 web 服务器。比较老的浏览器，包含 Internet Explorer 6 & 7 和 Firefox 2，只能对一个域名（hostname）同时打开两个连接。这个数量的限制在新版本的浏览器中有所提高。Safari 3+ 和 Opera 9+ 可同时对一个域名打开 4 个连接，Chrome 1+, IE 8 以及 Firefox 3 可以同时打开 6 个.
绝大部分浏览器，主页面和其中的 iframe 是共享这些连接的。这意味着 iframe 在加载资源时可能用光了所有的可用连接，从而阻塞了主页面资源的加载。如果 iframe 中的内容比主页面的内容更重要，这当然是很好的。但通常情况下，iframe 里的内容是没有主页面的内容重要的。这时 iframe 中用光了可用的连接就是不值得的了。一种解决办法是，在主页面上重要的元素加载完毕后，再动态设置 iframe 的 SRC。

  1. 不利于 SEO

搜索引擎的检索程序无法解读 iframe。另外，iframe 本身不是动态语言，样式和脚本都需要额外导入。

所以，iframe 应谨慎使用

20. 标签用法

  • 块级元素可以包含内联元素或某些块级元素，但内联元素不能包含块级元素，它只能包含其它内联元素。
  • 块级元素不能放在p里面。
  • 有几个特殊的块级元素只能包含内联元素，不能包含块级元素。如h1,h2,h3,h4,h5,h6,p,dt
  • li内可以包含div
  • a标签可以包括任何元素，除了自身

本文使用 mdnice 排版

avatar
文章
阅读
粉丝