分类 Web 下的文章

本文通过分析一个小案例帮大家从一个侧面理解JavaScript的异步执行机制,从而可以在实践中避免类似的尴尬。

小背景

我们都知道,alert这种内置弹框会阻塞后续代码执行:

之所以如此,就是因为JavaScript代码在浏览器中是单线程执行的。换句话说,浏览器中只有一个主线程负责运行所有JavaScript代码(不考虑Web Worker)。

提到浏览器中的JavaScript,基本上只有三个来源:

  • BOM API的代码,让我们可以操作并利用浏览器提供的能力
  • DOM API的代码,让我们可以操作网页内容
  • 我们自己写的ECMAScript代码

这没什么。我们也知道,setTimeout用于“定时”执行代码,比如这样可以定时在3秒钟之后执行一段代码(函数):

setTimeout(delayCode, 3000)

- 阅读剩余部分 -

各位,如果你的职业是开挖掘机,你说要不要深入理解挖掘机?通常来说,深入理解你操纵的机器才能最终达到人机一体的境界。

当然,你可以说:不用,因为如果挖掘机不好使,我可以换一台。嗯,也有道理。不过,假如你同时又是一名前端开发者,那你要不要深入理解浏览器呢?注意,身为前端,你不太可能有机会因为浏览器不好使就强迫用户换一个你认为好使的。这时候,你好像别无选择了。

不过也不用害怕,今天我们的现代浏览器深度游会非常轻松、快乐。这首先必须感谢一位名叫Mariko Kosaka(小坂真子,https://kosamari.com/)的同行。她在Scripto工作,2018年9月在Google开发者网站上发表了“Inside look at modern web browser”系列文章。本文就是她那4篇文章的“集合版”。为什么搞这个“集合版”?因为她的4篇文章写得实在太好,更难得的是人家亲手绘制了一大堆生动的配图和动画,这让深入理解现代浏览器变得更加轻松愉快。

好了,言归正传。本文分4个部分,对应上述4篇文章(原文链接附后)。

  • 架构:以Chrome为例,介绍现代浏览器的实现架构。
  • 导航:从输入URL到获到HTML响应称为导航。
  • 渲染:浏览器解析HTML、下载外部资源、计算样式并把网页绘制到屏幕上。
  • 交互:用户输入事件的处理与优化。

先来个小小的序言。很多人在开发网站时,只关注怎么写自己的代码,关注怎么提升自己的开发效率。这些当然重要,但是写到一定的阶段,就应该停下来想想:浏览器到底会怎么运行你写的代码。如果你能多了解一些浏览器,然后对它好一点,那么就会更容易达成你提升用户体验的目标。

- 阅读剩余部分 -

我曾在本系列第二篇“H5必知必会之像素级还原设计稿”的最后写道:

……读者可能会不由自主地猜测这个系列第三篇的主题是什么?……还有可能会写一写基于某个脚手架快速从头搭建一个H5项目以及实现前端工程化……。

那么,今天我们这一篇的主题就是“快速搭建开发环境”。快速,有多快?答案:取决于你的网速。因为我们真的有这么一个脚手架:qvk。

什么是qvk

qvk是一个集成现代前端工程化最佳实践的通用Web开发环境,可用于开发传统C/S架构的Web应用、SPA(单页应用)、H5(App内嵌页)等。

qvk脱胎于多个360前端项目,集成了开源社区中涌现的优秀框架、工具和最佳实践。qvk初始版集成以下Web框架和打包工具。

  • ThinkJS:基于MVC模式的简单易用、功能强大的Node.js开发框架。
  • Vue.js:渐进式JavaScript框架,前端组件式开发主流选择。
  • Webpack:目前使用最广泛的前端资源模块打包工具。

什么,这里有些新面孔?没关系,不久你就会发现它们都很友好、简单。

- 阅读剩余部分 -

本文是“H5必知必会”系列第二篇。在第一篇“H5必知必会之与App交互”(https://lisongfeng.cn/index.php/2019/03/06/mobile-web-development-2-interactive-with-native-app.html)中我们提到过,所谓“H5”本来应该是HTML5的简称。但是,在中国,“H5”并不是HTML5的简称那么简单,它更多地被用于指代内嵌在手机App中的网页。无论国外有没有“H5”这个说法(应该没有),反正在国内只要说到App内嵌的网页或网页应用,你完全可以说它是“H5”。一说“H5”,产品经理、设计师、Android/iOS应用开发者、后端工程师全都明白。

不能不说,这个现象很神奇。也许,在前端行业之外人的眼里,手机屏幕上的网页就应该有一个跟大屏幕上的网页不一样的名字,这样才好区分。事实上,就算是在前端开发行业内,有这么一个词让我们瞬间就可以定位到一种应用形态,至少也是一件非常便利的好事。

那么手机上的网页跟大屏幕上的网页有什么不同呢?

首先,手机上的网页运行在手机浏览器或者App内嵌的WebView中,可以使用手机特有的硬件能力,比如GPS、加速计、陀螺仪等传感器;此外,如果加载了宿主App的JSSDK,还可以访问App暴露给网页的各种能力,比如获取登录用户的信息、拍照上传和分享,等等。

其次,手机上的网页布局设计要服从于原生App的界面(UI)设计规范,比如谷歌的扁平化设计Material Design,苹果的人机界面指南(Human Interface Guide)等;总之,手机上的网页看起来必须像原生App的界面,包括使用与原生App一致的布局组件、字体图标、配色方案,乃至交互模式等,比如要支持触摸而非鼠标点击交互。

最后,手机上的网页,特别是运行于App内的网页,构成混合移动应用的一部分,通常都需要与原生App互操作;需要H5与原生应用双方共同商定基础接口,并针对特定的交互场景确定具体的交互模式,包括单向调用还是双向调用,同步还是异步,如何传递数据和凭据,等等。

上述第三点,正是本系列第一篇文章“H5必知必会之一App交互”讨论的内容,感兴趣的同学稍后可以参考。那么今天,本文要讨论的则是上述第二点,即H5在构造页面布局时,如何逼真、像素级还原设计稿。

- 阅读剩余部分 -

标题说的是官网,但实际上本文主要介绍的是展示大图的页面,也就是概述页。为简便起见,本文以下用“官网”代称“360 AI音箱官网概述页”。

这次官网的设计稿是提前4天才开始出的,最后一个页面是上线前一天下午2点给的。总之,时间非常紧,没有充裕的时间去调研多种实现方案。开发中采用了比较保守、兼容性好的技术。

基本数据

说到大图,就得知道主流显示器的分辨率。京东在销显示器的分辨率如下:

  • 3840×2160
  • 3840×1080
  • 3440×1440
  • 2560×1440
  • 2560×1080
  • 1920×1200
  • 1920×1080

维基百科2019年1月调查结果如下(https://p4.ssl.qhimg.com/t01fff3464ffc757200.png):

标准比例宽度(px)高度(px)用户(%)
nHD16:96403604.26
SVGA4:38006000.42
XGA4:310247683.29
WXGA16:912807203.15
WXGA16:1012808003.88
SXGA5:4128010243.37
HD~16:913607681.65
HD~16:9136676824.27
WXGA+16:1014409006.55
非标16:915368645.5
HD+16:916009004.81
WSXGA+16:10168010502.52
FHD16:91920108019.20
WUXGA16:10192012001.20
QWXGA16:9204811520.46
非标21:925601080n/a
QHD16:9256014402.09
21:934401440n/a
4K UHD16:938402160n/a

也就是说,2560像素及以下宽度屏幕的用户占86%以上。为此,官网所有大图最大宽度为2560像素。

图片数25
大图数15
页面体积6.8MB

接下来,本文主要从以下几方面概述官网开发涉及的技术点:

  • 呈现大图
  • 弹性文字
  • HTML结构
  • CSS布局
  • 自定义字体
  • 固定页脚

- 阅读剩余部分 -