webkit

<div class="output_wrapper" id="output_wrapper_id" style="font-size: 16px; color: rgb(62, 62, 62); line-height: 1.6; word-spacing: 0px; letter-spacing: 0px; font-family: 'Helvetica Neue', Helvetica, 'Hiragino Sans GB', 'Microsoft YaHei', Arial, sans-serif;"><h2 id="h" style="color: inherit; line-height: inherit; padding: 0px; margin: 1.5em 0px; font-weight: bold; font-size: 1.4em;"><span style="font-size: inherit; color: inherit; line-height: inherit; margin: 0px; padding: 0px;">前言</span></h2> <p style="font-size: inherit; color: inherit; line-height: inherit; padding: 0px; margin: 1.5em 0px;"

Canvas canvas 最早由Apple引入WebKit,用于Mac OS X 的 Dashboard,后来又在Safari和Google Chrome被实现。 基于 Gecko 1.8的浏览器,比如 Firefox 1.5, 同样支持这个元素。 <canvas> 元素是WhatWG Web applications 1.0规范的一部分,也包含于HTML 5中。 canvas因为是html5引入的， 存在兼容性问题 体验Canvas 什么是Canvas？ HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像。 画布是一个矩形区域，您可以控制其每一像素。 canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。 创建Canvas元素 向 HTML5 页面添加 canvas 元素。 规定元素的 id、宽度和高度： /*属性 width 和 height属性指的是画布的大小*/ <canvas id="myCanvas" width="200" height="100"></canvas> 注意：不要在css中设置canvas的宽高，css中设置的是canvas的大小，而不是canvas中画布的大小 通过JavaScript来绘制 /*获取元素*/ var myCanvas = document.querySelector('#myCanvas'

### flex布局 一般在移动端基本都采用flex的布局方式 　　display:flex;（此时内部容器、内容会强制一行） 　　 　　display:flex; 　　flex-wrap: wrap;(使用flex特性 不强制一行) 　　 　　display:flex; 　　flex-direction:column; //子容器排列方式 column（上下） column-reverse（下上） inherit（默认） initial(从左往右) row(从左往右) row-reverse（从右往左） 　　 　　 　　display:flex; 　　　　 　　　　 　　　　//横向(flex布局中 元素与容器等同) 　　　　justify-content: center; center （类似 text-align:center）； 　　　　 　　　　justify-content: flex-start （ 类似 text-align:left）； 　　 　　　　justify-content: flex-end（ 类似 text-align:right）； 　　　　 　　　　 justify-content: space-between（两端对齐 两个元素就是左浮动 右浮动） 　　　　 　　　　justify-content:space-around; (两端间距对齐) 　

前言 — 在 web 开发场景，减少代码体积虽然是性能优化的一个方向，还没到锱铢必较的程度。但是在小程序场景，由于代码包上传阶段限制了主包 2M 和总包 16M（近期微信官方正在内测将总包上限调整至 20M ）的尺寸，超过就会面临无法发版的风险，代码包体积的优化就变得特别重要了。京喜小程序首页作为微信购物的大入口，承载大量流量，功能复杂模块众多，又要与其他核心业务和公共组件共享 2M 的主包空间，因此代码包瘦身的工作在持续不断进行，否则无法满足业务的快速增长。本文将结合以往优化策略与最近一次的瘦身实践，分享小程序代码瘦身的经验与思考。 常见的瘦身方式 — 京喜首页项目是一个优化良好的项目，对于常见的优化措施，已经有过很好的实践，就让我们我们先回顾一下有哪些常见的优化策略吧： 代码分包：将相对独立的页面和组件拆分到分包，可以解决主包体积受限问题； 依赖分析：移除未引用的页面、组件和其他文件； 避免使用本地资源：除了兜底图片，其他都尽可能使用 url 的方式，由于 base64 图本质上是将信息编码成长字符串，也会占用很多空间，不建议使用； 对所有类型的文件都进行压缩并清理注释，包括了：js、wxml、wxss、json； 此外，京喜首页团队还针对 Taro 开发场景进行了如下优化： 分析出编译后每个文件的高频重复代码（如处理兼容性的 pollyfill 代码），拆分生成公共文件

wkwebview使用时需要导入（#import <WebKit/WebKit.h>） WKWebView 从iOS8才有，毫无疑问 WKWebView 将逐步取代笨重的 UIWebView 。通过简单的测试即可发现 UIWebView 占用过多内存，且内存峰值更是夸张。 WKWebView 网页加载速度也有提升，但是并不像内存那样提升那么多。下面列举一些其它的优势： 更多的支持HTML5的特性 官方宣称的高达60fps的滚动刷新率以及内置手势 Safari相同的JavaScript引擎 将UIWebViewDelegate与UIWebView拆分成了14类与3个协议( 官方文档说明 ) 另外用的比较多的，增加加载进度属性： estimatedProgress 常用属性： @property (nonatomic, readonly) BOOL canGoBack; @property (nonatomic, readonly) BOOL canGoForward; - (WKNavigation *)goBack; - (WKNavigation *)goForward; - (WKNavigation *)reload; - (void)stopLoading; /* reloadFromOrigin会比较网络数据是否有变化，没有变化则使用缓存，否则从新请求。

有时候不想让滚动条显示，然后用如下css设置了滚动条宽度为0： 　　.sidebar::-webkit- scrollbar{ 　　width: 0! important; 　　} 但是会发现火狐浏览器还是会显示滚动条： 在网上搜索了一小圈之后，发现的相对比较合心意的解决办法如下： 　　overflow- y: scroll; 　　scrollbar - color: transparent transparent; 　　scrollbar -track- color: transparent; 　　 -ms-scrollbar-track-color: transparent; 即，将滚动条颜色设置为透明（但是滚动条的宽度还是存在，所以原本滚动条的位置会出现一段空白，不是很完美的解决方法，但是应该是最简单的解决方法） 记录下来，供自己以后参考，同时分享给大家。 来源： oschina 链接： https://my.oschina.net/u/4291625/blog/3447460