讲到动画，当然是非常有意思的啦，你可以往上滑一下，看看上面的封面图，是不是相当的炫酷，以为我是代码写出来的吗？
设计理念之没有设计就是最好的设计，毕竟本质是写文章的地方，不搞什么二次元花里胡哨的影响阅读的设计，同时尽量实现较高的性能。 PageSpeed Insights 性能报告说 100 分，但是整体资源大小比较大，只能说遗憾。
首先我们打开一个网页看到的都只是前端，所以我们看到一个页面背后的支持就是HTML代码，其中就包含了各种网页标签，其中包括网站优化中的TKD，载入的渲染资源：java、css，已经页面内容：图片、音频、视频等。 一、代码的足够简洁 减少代码冗余，保持简洁的代码风格，这是作为一个网页程序员的必修，能同样实现一个效果的能用css就尽量不用js，能用两行代码解决问题的就别写三行，这是最基础的一点。 二、减少资源载入 这里子凡所说的资源主要是指js、css文件，因为我知道现在很多的前端开发设计人员喜欢用各种开源的特效
前端这个岗位的出现最根本的原因是互联网的出现，浏览器是最早互联网的唯一入口。人们通过浏览器浏览各种不同网站的内容。这些内容来自服务器中，但浏览器从服务器拿到这些内容之后，应该怎么展示给用户，这就是前端的职责。所以，最早的时候前端工作者本质上做的是告诉浏览器怎么展示数据。
还有几天就到国庆中秋了，快要放假了，先祝大家节日快乐！之前写过js的写作建议和技巧，那么今天就来聊聊css吧！说到css，每一个网页都离不开css，但是对于css，很多开发者的想法就是，css只要能用来布局，把效果图排出来就可以了，其它的细节或者优化，不需要怎么考虑。但是我觉得css可不只是把页面的布局完成就是完事的，还需要考虑很多细节有优化，更不会像大家想得那么简单，在学习当中，如果发现什么技巧或者优化的点，我也会学以致用！那么今天，就分享下我总结的css写作建议和性能优化的一些问题！希望能帮让大家对神奇的css有一个新认识，当然，如果大家觉得还有什么其它的建议。欢迎指点！
qiankun 是主流的微前端方案，其他的还有京东的 micro-app、腾讯的 wujie 等。
俗话说「人靠衣装马靠鞍」，一个网页的漂亮与否CSS起到了很大的作用。它能够帮助我们进行美化。因此 CSS 在前端开发中的地位不用多说。
在前端有一句古话，叫能用CSS实现的就别麻烦JS，因为声明式的配置语言CSS相比于自由式的编程语言JS，更容易被编译器所优化，比如css渲染引擎会优先考虑gpu加速，因此CSS动画的性能往往高于JS动画，本文介绍在不需要html和js的配合的情况下，用纯css实现一个好看的四角边框。
如何提升 Web 页面的性能，很多开发人员从多个方面来下手如 JavaScript、图像优化、服务器配置，文件压缩或是调整 CSS。 很显然 HTML 已经达到了一个瓶颈，尽管它是开发 Web 界面必备的核心语言。HTML 页面的负载也是越来越重。大多数页面平均需要40K的空间,像一些大型网站会包含数以千计的 HTML 元素，页面Size会更大。 如何有效的降低 HTML 代码的复杂度和页面元素的数量，本文主要解决了这个问题，从多个方面介绍了如何编写简练，清晰的 HTML 代码，能够使得页面加载更为迅速，且
我发现很多候选人都没有答道关键点上，感觉是在哪里看到过相关的文章，听起来零零散散，毫无逻辑。
最近做的项目大量用到了 webview ，用网页来布局。 Android 的 webview 是基于 webkit 内核，不过他的运行效果和 firefox 上一模一样，所以写的时候都是先用 firefox 测试，测试 OK 了再放到程序里面看效果，基本上不会有什么问题。其实 android 的 webview 跟 iphone 的 webview 差不多， iphone 上的 webview 比 android 上的强大多了。
如何提升Web页面的性能，很多开发人员从多个方面来下手如JavaScript、图像优化、服务器配置，文件压缩或是调整CSS。 很显然HTML 已经达到了一个瓶颈，尽管它是开发Web 界面必备的核心语言。HTML页面的负载也是越来越重。大多数页面平均需要40K的空间,像一些大型网站会包含数以千计的HTML 元素，页面Size会更大。 如何有效的降低HTML 代码的复杂度和页面元素的数量，本文主要解决了这个问题，从多个方面介绍了如何编写简练，清晰的HTML 代码，能够使得页面加载更为迅速，且能在多种设备中运行良
在浏览器开始渲染页面，或者长时间执行某个 JS 时，主线程会一直在忙碌状态，此时对于用户的任何输入或是操作都不会有所响应。
定义： 当通过JS或css改变了元素的宽度、高度等，修改了元素的几何位置属性，那么浏览器会触发重新布局，解析之后的一系列子阶段，这个过程就叫重排。无疑， 重排需要更新完整的渲染流水线，所以开销也是最大的。
本文没有什么高深的东西，就是写几个CSS样式经常遇见的东西，可能大部分都已经知道怎么解决了，当做小白文浏览就好。
1.在JS中尽量减少闭包的使用（原因：闭包会产生不释放的栈内存） A:循环给元素做事件绑定的时候，尽可能的把后期需要的信息（例如索引）存储到元素的自定义属性上，而不是创建闭包存储 B:可以在最外层形成一个闭包，把一些后续需要的公共信息进行存储，而不是每一个方法都创建闭包(例如单例模式) C:尽可能的手动释放不被占用的内存 ...
当HTML解析器解析HTML，如果遇到script标签，普通的script标签会暂停对DOM解析渲染，因为该脚本可能会修改DOM。
当HTML解析器解析HTML，如果遇到script标签，普通的script标签会暂停对DOM解析渲染，因为该脚本可能会修改DOM。 这里有三种情况：普通脚步、defer、async。 ==defer、async只对外联script脚本文件有效, 内联script脚本设置无效。\==
1、为提高团队协作效率，便于后台人员添加功能及前端后期优化维护，输出高质量的文档，也为了更好阅读、修改和提高对CSS的加载速度，CSS的编写应该遵循一定的编写规范。目前网上已经流行一些比较好的规范，大多由网友总结；大公司的CSS规范也值得我们去参考。但由于无法获取到大公司的内部资料，只能参考部分网上一些比较好的资料来制作一套自己的规范。
敲代码没有高亮简直蛋疼，简单带过下 sublime打开 —→ 点击Preferences下的Package Control —→ 输入install package回车 过一会儿 —→ 再输入vue syntax highlight回车，安装完毕 —→ 点击sublime选择vue component，即高亮
作者：谭照强，热爱折腾前端，喜欢新奇创意的程序员，业余喜欢玩摄影，弄咖啡。 作为一名前端，在拿到设计稿时你有两种选择： 1.快速输出静态页面 2.加上高级大气上档次狂拽炫酷屌炸天的动画让页面动起来作为一个有志向的前端，当然是选2啦！可是需求时间又很短很短，怎么办呢？ 这次就来谈谈一些动画设计的小技巧，能在你时间不多又没有动画想法的时候瞬间让页面增色不少。 同时也会谈及移动端H5页面的优化细节与关键点，因此本文章将分为动效篇和优化篇。 （1） CSS3时序错开渐显动画 这是一种比较常用的动画，它的优点是节奏
React是FaceBook（脸书）公司研发的一款JS框架（MVC） React是一款框架：具备自己开发的独立思想(MVC：Model View Controller) -> 划分组件开发 -> 基于路由的SPA单页面开发 -> 基于ES6来编写代码(最后部署上线的时候，我们需要把ES6编译成ES5 =>基于Babel来完成编译) -> 可能用到Less/Sass等，我们也需要使用对应的插件把他们进行预编译 -> 最后为了优化性能（减少HTTP请求次数），我们需要把JS或者CSS进行合并压缩 -> webpack来完成以上页面组件合并、JS/CSS编译加合并等工作
工程化，可以理解为使用一些方式，去改良然后提高行业中现有的步骤、设计、应用方式。前端工程化，就是指对前端进行一些流程的标准化，让开发变得更有效率，且更好地做产品交付。
有时候，我们需要给多个元素添加同一个动画，播放后，不难发现它们会一起运动，一起结束，这样就会显得很平淡无奇。
关注 JS 太久，会养成任何功能都用 JS 实现的习惯，而忘记了 HTML 与 CSS 也具备一定的功能特征。其实有些功能用 JS 实现吃力不讨好，我们要综合使用技术工具，而不是只依赖 JS。
2）css、js、img等静态资源合并压缩（vue的项目有压缩css和js）
平时写CSS，感觉有很多多余的代码或者不好实现的方法，于是有了预处理器的解决方案，主旨是write less &do more。其实原生css中，用上css变量也不差，加上bem命名规则只要嵌套不深也能和less、sass的嵌套媲美。在一些动画或者炫酷的特效中，不用js的话可能是用了css动画、svg的animation、过渡，复杂动画实现用了js的话可能用了canvas、直接修改style属性。用js的，然后有没有想过一个问题：“要是canvas那套放在dom上就爽了”。因为复杂的动画频繁操作了dom，违背了倒背如流的“性能优化之一：尽量少操作dom”的规矩，嘴上说着不要，手倒是很诚实地ele.style.prop = <newProp>，可是要实现效果这又是无可奈何或者大大减小工作量的方法。
作为一名前端，在拿到设计稿时你有两种选择： 1.快速输出静态页面 2.加上高级大气上档次狂拽炫酷屌炸天的动画让页面动起来 作为一个有志向的前端，当然是选2啦！可是需求时间又很短很短，怎么办呢？ 这次就来谈谈一些动画设计的小技巧，能在你时间不多又没有动画想法的时候瞬间让页面增色不少。 同时也会谈及移动端H5页面的优化细节与关键点，因此本文章将分为动效篇和优化篇。 ====前方高能==== （1） CSS3时序错开渐显动画 这是一种比较常用的动画，它的优点是节奏感强，做法就是先让每个元素隐藏，然后当页面呈现后
Vue中的scoped属性的效果主要是通过PostCss实现的。以下是转译前的代码:
在使用CSS过程中会遇到一个非常头疼的问题，因为CSS中没有像java/C++或者PHP等程序语言一样有有自己的变量、常量、条件语句以及一些编程语法，只是一行行单纯的属性描述，写起来相当的费事，而且代码难以组织和维护，为了解决这个问题，引入了预处理CSS，预处理CSS可以像Java/C++或者PHP一样用变量，函数等语法描述CSS。
早起 JS操作不同浏览器的 API 没有标准，有严重兼容性问题，后来 W3C 制定了统一的操作网页内容的 API 标准 DOM，使用 DOM API 操作网页内容，几乎 100%兼容所有浏览器，它具有查找, 修改(内容,属性,样式), 添加, 删除的功能。
最近玩了玩用css来构建3D效果，写了几个demo，所以博客总结一下。 在阅读这篇博客之前，请先自行了解一下css 3D的属性，例如：transform-style，transform-origin，transform, perspective。
find()可以在所有后代元素里查找，而children()只会查找子代元素（不包括第二层级）。
如果属性有'-'号，就写成驼峰的形式（如textAlign） 如果想保留 - 号，就中括号的形式 element.style['text-align'] = '100px';
如果属性有’-'号，就写成驼峰的形式（如textAlign） 如果想保留 - 号，就中括号的形式 element.style[‘text-align’] = ‘100px’;
在 《Vue 3：2020年中状态更新》 的文中曾经提到过尤雨溪希望7月中旬发布RC版(候选版本)，8月初发布3.0正式版。
有时候我们会有让内容恰好占一屏，并且适配各种尺寸的设备的需求。我们先不谈这样做会导致在一些设备上的显示不尽人意，直接谈如何实现。
浏览器是指可以显示网页服务器或者文件系统的HTML文件（标准通用标记语言的一个应用）内容，并让用户与这些文件交互的一种软件。
https://segmentfault.com/a/1190000023479851
1.Firefox 的查看页面源代码功能，可以一眼发现未闭合的标签、未转义的HTML字符，另一种办法，提交页面代码到 http://validator.w3.org/ 来验证HTML、CSS。因为未闭合的标签比如div会造成排版混乱，面试要求上也时常可以看见能够书写符合W3C标准的代码。
gulp 是一个前端构建工具，它能通过自动执行常见任务，比如编译预处理 CSS ，压缩 JavaScript 和刷新浏览器，来改进网站开发的过程，从而使开发更加快速高效。
前阵子解决了博客在低版本 IE 下会假死的问题，发现居然是因为我自定义 CSS 的闭合误用了中文大括号导致的！ 解决这个问题之后，又发现了另外一个坑：发现博客在 IE8 及以下版本的响应式不生效。 奇
本文结合自己前端日常开发中，经常用到的且非常重要的一些知识点，进行了汇总，这是本系列第一篇。
const 是一个常量只允许声明一次不可修改(和let有快级作用域) let不存在变量提升机制（变量不允许在声明之前使用） let不允许重复声明 在全局作用域中基于let声明的变量不是window的一个属性，和他没关系 typeof 未被声明的变量 =>不是undefined而是报错（暂时性死区） let会形成块级作用域（类似于私有作用域，大部分大括号都会形成块作用域） 解构赋值 “…” 拓展、剩余、展开运算符 ES6中的模板字符串 箭头函数 和普通函数的区别 没有arguments，但是可以基于…arg获取实参集合（结果是一个数组） 没有自己的this，箭头函数中的this是上下文中的this Promise（async/await） class（ES6中创建类的） interator（for of 循环） Map / Set
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
对象存储
实时音视频
即时通信 IM
