IMWeb提升营Day4

2017.5.27

今日早报

• 微软将所有windows代码库迁移到Git
• 微信小程序能力持续提升，可以更好地拓展应用场景分析用户
  
  • 小程序码数量不受限制
  • 支付成功后支持7天内下发3条模板消息
  • 新增”用户画像”功能，性别、年龄、地区、设备分布
• 阿里巴巴和易果生鲜签订了股份转让合同，成为联华超市第二大股东

前端常见题目

问题1: 清除浮动的几种方式，各自的优缺点

• 方法一：添加新的元素 、应用 clear：both；
  
  • 优：理论上能清楚任何标签
  • 缺：增加无意义的标签

HTML

<div class="outer">    <div class="div1">1</div>    <div class="div2">2</div>    <div class="div3">3</div>    <div class="clear"></div></div>

CSS

.clear{clear:both; height: 0; line-height: 0; font-size: 0}

• 方法二：父级div定义 overflow: auto（注意：是父级div也就是这里的 div.outer）
  
  • 缺：空标签元素清除浮动而不得不增加无意代码的弊端
  • 优：使用zoom:1用于兼容IE）
  • 原理：使用overflow属性来清除浮动有一点需要注意，overflow属性共有三个属性值：hidden,auto,visible。我们可以使用hiddent和auto值来清除浮动，但切记不能使用visible值，如果使用这个值将无法达到清除浮动效果，其他两个值都可以

HTML

<div class="outer over-flow"> //这里添加了一个class    <div class="div1">1</div>    <div class="div2">2</div>    <div class="div3">3</div>    <!--<div class="clear"></div>--></div>

CSS

.over-flow{    overflow: auto; zoom: 1; //zoom: 1; 是在处理兼容性问题}

• 方法三： 据说是最高大上的方法 :after 方法：（注意：作用于浮动元素的父亲）
  
  • (用于非IE浏览器)
  • 原理：这种方法清除浮动是现在网上最拉风的一种清除浮动，他就是利用:after和:before来在元素内部插入两个元素块，从面达到清除浮动的效果。其实现原理类似于clear:both方法，只是区别在于:clear在html插入一个div.clear标签，而outer利用其伪类clear:after在元素内部增加一个类似于div.clear的效果。

CSS

.outer {zoom:1;}    /*==for IE6/7 Maxthon2==*/.outer :after {clear:both;content:'.';display:block;width: 0;height: 0;visibility:hidden;}   /*==for FF/chrome/opera/IE8==*//*其中clear:both;指清除所有浮动；content: '.'; display:block;对于FF/chrome/opera/IE8不能缺少，其中content（）可以取值也可以为空。visibility:hidden;的作用是允许浏览器渲染它，但是不显示出来，这样才能实现清楚浮动。*/

问题2: call和apply的区别

Object.call(this,obj1,obj2,obj3)
Object.apply(this,arguments)
- JavaScript中的每一个Function对象都有一个apply()方法和一个call()方法，它们的语法分别为：

/*apply()方法*/function.apply(thisObj[, argArray])/*call()方法*/function.call(thisObj[, arg1[, arg2[, [,...argN]]]]);

• 它们各自的定义：
  
  • apply：应用某一对象的一个方法，用另一个对象替换当前对象。例如：B.apply(A, arguments);即A对象应用B对象的方法。
  • call：调用一个对象的一个方法，以另一个对象替换当前对象。例如：B.call(A, args1,args2);即A对象调用B对象的方法。
• 基本用法

function add(a,b){  return a+b;  }function sub(a,b){  return a-b;  }var a1 = add.apply(sub,[4,2]);　　//sub调用add的方法var a2 = sub.apply(add,[4,2]);alert(a1);  //6     alert(a2);  //2/*call的用法*/var a1 = add.call(sub,4,2);

问题3: <img>标签上title与alt属性的区别是什么？

• Alt：当图片不显示是 用文字代表。
• Title：为该属性提供信息

问题4：什么是语义化的HTML？

• 直观的认识标签 对于搜索引擎的抓取有好处
• 在HTML 5出来之前，我们用div来表示页面章节，但是这些div都没有实际意义。（即使我们用css样式的id和class形容这块内容的意义）。这些标签只是我们提供给浏览器的指令，只是定义一个网页的某些部分。但现在，那些之前没“意义”的标签因为因为html5的出现消失了，这就是我们平时说的“语义”。
• 看下图没有用div来布局，而是用了语义化的标签来布局，便于网络更好的识别和显示
  

前端常见题目个人思考题：

1、 请说出三种减少页面加载时间的方法。（加载时间指感知的时间或者实际加载时间）

• 1、减少http请求（合并文件、合并图片）
• 2、优化图片文件，减小其尺寸，特别是缩略图
  
  • 一定要按尺寸生成缩略图然后调用，不要在网页中用resize方法实现，虽然这样看到的图片外形小了，但是其加载的数据量一点也没减少。曾经见过有人在网页中加载的缩略图，其真实尺寸有10M之巨…普通图像、icon也要尽可能压缩后，可以采用web图像保存、减少颜色数等等方法实现。
• 3、图像格式的选择
  
  • （GIF：提供的颜色较少，可用在一些对颜色要求不高的地方）
• 4、 压缩Javascript、CSS代码
  
  • 一般js、css文件中存在大量的空格、换行、注释，这些利于阅读，如果能够压缩掉，将会很有利于网络传输。这方面的工具也有很多，可以在百度里搜索一下关键字“css代码压缩”，或者“js代码压缩”将会发现有很多网站都提供这样的功能，当然了你也可以自己写程序来做这个工作，如果你会的话。就拿我们这个网站来说吧。刚开始上传这个网站的时候，我的很多Css代码都没有压缩，后面发现了这个问题，我就上网找了相关的网站的压缩代码的功能，最后就把很多CSS文件都压缩了。这个压缩比率还是比较高的，一般都有百分五十左右。这个代码压缩对于网页的加载还是很有用的。
• 5、 服务器启用gzip压缩功能
  
  • 将要传输的文件压缩后传输到客户端再解压，在网络传输 数据量会大幅减小。在服务器上的Apache、Nginx可直接启用，也可用代码直接设置传输文件头，增加gzip的设置，也可从 负载均衡设备直接设置。不过需要留意的是，这个设置会略微增加服务器的负担。服务器性能不是很好的网站，要慎重考虑。
• 6.标明高度和宽度
  
  • （如果浏览器没有找到这两个参数，它需要一边下载图片一边计算大小，如果图片很多，浏览器需要不断地调整页面。这不但影响速度，也影响浏览体验。 当浏览器知道了高度和宽度参数后，即使图片暂时无法显示，页面上也会腾出图片的空位，然后继续加载后面的内容。从而加载时间快了，浏览体验也更好了。）
• 7、网址后面加上“/”
  
  • 对服务器而言，不加斜杠服务器会多一次判断的过程，加斜杠就会直接返回网站设置的存放在网站根目录下的默认页面。

2、 描述下“reset”CSS文件的作用和使用它的好处

• （1）定义：首先css reset指的是重置浏览器的默认样式
• （2）作用：因为现在的浏览器很多，并且每个浏览器都有自己的默认样式，这样就会导致一个页面在多个浏览器下展示产生差异，所以我们需要做一些处理使每个浏览器下展示一致，故需要css reset
• （3）内容：第一个：*{padding:0;margin:0;border:0;}第二个：你所用到的元素{padding:0;margin:0;border:0;}，然而第一个虽然写起来简单，但是它却会将所有的标签重置，而我们可能没有必要将那么多的元素都重置，浪费系统资源，降低性能，所以只给自己页面需要重置元素重置默认样式
• （4）缺陷：并不是所有的标签都有默认的margin，padding，reset而且连后面有用的样式也干掉了,并且在移动端和电脑端有bug