我们一直在写HTML，关注的一直是界面和功能，很少考虑整个HTML的渲染过程。也是，在开发过程中确实不需要关注这方面，但是知道和理解HTML的渲染过程，对于HTML的一些性能有很好的认识。
在很久很久以前，我在封装自己的JQuery库时就使用过DOMContentLoaded，觉得这个知识点看看别的文章就行了，不过现在我想把它记下来。
摘要总结：本文介绍了一种用于Web应用程序的基于关键CSS和Webpack的代码拆分和优化方法。该方法通过将关键CSS与Webpack生成的非关键CSS进行拆分，在提高页面加载速度的同时，保留对关键CSS的访问权限，适用于对性能要求较高的Web应用程序，同时具有较好的可维护性。
HTML→head→tittle→text（网页标题）→style→加载样式→解析样式→link→加载外部样式表文件→解析外部样式表文件→script→加载外部脚本文件→执行外部脚本→body→div→script→加载脚本→解析脚本→执行脚本→img→script→加载脚本→解析脚本→执行脚本→加载外部图像文件→页面初始化完毕
svgHTML5中使用svgsvg的基本语法svg内部标签几何图形标签路径标签文字标签
当HTML解析器解析HTML，如果遇到script标签，普通的script标签会暂停对DOM解析渲染，因为该脚本可能会修改DOM。
当HTML解析器解析HTML，如果遇到script标签，普通的script标签会暂停对DOM解析渲染，因为该脚本可能会修改DOM。 这里有三种情况：普通脚步、defer、async。 ==defer、async只对外联script脚本文件有效, 内联script脚本设置无效。\==
让网页展现的更快，官方说法叫做首屏绘制，First Paint 或者简称 FP，直白的说法叫做白屏时间，就是从输入 URL 到真的看到内容（不必可交互，那个叫 TTI, Time to Interactive）之间经历的时间。当然这个时间越短越好。
怎么进步Web页面的功用，许多开发人员从多个方面来下手如JavaScript、图画优化、服务器配置，文件压缩或是调整CSS。 很显然HTML 已经达到了一个瓶颈，虽然它是开发Web 界面必备的核心言语。HTML页面的负载也是越来越重。大多数页面平均需求40K的空间,像一些大型网站会包含数以千计的HTML 元素，页面Size会更大。 怎么有用的下降HTML 代码的复杂度和页面元素的数量，本文主要解决了这个问题，从多个方面介绍了怎么编写简练，明晰的HTML 代码，能够使得页面加载更为迅速，且能在多种设备中运转良
如何毫不费力地提高网站加载时间？哪些优化和改进可以帮助加快页面加载速度？以网页为例，证明可以在不到一秒的时间内下载。
web标准简单来说可以分为结构、表现和行为，其中结构主要是有HTML标签组成，或者通俗点来讲，在页面Body中我们写入的标签都是为了页面的结构，表现指css样式表，通过css可使页面的结构标签更具美感，行为是指页面和用户具有一定的交互，同时页面结构或者行为发生变化，主要是js组成。
今天简单说一下chrome开发者工具（DevTools）的Network，就只是几个模块简介一下。前端开发，对这个应该都特别熟悉。
我最近写了篇《掌握和成为更好的Web开发人员的15件事》（地址：https://beforesemicolon.medium.com/15-css-things-to-master-and-become-a-better-web-developer-a18f370a8bc5），然后意识到编写CSS不仅需要专注于某些功能。
一、前言 我们一般使用方式为 <link type="text/css" rel="stylesheet" href="text.css"> 来引入外部层叠式样式文件，但LINK元素各属性的具体含义、资源加载行为等方面却了解不多，本文打算稍微深入一下。 由于内容较多，特设目录一坨： 二、到底有没有结束标签？ 三、普通属性介绍 四、属性disabled详解 1. Attribute和Property的disabled 2. dis
https://blog.csdn.net/chenmozhe22/article/details/80035871
根据上一篇文章已经可以实现报表邮件系统的初步 DEMO 了，但其实只是提供了基本的思路。
如何提升 Web 页面的性能，很多开发人员从多个方面来下手如 JavaScript、图像优化、服务器配置，文件压缩或是调整 CSS。 很显然 HTML 已经达到了一个瓶颈，尽管它是开发 Web 界面必备的核心语言。HTML 页面的负载也是越来越重。大多数页面平均需要40K的空间,像一些大型网站会包含数以千计的 HTML 元素，页面Size会更大。 如何有效的降低 HTML 代码的复杂度和页面元素的数量，本文主要解决了这个问题，从多个方面介绍了如何编写简练，清晰的 HTML 代码，能够使得页面加载更为迅速，且
在上一篇文章【微前端】single-spa 到底是个什么鬼[1] 聊到了 single-spa 这个框架仅仅实现了子应用的生命周期的调度以及 url 变化的监听。微前端的一个特点都没有实现，严格来说算不上微前端框架。
* 开发时，在自己电脑上运行得好好的，在手机上打开就挂了，但是手机上又看不到error log…
还有几天就到国庆中秋了，快要放假了，先祝大家节日快乐！之前写过js的写作建议和技巧，那么今天就来聊聊css吧！说到css，每一个网页都离不开css，但是对于css，很多开发者的想法就是，css只要能用来布局，把效果图排出来就可以了，其它的细节或者优化，不需要怎么考虑。但是我觉得css可不只是把页面的布局完成就是完事的，还需要考虑很多细节有优化，更不会像大家想得那么简单，在学习当中，如果发现什么技巧或者优化的点，我也会学以致用！那么今天，就分享下我总结的css写作建议和性能优化的一些问题！希望能帮让大家对神奇的css有一个新认识，当然，如果大家觉得还有什么其它的建议。欢迎指点！
如何提升Web页面的性能，很多开发人员从多个方面来下手如JavaScript、图像优化、服务器配置，文件压缩或是调整CSS。 很显然HTML 已经达到了一个瓶颈，尽管它是开发Web 界面必备的核心语言。HTML页面的负载也是越来越重。大多数页面平均需要40K的空间,像一些大型网站会包含数以千计的HTML 元素，页面Size会更大。 如何有效的降低HTML 代码的复杂度和页面元素的数量，本文主要解决了这个问题，从多个方面介绍了如何编写简练，清晰的HTML 代码，能够使得页面加载更为迅速，且能在多种设备中运行良
WebView是安卓中用来显示html文本内容的的控件，对html5也有很好的支持，ios的控件UIWebView差不多。网上对WebView的解释很多，但都是零星的介绍，导致到现在为止webview给我的印象都是，貌似很强大，其实很鸡肋，于是决定总结一下webview的开发经验。 使用WebView并不需要开通网络权限 网上有文章说webview需要开通internet权限，否则会出Web page not available错误，这是不对的，出现Web page not available并不是因为使用
原文：http://www.cnblogs.com/lvdabao/p/3379659.html
在日常开发展示页面，如果一段文本的数量过长，受制于元素宽度的因素，有可能不能完全显示，为了提高用户的使用体验，这个时候就需要我们把溢出的文本显示成省略号。
在前端页面的实现过程中，我们经常会遇到这个情况：有一个盒子，盒子里面需要放一张图片。这个时候，我们既可以通过添加image标签来实现，也可以通过设置背景图的形式实现，哪种更好呢？ 一般情况下，可能就是哪种顺手用哪个，因为都能实现需要的功能，但如果都是这样的话，html也就没必要做两个标签了。下面就来看一下两者的区别：
HTML 用了尖括号作为了标签的边界符，这只是一种语法规定，事实上如果我们愿意，我们使用 JSON 或 TOML 格式实现结构化也是可以的，我们也可以使用方括号代替尖括号，但从实际结果来看，还是使用 XML 格式更好，尖括号因为在文本中使用不多，用它作为边界符也比较合适。
起因是网友给 FixIt 提了一个 issue hugo-fixit/FixIt#411，说图片比例异常，我一回想，最近没动过图片的代码，于是用 Safari 和 Edge 试了一下，发现没问题，那么基本可以确定是 Chrome 新版的问题了。
HTML部分 DOCTYPE的作用？标准模式和兼容模式各有什么区别？ 告知浏览器的解析器用说明文档标准来解析这个文档；如果在文档开始处没有发现文档类型声明或者格式不正确将会导致浏览器开启兼容模式。 标准模式以该浏览器支持的最高标准运行；兼容模式以一种宽松的向后兼容的方式显示。 页面导入样式时，使用link标签和@import标签有什么区别？ ①link标签属于html标签，而@import是css提供的。②页面被加载时，link会被同时加载，而@import引用的css会等到页面被加载完在加载。③@i
技术栈无关：主框架不限制接入应用的技术栈，子应用具备完全自主权 独立开发、独立部署：子应用仓库独立，前后端可独立开发，部署完成后主框架自动完成同步更新 独立运行时：每个子应用之间状态隔离，运行时状态不共享
代码运行的性能优化需要用 Performance 工具记录某段时间的代码运行情况，分析出 long task，定位到耗时高的代码，针对性的优化它。
DOMContentLoaded，load，beforeunload，unload
可能很多人脑海中已经出现了这样一个动画，当浏览器中页面尺寸不断变化时，内容也在随之变化。简单说，响应式网站设计是一种允许设计和代码响应设备屏幕大小的方法。
我发现很多候选人都没有答道关键点上，感觉是在哪里看到过相关的文章，听起来零零散散，毫无逻辑。
组件化使得复杂的前端结构变得清晰，各个部分独立起来，高内聚低耦合，使得维护成本大大降低。
这段时间对项目做了一次整体的优化，全站有了20%左右的提升（本来载入速度已经1.2S左右了，优化度很低），算一算已经做了四轮的全站性能优化了，回顾几次的优化手段，基本上几个字就能说清楚：
最近小编接了一个新需求，用h5开发页面，通过webview嵌入原生APP中，自己在浏览器上开发爽歪歪，什么信息都能看到，可是一嵌入原生app中，瞬间就熄火了，啥也看不到了，不知道为什么，反正就是页面点不动了。
这个就是为了测试微信公众号付费功能特意写的插件，非常有诚意，😎 哈哈，今天更加诚意一点，特意写一篇详细的 WPJAM「代码高亮」插件使用教程。 WPJAM「代码高亮」插件特别之处 现在大部分代码高亮的插件都是使用 prism 这个代码高亮 JS 库来实现的，WPJAM「代码高亮」插件也是，只是之前是纯代码方式写到主题里面，今天就把它整理了一下，做成一个插件。 整个插件自己写的代码只有不到 30 行，就是利用 WordPress 的 wp_enqueue_scripts 接口让页面加载 prism 的样式和脚
作为前端工程师对W3C标准和规范不是很陌生。很多招聘要求中经常提到深入了解W3C标准及规范。那下面就总结一下W3C标准及规范：
身为前端，打交道最多的就是浏览器和node了，也是我们必须熟悉的。接下来我们讲一下浏览器工作原理和工作过程。从url到页面的过程，......，我们直接来到收到服务器返回内容部分开始。
只能说，实现 Dark Mode 的尽头是手写。 手机 QQ 最近火急火燎地整改，暗黑模式的支持就是其中的一个整改项。由于腾讯课堂在手机 QQ 有一个常驻入口，因此我们也要按照它们的要求实现真正意义上的 dark mode 支持 (而不是目前手机 QQ 强制给加的一层灰色蒙层)。 大学时候有个项目也是自己设计和实现的 dark mode 支持，当时是手写的，依稀记得后面从哪些文章里看到说可以一行代码实现暗黑模式云云，于是企图在这次实践过程中应用下这些奇技淫巧，然而经过一天的实践，我发现这些方法有绕不过的坑，
协作翻译 原文：How to build your first Vue.js component 链接：https://medium.freecodecamp.org/build-your-first-vue-js-component-2dc204bca514 译者：凉凉_ 记得当那天使用 CakePHP 开发的时候，我很喜欢它简易入门的特性。其文档不仅结构严密，详尽，而且对用户友好。多年以后，我在 Vue.js 上找到了同样的感觉。然而，与 Cake 相比，Vue 文档还有一个缺点：（缺乏）真实的项目
上节课我们已经创建好了俩个项目作为demo，所以接下来就是我们要打造一个项目列表的前端页面
通过使用模板，我们可以把model和controller中的数据组装起来呈现给浏览器，还可以通过数据绑定，实时更新视图，让我们的页面变成动态的。ng的模板真是让我爱不释手。学习ng道路还很漫长，从模板开始入手是个不错方式，因为这部分内容相对简单好理解，而且是视图层的东西，大家都喜欢可以立马看得见的东西嘛。本篇我将搜罗模板中的常用指令一一测试，了解其使用方法，有点像背单词的感觉，会比较枯燥。不过对于初学，这样的枯燥是必须要经历的，开始~
注意：这篇文章描述了一种我们仍需要测其试性能影响的实验技术。它可能最终会成为一种有用的工具，也有可能成为不被推荐的做法。无论哪种方式，它对我们来说很有吸引力！
到目前为止，互联网行业里，手机越来越智能化，移动端占有的比例越来越高，尤其实在电商，新闻，广告，游戏领域。用户要求越来越高，网站功能越来越好，效果越来越炫酷，这就要求我们产品质量越来越高，web前端开发而言是一个挑战，是一个难题，也是一个机遇。如何让我们所开发的手机页面能有更好的交互体验，就是这篇文章的主旨：移动web开发问题和优化小结。这个只是我自己在开发的时候知道的坑，如果大家有遇到什么别的坑，欢迎补充，或者觉得我哪里写错了，欢迎指点！
最近看了几个微前端框架的源码（single-spa、qiankun、micro-app），感觉收获良多。所以打算造一个迷你版的轮子，来加深自己对所学知识的了解。
首先，如果你是初学者，我强力建议你先看完我这篇文章： 【开发指南】（四）Ionic3快速上手并了解这些
1、@import是 CSS 提供的语法规则，只有导入样式表的作用；link是HTML提供的标签，不仅可以加载 CSS 文件，还可以定义 RSS、rel 连接属性等。
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
对象存储
实时音视频
即时通信 IM
