全文转载整理自互联网,感谢原作者。
其实只需要一行CSS代码
-webkit-overflow-scrolling : touch;
实际上Safari真的用了原生控件来实现,对于有-webkit-overflow-scrolling
的网页,会创建一个UIScrollView提供子layer给渲染模块使用。创建时的堆栈如下:
Thread 1, Queue : com.apple.main-thread
#0 0x00086723 in -[UIScrollView initWithFrame:] ()
#1 0x004ec3bd in -[UIWebOverflowScrollView initWithLayer:node:webDocumentView:] ()
#2 0x001f1769 in -[UIWebDocumentView webView:didCreateOrUpdateScrollingLayer:withContentsLayer:scrollSize:forNode:allowHorizontalScrollbar:allowVerticalScrollbar:] ()
#3 0x01d571bd in __invoking___ ()
#4 0x01d570d6 in -[NSInvocation invoke] ()
#5 0x01d5724a in -[NSInvocation invokeWithTarget:] ()
#6 0x027fb6a1 in -[_WebSafeForwarder forwardInvocation:] ()
#7 0x027fb8ab in __44-[_WebSafeAsyncForwarder forwardInvocation:]_block_invoke_0 ()
#8 0x04ac753f in _dispatch_call_block_and_release ()
#9 0x04ad9014 in _dispatch_client_callout ()
#10 0x04ac97d5 in _dispatch_main_queue_callback_4CF ()
#11 0x01d09af5 in __CFRunLoopRun ()
#12 0x01d08f44 in CFRunLoopRunSpecific ()
#13 0x01d08e1b in CFRunLoopRunInMode ()
#14 0x01cbd7e3 in GSEventRunModal ()
#15 0x01cbd668 in GSEventRun ()
#16 0x00032ffc in UIApplicationMain ()
#17 0x00002ae2 in main at /Users/liuhx/Desktop/UIWebView_Research/WebViewResearch/main.mm:16
实际创建的是UIWebOverflowScrollView,它继承自UIScrollView,声明为:
@class DOMNode, UIWebDocumentView, UIWebOverflowContentView, UIWebOverflowScrollListener;
@interface UIWebOverflowScrollView : UIScrollView
{
UIWebDocumentView *_webDocumentView;
UIWebOverflowScrollListener *_scrollListener;
UIWebOverflowContentView *_overflowContentView;
DOMNode *_node;
BOOL _beingRemoved;
}
@property(nonatomic, getter=isBeingRemoved) BOOL beingRemoved; // @synthesize beingRemoved=_beingRemoved;
@property(retain, nonatomic) DOMNode *node; // @synthesize node=_node;
@property(retain, nonatomic) UIWebOverflowContentView *overflowContentView; // @synthesize overflowContentView=_overflowContentView;
@property(retain, nonatomic) UIWebOverflowScrollListener *scrollListener; // @synthesize scrollListener=_scrollListener;
@property(nonatomic) UIWebDocumentView *webDocumentView; // @synthesize webDocumentView=_webDocumentView;
- (void)setContentOffset:(struct CGPoint)arg1;
- (void)_replaceLayer:(id)arg1;
- (void)prepareForRemoval;
- (void)fixUpViewAfterInsertion;
- (id)superview;
- (void)dealloc;
- (id)initWithLayer:(id)arg1 node:(id)arg2 webDocumentView:(id)arg3;
@end
其还有一个子View作为ContentView,是给WebCore真正用作渲染overflow型内容的layer的容器。
UIWebOverflowContentView的声明为:
@interface UIWebOverflowContentView : UIView
{
}
- (void)_setCachedSubviews:(id)arg1;
- (void)_replaceLayer:(id)arg1;
- (void)fixUpViewAfterInsertion;
- (id)superview;
- (id)initWithLayer:(id)arg1;
@end
再往底层跟,都是CALayer的操作。
以上两个类都是UIKit层的实现,需要WebCore有硬件加速的支持才有实际意义,相关的逻辑被包含在ACCELERATED_COMPOSITING这个宏里。从SVN log看,在WebKit 108400版本左右才支持,所以iOS Safari应该是需要5.0,Android只在4.0以上支持。从前端开发的角度讲,只需要知道CSS的属性-webkit-overflow-scrolling
是真的创建了带有硬件加速的系统级控件,所以效率很高。但是这相对是耗更多内存的,最好在产生了非常大面积的overflow时才应用。
这种格式在Safari和IOS中无法正常运行,值为NaN
var $date = new Date("2016-06-01 08:00");
需要格式改为
var $date = new Date("2016/06/01 08:00");
可以用以下正则替换
$date.replace(/\-/g, '/');
关闭系统完整性保护 SIP 的方法
什么是 SIP?
苹果自 OS X El Capitan 中开启了一个全新的跟安全相关的模式叫 SIP(System Integrity Protection ),它禁止让软件以 root 身份来在 Mac 上运行,在升级到 OS X 10.11 中或许你就会看到部分应用程序被禁用了,这些或许是你通过终端或者第三方软件源安装。对于大多数用户来说,这种安全设置很方便,但是也有些开发者或者高级 Mac 用户不需要这样的设置。
关闭 SIP 的方法:
重启电脑,然后按住 Command + R 键不动,电脑会进入到恢复模式,点击顶部菜单栏的【实用工具】,再点击【终端】
然后在终端中输入命令:csrutil disable
然后按回车
点击左上角苹果LOGO,重启电脑回到正常的Mac系统,这样就关闭了SIP保护;
打开 SIP 的方法:
步骤和上面的方法一样,只需要在执行命令的时候输入:csrutil enable
回车即可;
如何检查电脑是否关闭了 SIP?
打开终端,输入:csrutil status
回车:
显示:System Integrity Protection status: enabled. 就是未关闭;
显示:System Integrity Protection status: disabled. 就是已关闭;