前端性能优化实战
为什么要进行性能优化？1、用户的留存率：根据Google营销平台提供的调研发现，如果网站页面的加载时间超过3s，就会有53%的移动网站的访问遭到用户抛弃。
2、网站的转化率：从运营角度来看，网站转化率是一个非常重要的考量指标，网站转化率指的是用户进行了某项目标行为的访问次数与总访问才次数的比率。
因此，从用户使用角度来看有以下几点能感知网站的性能：
1、响应：必须在100ms内收到反馈，如果超过100ms的时间，用户就会感知到延迟；
2、动画：由于视神经存在反应速度造成，其值是1/24s，即当我们所见的物体移除后，该物体在我们眼中并不会立即小时，会延续存在1/24s的时间；
3、空闲：利用空闲时间处理延迟，可减少预加载的数据大小，以保证网站/应用快速完成加载；处理任务按50ms为单位分组，保证用户在发生操作后100ms内给出响应；
4、加载：用户感知要求我们尽量在1s内完成页面加载，如果没有完成，用户的注意力就会分散到其他事情上，并对当前处理的任务产生中断感（在1s内完成加载并渲染出页面的要求，并非要完成所有页面资源的加载），从用户感知体验的角度来说 ...
关于前端渲染方式以及性能
前端性能指标和计算方法本文主要介绍关于前端渲染模式，包括客户端渲染、服务端渲染、静态渲染、预渲染、同构渲染，还有同构渲染的另一种方式、三方同构渲染。
以下是浏览器加载的性能指标，也是整个加载和渲染过程中会触发的关键事件：
FP（First Paint）：首次绘制时间，也就是白屏，这个指标用于记录页面第一次绘制像素的时间，从页面开始加载到浏览器中检测到渲染（任何渲染）时被触发（例如背景改变，样式应用等）【计算方式：白屏时间 = firstPaint - pageStartTime】；
FCP（First Contentful Paint）：首次内容绘制时间，也是首屏，这个指标用于记录页面首次绘制文本、图片、非空白 Canvas 或 SVG 的时间，从页面开始加载到页面内容的任何部分呈现在屏幕上的时间【计算方式：首屏时间 = firstContentTime - pageStarTime】。
FMP（First Meaningful Paint）：首次有意义的渲染帧，也是首次有效绘制，从页面加载开始，到大部分或者主要内容已经在首屏上渲染的时间点， 表示页面的“主要内容 ...
javascript
JS基础引入方式JavaScript有3种引入方式：行内式、嵌入式和外链式；
行内式：将JavaScript代码作为Html标签的属性值使用。示例如下：
1<a href="javascript:alert('hello')">say hello</a>
嵌入式：或称内嵌式，使用script标签包裹JavaScript代码，直接编写到html文件中，通常放到<head>和<body>或标签中。<script>中type用于告知浏览器脚本类型，html5中默认属性值为”text/javascript”，因此，使用html5时可以省略type属性。示例如下：
123<script> Javascript代码</script>
外链式：也称外部式，将JavaScript代码写在一个单独的文件中，一般使用”js”作为文件的扩展名，在html
页面中使用script标签的src属性引入”js”文件。外链适合代码量较多的情况。示例如下：
1<scri ...
CSS
CSS基础css，也就是层叠样式表，用于设计风格和布局。
基本知识语法CSS的定义由三部分组成，包括选择器（selector）、属性（properties）、属性值（value）。
12345选择器{ 属性1:属性值1; 属性2:属性值2; ……}
声明：一个属性与值的键值（color:red）
注释：单行注释/* 单行注释 */，多行注释 /* 在里面直接换行就行 */
选择器选择器分类 基本选择器（标签选择器、类选择器、id选择器）、属性选择器、层级选择器、组合选择器、伪类选择器、通配符；
选择器优先级
选择器的优先级大小如下：
10000 !important
01000 行内样式
00100 id选择器
00010 类选择器/伪类选择器/属性选择器
00001 标签选择器/元素选择器/伪元素选择器
12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152 ...
前端响应式网站设计
为什么需要设计响应式设计响应式设计就是为了为了统一所有设备，给用户展示最优的交互界面。
即便是PC或Mac用户，有查显示只有一半的人会将浏览器全屏显示，而剩下的一般人使用多大的浏览器，很难预知；
台式机、投影、电视、笔记本、手机、平板、手表、VR……智能设备正在不断增加，“主流设备”的概念正在消失；
屏幕分辨率正飞速发展，同一张图片在不同设备上看起来，大小可能天差地别；
鼠标、触屏、笔、摄像头手势……不可预期的操控方式正在不断出现。
响应式设计就是RWD（Responsive Web Design），与此目标比较相似的另一个设计就是 自适应网页设计AWD（Adaptive Web Design）。
相同点：两者的目标相同，都是针对不同的分辨率/device采用不同的样式和布局达到页面展示最优；在布局方式本质没有差别（AWD 也 including responsive layout）。
差别点:RWD强调一套页面进行多端兼容展示（桌机、平板、手机都是用同一个 HTML 代码和同一个 CSS 文档，能依照不同屏幕宽度的条件，来改变排版），而AWD给出多套页面，对于不同 ...
HTML
HTML基础知识什么是HTML？html是用来描述网页的一种语言，指的是超文本标志语言。html使用标记标签来描述网页，其文档包含了html标签以及文本内容，Html文档也叫做web页面。
什么是标签？html标记标签通常被称为html标签，是由尖括号包围的关键词，比如 <html>；HTML标签通常是成对出现的，比如 <b> 和 </b>,标签对中的第一个标签是开始标签，第二个标签是结束标签。
什么是属性？属性是 HTML 元素提供的附加信息，一般描述与开始标签，总是以名称/值对的形式出现，比如：name=”value”。doctype不区分大小写。
什么是DOCTYPE？声明有助于浏览器中正确显示网页，网络上有很多不同的文件，如果能够正确生命HTML的版本，浏览器就能正确显示网页内容。
通用声明：
123456<!-- HTML5 --><!DOCTYPE html><!-- HTML4.01 --><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTM ...