在 H5 + Native 的混合开发模式中，让人诟病最多的恐怕就是加载 H5 页面过程中的白屏问题了。下面这张图描述了从 WebView 初始化到 H5 页面最终渲染的整个过程。 针对 WebView 初始化：该过程大致需耗费 70~700ms。当客户端刚启动时，可以先提前初…

作为一个开发了多个 H5 项目的前端工程师，在开发过程中难免会遇到一些兼容性等爬过坑的问题。现在我将这些问题一一汇总一下，并在后面给出坑产生的原理，和现阶段常规的填坑方案。由此来做一个阶段性的总结。 之前两篇文章已经详细的论述了1px 问题与 响应式布局问题，并给出了原理和解决…

300ms 延迟的由来,是当初07年初苹果发布首款iPhone之前,苹果工程师提出的一个为了优化交互体验的操作.因为当时的网站基本都是为PC等大屏幕设备而写的,而现在需要用小屏幕浏览桌面端网站.当用户用手指把页面放大以后,就有了一个双击缩放(double tap to zoom…

年后第一天到公司上班，整理一些在移动端H5开发常见的问题给大家做下分享，这里很多是自己在开发过程中遇到的大坑或者遭到过吐糟的问题，希望能给大家带来或多或少的帮助，喜欢的大佬们可以给个小赞，如果有问题也可以一起讨论下。 下面是最近一个月整理的JS基础总结，可供大家温故而知新。 移…

## 什么导致了 1px 问题？ 在移动端 Web 开发中，UI 设计稿中设置边框为 1 像素，前端在开发过程中如果出现 `border:1px` ，测试会发现在 Retina 屏机型中，1px

CSS像素：web编程用到的，我们在JS和CSS中使用的10px就是CSS像素，是可变的。CSS像素受屏幕缩放和设备像素比（dpr）的影响。如我们网页的中的字体在网页放大之后会变大，还有在移动端看起来会比PC端小一些 ...... Retina屏幕即视网膜屏幕，是苹果发布iph…

性能优化那么重要吗？快节奏生活下，你又会给一个页面展示多久的等待呢？如何降低首屏加载时间来提高性能，使浏览页面更舒适的更流畅的体验，是值得前端开发人员不断探索实践的课题。

响应式网站，h5网站，宽屏网站，这些都可以称为自适应网站，简单的说就是一个网站可以兼容不同的终端，比如：电脑、ipad、手机等。不需要为每个设备制作一个版本的网站，网站自动识别、兼容，完成电脑网站，自动拥有手机网站、微网站。同时电脑网站、手机网站、微网站统一后台、数据同步，便于…

从移动端的角度说个具体的场景，以iphone6为例。 iphone6的屏幕宽度为375px，设计师做的视觉稿一般是750px，也就是2x，这个时候设计师在视觉稿上画了1px的边框，于是你就写了“border-width:1px”，so...1px边框问题产生了。 对设计师来说它…