浏览器中的页面是如何渲染生成的?
DOM树:JavaScript 是如何影响 DOM 树构建的? 什么是 DOM 从网络传给渲染引擎的 HTML 文件字节流是无法直接被渲染引擎理解的,所以要将其转化为渲染引擎能够理解的内部结构 DOM。DOM 提供了对 HTML 文档结构化的表述。在渲染引擎中,DOM 有三个层面的作用。 从页面的视角来看,DOM 是生成页面的基础数据结构。 从 JavaScript 脚本视角来看,DOM 提供给 …
HTML / CSS / 网页布局知识点
一、普通标签 1、 <q>引用文本</q> 短文本引用。 浏览器会对 q 标签自动添加双引号,但重点是其语义:引用别人的话。 2、<blockquote>引用文本</blockquote> 长文本引用 浏览器对 标签的解析是缩进样式 3、 为你的网页中添加一些空格 4、<address>联系地址信息</addre…
通用 CSS 笔记 建议与指导
在参与规模庞大、历时漫长且参与人数众多的项目时,所有开发者遵守如下规则极为重要: 保持 CSS 易于维护 保持代码清晰易懂 保持 CSS 的可拓展性 为了实现这一目标,我们要采用诸多方法。 本文档第一部分将探讨语法、格式以及分析 CSS 结构;第二部分将围绕方法论、思维框架以及编写与规划 CSS 的看法。 CSS 文档分析 无论编写什么文档,我们都应当维持统一的风格,包括统一的注释、统一的语法与统…
MessengerJS 跨文档通信的通用解决方案
由于现代浏览器有本机跨文档通信方法,PostMeessage API 和 消息事件,本项目主要为需要关注 ie6/7 的开发人员,简单地说,如果你不用兼容 IE6/7 的 iframe 通信,你就不需要这套方案了。 适用场景 此方案适用于以下跨域情形: 父窗口与iframe之间通信 多个iframe之间通信 上述所有情况, 都需确保对不同域的页面有修改权限, 并同时加载MessengerJS IE…
Blade 轻量级 高性能 简洁优雅的 Web 框架
Blade 是一款追求简约、高效的 Web 框架,让 JavaWeb 开发如虎添翼,在性能与灵活性上同时兼顾。 如果你喜欢尝试有趣的事物,相信你会爱上它。 Blade 基于 Java8 开发,为个人开发者打造的轻量级 MVC 框架, 你只需要创建普通的 Maven 工程即可完成一个简单的应用。 在 Linux 8核CPU 1G内存,100个并发、100个连接下连续请求 60秒 吞吐可达每秒超 10…
Weinre 基于 Web Inspector(Webkit) 的远程调试工具
Weinre(Web Inspector Remote) 是一款基于Web Inspector(Webkit)的远程调试工具, 它使用JS编写, 可以让我们在电脑上直接调试运行在手机上的远程页面。 与传统的Web Inspector的使用场景不同, Weinre的使用场景如下图, 调试的页面在手机上, 调试工具在 PC 的 chrome, 二者通过网络连接通信。 1.1 Weinre 实验环境搭建…
ngrok 本地安全隧道链接内网穿透
本地安全隧道:localhost,我想将一个本地服务器暴露在NAT或防火墙后面的互联网,ngrok 是一个反向代理,通过在公共的端点和本地运行的 Web 服务器之间建立一个安全的通道。ngrok 可捕获和分析所有通道上的流量,便于后期分析和重放。 特点 应用不使用 ngrok 和使用 ngrok 不要不断地重新部署正在进行的工作,以获得客户的反馈。 ngrok会在您计算机上的本地Web服务器上创建…
Web 开发字体设置最佳方案
字体设置 body { font-family: -apple-system, BlinkMacSystemFont, "PingFang SC","Helvetica Neue",STHeiti, "Microsoft Yahei",Tahoma,Simsun,sans-serif; } iOS 4.0+(iOS 9以下系统已经非常少) 使用英文字体 Helvetica Neue,之前的iOS版…
移动 Web 开发最佳实践与中文总结
从 meta 开始 本节之后可能也涉及 meta 标签,但为了更加全面的摸透 meta 特地用一节的篇幅来系统概述。 一、meta 标签分两大部分:HTTP 标题信息(http-equiv)和页面描述信息(name)。 1、http-equiv 属性的 Content-Type 值(显示字符集的设定) 说明:设定页面使用的字符集,用以说明主页制作所使用的文字语言,浏览器会根据此来调用相应的字符集显…
Validform 一行代码搞定整站的表单验证
Validform 一行代码搞定整站的表单验证,为什么能如此方便?插件的核心思想就是把所有的验证条件及验证提示信息绑定到每个表单元素,让验证代码在执行时只是核对表单下各元素的值是否跟绑定的验证条件相符,这样你可以随便添加或者去掉任一表单元素而不必修改验证代码,从而使仅用一行代码去完成整站的表单验证的梦想成为现实! $(".demoform").Validform(); 功能简介 可以在 input…
使用 HTML5 Boilerplate 开始您的 Web 开发
web 开发团队的一个常见实践是创建一组标准文件,团队成员基于它们开始 web 开发流程,包括一个公共文件结构、基本命名惯例和标准库。这样做能够更容易启动并运行一个项目。它还能将开发人员引向内部编码标准并实施标准文件组织。HTML5 Boilerplate 就是这种处于 web 开发最前沿的完美理念的实现。 结合了使用 HTML5 需要的几个增强和许多其他最佳实践,只需最少的前期投资,HTML5 …
JSBlocks 更好的 MV-ISH 框架
JSBlocks 是一个更好的 MV-ISH 框架,从简单的用户界面到使用更快、服务器端呈现和易于学习的框架的复杂单页应用程序。 特点 提高HTML的级别 用HTML编写代码查询。不需要学习新语法 <input data-query="val(newTodo)"> 双向数据绑定 通过使用可观测数据,使模型和视图始终保持同步。 this.newTodo = blocks.observab…
WebAssembly 可移植 体积小 加载快并且兼容 Web 的全新格式
WebAssembly/wasm WebAssembly 或者 wasm 是一个可移植、体积小、加载快并且兼容 Web 的全新格式,WebAssembly 是由主流浏览器厂商组成的 W3C 社区团体 制定的一个新的规范,多个浏览器已经达成对初始 WebAssembly 版本的一致意见。 特点 高效 WebAssembly 有一套完整的语义,实际上 wasm 是体积小且加载快的二进制格式, 其目标就…
- 共 4 页
- 1