by ·0评论

vue 点击事件在UC浏览器下无效

今天早上朋友找我说遇到一个问题UC浏览器点击无效，听说折磨同事好久，我看看了，出了各种主意也没有解决，毕竟没有源代码无法根据问题判断原因所在，不过后来朋友告诉我解决了，用来一个方法 CSS3 新属性 pointer-events

一、问题

  1. 在 UC 浏览器点击事件无效（其他浏览器无问题）。
    附上朋友源码：

    <template>
        <div class="music" @click="playBtn">
            <div class="control"><-- 背景图片 --></control>
    </div>
</template>
<script>
    export default {
            data() {
                return {
                    isPlay: true
                }
            },
            methods: {
                playBtn() {
                    if (this.isPlay) {
                        // 切换图片
                    }
                }
            }
    }
</script>

二、分析原因（个人理解，不喜勿喷，有错误请指出，感谢）

因为移动端部分浏览器点击图片放大，所以会在子元素默认给你绑定一个事件，就会影响你父级元素绑定的事件。
注意：子元素有背景图片或者子元素是img。
img 我添加默认事件可以理解，背景图片也影响是什么鬼，估计是检索url地址给元素绑定默认事件了。
我记得微信浏览器也可以点击放大图片，微信点击放大图片是通过微信API将图片传给微信，点击图片就可以放大了。但是 UC 这个就恶心了，你检索页面图片地址调用你自己的API，但是你绑定默认事件时别影响我正常事件啊。

三、解决方法 pointer-events

给子元素添加样式：

    .control {
        poninter-events: none;
    }

四、 pointer-events详解

简介

官方解释：

pointer-events CSS 属性指定在什么情况下 (如果有) 某个特定的图形元素可以成为鼠标事件的 target。

个人理解和使用：

pointer-event:none; 顾名思义是鼠标事件拜拜的意思，元素使用了该属性，链接啊，点击什么的都统统失效了。

pointer-events:none 的作用是让元素实体“虚化”。例如一个应用pointer-events:none的按钮元素，则我们在页面上看到的这个按钮，只是一个虚幻的影子而已，您可以理解为海市蜃楼，幽灵的躯体。当我们用手触碰它的时候可以轻易地没有任何感觉地从中穿过去。

by ·0评论

开始渲染时间

该时间点表示浏览器开始绘制页面，在此之前页面都是白屏，所以也称为白屏时间。

该时间点可用公式Time To Start Render = TTFB（Time To First Byte） + TTDD（Time To Document Download） + TTHE（Time To Head End）表示。其中TTFB表示浏览器发起请求到服务器返回第一个字节的时间，TTDD表示从服务器加载HTML文档的时间，TTHE表示文档头部解析完成所需要的时间。在高级浏览器中有对应的属性可以获取该时间点。Chrome可通过chrome.loadTimes().firstPaintTime获取，IE9+可以通过performance.timing.msFirstPaint获取，在不支持的浏览器中可以根据上面公式通过获取头部资源加载完的时刻模拟获取近似值。开始渲染时间越快，用户就能更快的看见页面。

对于该时间点的优化有：

1)优化服务器响应时间，服务器端尽早输出

2)减少html文件大小

3)减少头部资源,脚本尽量放在body中

DOM Ready

该时间点表示dom解析已经完成，资源还没有加载完成, 这个时候用户与页面的交互已经可用了。用公式TimeTo Dom Ready = TTSR(Time To Start Render) + TTDC(Time To Dom Created) + TTST(Time To Script)可以表示。TTSR上面已经介绍过了，TTDC表示DOM树创建所耗时间。TTST表示BODY中所有静态脚本加载和执行的时间。在高级浏览器中有DOMContentLoaded事件对应，MDN上有关DOMContentLoaded事件描述的文档如下，

The DOMContentLoaded event is fired when the document has been completely loaded and parsed, without waiting for stylesheets, images, and subframes to finish loading (the load event can be used to detect a fully-loaded page).

详细规范可以查看W3C的HTML5规范。从MDN文档上可以看出该事件主要是指dom文档加载解析完成，看上去很简单，但是DOMContentLoaded事件的触发与css,js息息相关，现在有专门的名词Critical Rendering Path(关键呈现路径)来描述，在文章【关键呈现路径】中详细介绍了关键呈现路径对DOMContentLoaded的影响。

在不支持DOMContentLoaded事件的浏览器中可以通过模拟获取近似值，主要的模拟方法有：

1）低版本webkit内核浏览器可以通过轮询document.readyState来实现

2）ie中可通过setTimeout不断调用documentElement的doScroll方法，直到其可用来实现

具体实现方法可以参考主流框架(jquery等)的实现。 DOM Ready时间点意味着用户与页面可以进行交互了，因此越早越好，对于该时间点的优化有：

1）减少dom结构的复杂度，节点尽可能少，嵌套不要太深

2）优化关键呈现路径

首屏时间

该时间点表示用户看到第一屏页面的时间，这个时间点很重要但是很难获取，一般都只能通过模拟获取一个近似时间。一般模拟方法有：

1）不断获取屏幕截图，当截图不再变化时，可以视为首屏时间。可参考webPagetest的Speed Index算法；

2）一般影响首屏的主要因素是图片的加载，通过页面加载完后判断图片是否在首屏内，找出加载最慢的一张即可视为首屏时间。当然还需考虑其他细节，具体可参考【7天打造前端性能监控系统】

针对该时间点的优化有：

1）页面首屏的显示尽量不要依赖于js代码，js尽量放到domReady后执行或加载

2）首屏外的图片延迟加载

3）首屏结构尽量简单，首屏外的css可延迟加载

onload

该时间点是window.onload事件触发的时间，表示原始文档和所有引用的内容已经加载完成，用户最明显的感觉就是浏览器tab上loading状态结束。 

该时间点的优化方式有：

1）减少资源的请求数和文件大小

2）将非初始化脚本放到onLoad之后执行

3）无需同步的脚本异步加载

为了优化整站性能，页面onload的时候可以考虑做一些预加载，把其它页面需要用到的资源预先加载进来。