什么是前端？

前端即网站前台部分，也叫前端开发，运行在PC端，移动端等浏览器上展现给用户浏览的网页。随着互联网技术的发展，HTML5，CSS3前端框架的应用，跨平台响应式网页设计能够适应各种屏幕分辨率，完美的动效设计，给用户带来极高的用户体验。

1.前端技术栈

前端技术栈包括最基础也是最核心的技术（HTML、CSS、JavaScript）。前端的开发中，HTML将元素进行定义，CSS对展示的布局元素进行定位，再通过JavaScript实现相应的效果和交互。虽然表面看起里很简单，但这里需要掌握的东西可以不少。

2.前端应该关注那些方面

1.功能

前端的功能应该有很多，我这里就总结一部分了。

1.http请求

前端必备的技能之一，也是使用最多的功能。例如：axios，fetch，XMLHttpRequest等等。

2.图片懒加载

懒加载是一种对网页性能优化的方式，比如当访问一个页面的时候，优先显示可视区域的图片而不是一次性加载所有图片，当需要显示时，再发送图片请求，避免打开网页时加载过多资源。 当一个网站的加载图片过多时就需要懒加载的协助，页面图片多时，在首次载入时一次性加载会耗费时间长，使用懒加载可以使页面加载速度快、减轻服务器的压力、节省流量

3.监听滚动到底部

4.格式化日期

Date 对象有一个 toLocaleString 方法，该方法可以格式化日期和时间,同时衍生出另外两种分别获得日期和时间的方法。

字段说明： 日期+时间: toLocaleString() 日期: toLocaleDateString() 时间: toLocaleTimeString()

还有很多第三方库可以用来格式化日期时间，最常用的主要为 Moment.js。 等等，还有许多因为所需技术并不掌握就不一 一列举了。

2.性能

在用户角度而言：性能优化能够让页面加载的更快，想要更及时，能给用用户提供良好的体验。

1.图片优化

我们有许多种解决方案，比如：

1.雪碧图

小图片我们可以合并到一个图片上我们称为“雪碧图”（iconFont）。

2.图片懒加载

只加载屏幕可视区

3.webp

是一种图片格式可以进行其他格式的替换效果更好

4.图片压缩

2.封装函数

把我们一个项目当中经常（重复）使用的部分代码块进行封装，使加载速度更快。

3.css优化

1.css写在头部

在文件头部书写CSS代码或引入外部样式。

2.移除空置的css规则

在外面引入外部样式时，会有很多外面用不到的样式，这时我们可以将用不到的样式移出，来优化代码量。

3.避免行内样式

最好不要在标签中定义样式

4.把JavaScript和CSS都放到外部文件种进行引入

我们可以把JS文件和CSS文件编写到外面，然后在页面中进行引入会减少网页的代码量，来减少缓存时间。

5.避免重定向

尽量不要在网页内进行重定向跳转，会重新加载一遍资源，会导致缓存时间大幅度增长

3.兼容性

干前端的应该都被兼容性这个问题搞过，但是因为时代在发展这种事应该都很少发生，但还是有些时候需要考虑这些事情，例如：银行，学习等等这些地方（一部分）的电脑浏览器内核版本还很低会出现这类问题。

最常见的浏览器内核有四种：Trident，Gecko，Blink，Webkit

现在说说目前流行浏览器的内核把

IE浏览器：Trident内核

Chrome浏览器：Webkit内核，现在是Blink内核

Firefox浏览器：Gecko内核，俗称Firefox内核

百度浏览器：IE内核

360浏览器：IE+Chrome双内核

猎豹浏览器：IE+Chrome双内核

3.HTML语法

标签和属性不区分大小写，推荐小写 空标签可以不闭合，比如:input,meta
属性值推荐用双引号包裹 某些属性值可以省略，比如：required，redonly等

4.如何做到语义化

了解每个标签和属性的含义 思考什么标签最适合描述这个内容
不使用可视化工具生成代码