网页设计师必须知道的八大前端核心知识

前端入门核心知识点

web前端开发

浏览器

  • Web标准:结构标准(HTML)、表现标准(CSS)、行为标准(JS)
  • 浏览器分为两部分:渲染引擎(即:浏览器内核)、JS 引擎
  • 浏览器的工作原理:重绘和重排、V8引擎
  • App的WebView容器,相当于浏览器,可以内嵌H5网页

HTML5

  • 语义化标签:<header><article> 、<footer>等。
  • 多媒体标签:<audio><video>
  • 更强的本地存储能力和设备兼容性:indexDB、HTML5 APP cookie
  • 三维、图形及特效:SVG、Canvas、WebGL
  • 更有效的实时连接:WebSocket、Server-Sent Events
  • 无障碍体验

CSS、CSS3

  • CSS盒模型、BFC
  • 浮动、定位(绝对定位和相对定位)
  • flex 布局
  • 圣杯布局、双飞翼布局
  • 选择器:后代选择器、交集选择器、并集选择器、伪类选择器
  • 2D转换:移动translation、旋转rotate、缩放scale
  • 3D转换:透视 perspective、3D移动 translate3d、3D旋转 rotate3d、3D呈现 transform-style
  • CSS3动画:animation
  • CSS hack
  • Retina 屏幕的 1px 像素,如何实现

JS基础

  • ES6语法:严格模式、箭头函数、Promise、Symbol数据类型、Set 和Map数据结构
  • ES6转ES5
  • JS数据类型转换、隐式类型转换
  • 内置对象及其方法
  • 数组的各种方法:map、filter、every、reduce等
  • 事件机制、原型继承、立即执行函数
  • DOM操作、虚拟 DOM 的 diff 算法
  • BOM浏览器操作
  • 事件冒泡机制:捕获阶段、目标阶段、冒泡阶段。
  • 异步编程:Ajax、Promise、async await
  • SessionStorage和LocalStorage、Cookie
  • 迭代器Iterator和生成器Generator
  • Web Socket
  • 异步编程
  • 单线程
  • Canvas图像绘制
  • svg 动画

JS 高级

  • JS 三座大山:原型与原型链、作用域及闭包、异步和单线程
  • 作用域链、类、继承、原型继承
  • this的指向和绑定规则
  • 深拷贝和浅拷贝
  • 防抖和节流
  • Promise的宏任务和微任务
  • 浏览器的重排和重绘
  • 手写 Promise的整个逻辑和API:resolve、reject、then、catch、finally、allSettled、race any
  • 高阶函数
  • 事件委托
  • call、apply、bind
  • arguments 伪数组
  • 函数柯里化
  • 模块化:CommonJS、AMD、CMD、ESModule
  • JS高阶语法:Iterator 迭代器、Decorator 生成器
  • JS 高阶语法:Decorator、Proxy/Reflect、MutationObserver、 对象属性描述符、Object.assign、Object.freeze、Object.seal
  • JS 内存泄漏、JS垃圾回收算法
  • TypeScript 类型检查
  • Vue.js、React.js源码解析
  • Vue.js、React.js的状态管理:Vuex、Redux、Redux Toolkit、React Hooks、zustand
  • V8引擎源码

Node.js

  • 回调函数
  • 时间驱动机制
  • 模块化
  • 函数
  • 路由
  • 全局方法
  • 文件系统

Web 安全

  • 跨域问题、同源策略、JSONP
  • CORS
  • XSS
  • CSRF

页面形式

  • 多端自适应布局
  • SPA单页应用
  • PWA(Progressive Web App):小程序的鼻祖

125jz网原创文章。发布者:江山如画,转载请注明出处:http://www.125jz.com/11346.html

(0)
江山如画的头像江山如画管理团队
最完善的前端开发流程(详解)
上一篇 2023年1月18日 下午6:13
最全的前端开发框架介绍
下一篇 2023年1月18日 下午6:30

99%的人还看了以下文章

  • 这篇设计配色干货,0基础也能让你做出好作品

    这篇设计配色干货,0基础也能让你做出好作品这篇设计配色干货,0基础也能让你做出好作品这篇设计配色干货,0基础也能让你做出好作品这篇设计配色干货,0基础也能让你做出好作品

    配色一直是设计圈子里的热门话题,是我们作为设计师必须要掌握的一门重要技能,通过色彩可以向用户传递不同层面的视觉信息,所以不同的色彩也都被人们赋予了不同的含义。比如:红色、橙色、黄色等暖色系的颜色能表现出温暖、热闹;而蓝色、淡蓝色等冷色系颜色,会给人一种凉爽、寒冷的感觉。将色彩属性与设计作品有效地相互结合,往往能做到 1+1>2 的视觉效果。 色彩的特征…

    2020年2月18日 网页设计
    7.4K0
  • 如何设计有新意的精美网页?

    如何设计有新意的精美网页?如何设计有新意的精美网页?如何设计有新意的精美网页?如何设计有新意的精美网页?

    经常制作网页,可是没有新意且面目雷同或似曾相识。如何制作生动、活泼又充满新意的网页?那就好好看看设计大师的作品吧,拟物,创作的灵感来源于生活!

    2019年10月5日 网页设计
    6.5K0
  • 网页设计中字体运用的12个技巧一超实用!

    网页设计中字体运用的12个技巧一超实用!网页设计中字体运用的12个技巧一超实用!网页设计中字体运用的12个技巧一超实用!网页设计中字体运用的12个技巧一超实用!

    文字、文本排版是日常网站设计工作中经常用到,看似简单的文字,实际上排版也是很有讲究。 1. 了解字体的性格 每个字体都有性格,人们比较喜欢一些有特色的东西。那么这些被喜欢的存在什么规则呢,了解你的目标人群,知道你文档的用途,选择一类字体,使用你的目标人群所期望的字体,是你的文档的用途所需要的字体。 更多请阅读:网页设计字体篇:字体的性格 2. 避免使用默认字…

    2019年10月26日 网页设计
    11.6K0
  • 网页设计第一步:绘制网站草图

    网页设计第一步:绘制网站草图网页设计第一步:绘制网站草图网页设计第一步:绘制网站草图网页设计第一步:绘制网站草图

    网站设计草图是对页面元素布局、页面造型设计、交互表现形式等所做的手绘草图说明,是对用户需求沟通的图形表现,以便更准确无误地与用户确认需求,也对网站风格设计过程起指导作用。

    2020年2月26日 网页设计
    30.5K0
  • 网页设计色彩搭配:蓝色

    蓝色是三原色之一,波长过短,纯正的蓝色RGB值分别为0、0、255,给人一种平静、平和、美丽、文静、安详与洁净的感觉。 蓝色与红、橙色相反,是典型的冷色,也是常见的后退色和收缩色,表示沉静、冷淡、理智、高深、透明等含义。 1. 蓝色性格特点 蓝色博大、永恒、平静、理智、纯净、遥远,就像辽阔的天空和大海。我国少数民族多使用靛蓝、普蓝作染料,因此,靛蓝、普蓝似乎…

    2021年2月4日
    19.9K0
  • 董文利聊颜色搭配-节日经典配色

    网页设计师联盟优秀设计师董文利,董老师系列教程分享,聊颜色,特别是按节日给出的经典配色,牛** 董文利一名靠谱平面设计师/网页设计师/插画设计师。典型80后,爱绘画,玩音乐,不做设计的时候喜欢独自一个人在家附近的江水旁静静的坐上一小会儿。2011年毕业于湖北工业大学艺术设计学院,所修专业是平面设计。

    2021年2月4日
    32.3K0

发表回复

登录后才能评论