11月13日，杂食堆小记

发表于 | 分类于

1. overflow:auto 的页面在ios端不能平滑滚动，有明显的卡顿，如何处理解决？

-webkit-overscroll-scrolling:touch;

  • 这行代码在webkit内核浏览器里会开启硬件加速，所以性能会更好。
  • 对于Safari来说，对于有-webkit-overflow-scrolling的网页，会创建一个UIScrollView，提供子layer给渲染模块使用

从前端开发的角度讲，只需要知道CSS的属性-webkit-overflow-scrolling是真的创建了带有硬件加速的系统级控件，所以效率很高。

  • 第三方库：IScroll （推荐）
    因为在某些落后版本的andriod端和IOS，还是不行。并不支持区域滚动。IScroll 基本都适配了，同时IScroll支持配置滚动条,专属触发事件等等。

2. 为什么字体字号一般选用偶数

  • 偶数字号更容易与其他页面部分构成比例。不让一个100px的div中让一段文字居中。
  • window自带的字体一般只提供12,14,16px的点阵、奇数用的是小一号的字体点阵，只不过空间变大了，显得不协调不好看。（旧版浏览器）
  • 现在来说知乎、豆瓣分别是13px,15px。基本上习惯使然。

3. 斗鱼直播长时间不在会给予用户提示，并切断直播流，节约流量，如何实现？

HTML5 Page Visibility

参考链接：http://www.cnblogs.com/zichi/p/5158745.html

4. document.write 和innerHTML区别

docuemt.write 是重绘整个页面，innerHTML可以重绘页面的一部分

首先，网站向服务器请求的时候，会自动带上cookie，这样增加表头信息量。Cookie 隔离，就是说，让请求资源的时候不带cookie。怎么实现呢？

传统做法：将css、js、图片等静态资源放在多个域名（CDN)下请求。这样可以跨过浏览器对统一主机名的并发连接上限（50连接数？），提高整体并发量。

cookie隔离技术则是通过使用多个非主要域名来请求静态文件，如果静态文件都放在主域名下，那静态文件请求的时候带有的cookie的数据提交给server是非常浪费的，还不如隔离开

因为cookie有域的限制。不能跨域请求，所以使用非主要域名的时候，请求头就不会带cookie，同时这种方式不会将cookie传入webserver，也减少了webserver对cookie的处理分析环节，提高了webserver的http请求的解析速度。

6. new 一个类，到底干了什么，类的静态方法，实例方法。

var obj  = {};
obj.__proto__ = Base.prototype;
Base.call(obj);

类的静态方法、实例方法

7. html5shiv 干嘛用的? 原理是什么？

为了解决IE9以下的浏览器不识别html5元素，不能作为父节点包裹子元素，并且不能应用css样式。
html5shiv可以让其支持部分html5元素，并提供一些样式。

调用方式：

<!--[if lt IE9]>
<script type="text/javascript" src="scripts/html5shiv.js"></script>
<![endif]-->

原理：http://www.qdfuns.com/notes/17631/a20a0f394d460cdd66fc7ffb0d68d6fb.html

首先，第一点，想让css样式应用在未知元素上，只需执行document.createElement(elementName)即可实现，这是最基本的根源

对于未知的元素标签mytag，只要在head中执行一次document.createElement(mytag),那么body里所有mytag标签在渲染时就会自动正确应用css样式了。”让CSS样式应用在未知元素上只需执行 document.createElement(elementName) 即可实现。

所以 基本原理 就是在执行的时候，先往head中插入应用到html5标签的css样式，然后对于所有html5标签都执行一次document.createElement(nodeName)，这样，浏览器在渲染body部分时，对于html5标签就能够正确的应用css样式，这也就是html5shiv.js必须放置在head中的原因

0%