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

前端入门核心知识点

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%的人还看了以下文章

  • 最完善的前端开发流程(详解)

    前端侧重于人机交互和用户体验,后端侧重于业务逻辑和大规模数据处理。理论上,面向用户的产品里,所有问题(包括产品、设计、后端、甚至看不见的问题)的表现形式,都会暴露在前端,而只有部分问题(数据问题、计算问题、安全问题等)暴露在后端,这就意味着前端起到了至关重要的承载和连接作用。 一、前端开发流程 需求评审 一般在做需求评审时,PRD里只有交互稿,尚未有视觉稿。…

    2023年1月18日
    6.2K0
  • 网页制作实战项目八:川厨小巷

    网页制作实战项目八:川厨小巷网页制作实战项目八:川厨小巷网页制作实战项目八:川厨小巷网页制作实战项目八:川厨小巷

    【时间要求】 2 学时( 45 分钟× 2=90 分钟) 【上机内容】 川厨小巷 【上机目的】 1 、掌握网页布局的方法和技巧 2 、掌握行为的使用 3、掌握javascript(网页特效)的使用 4、培养团队意识和协作精神 【上机重点】 1 、网页布局 2 、javascript(网页特效)的使用 【上机难点】 javascript(网页特效)的使用 【上…

    2018年5月31日 网页设计
    16.4K0
  • 决定网页设计品质的9个细节

    决定网页设计品质的9个细节决定网页设计品质的9个细节决定网页设计品质的9个细节决定网页设计品质的9个细节

    细节决定成败”在页面设计中是颠扑不破的真理。一个页面的细节能充分体现出页面的品质。本文介绍了网页设计中的字号、字体、样式、间距、颜色、排版、留白、层次、光影等细节如何处理?

    2020年2月6日 网页设计
    6.9K0
  • 错位排版设计的5个实用方法(精)

    错位编排是通过对标题文字大小、位置和笔画的调整,打破固定的排版样式,让标题的排版更具个性化,是提升标题编排设计感和美感最简单最实用的设计技巧。

    本期分享 5 个常用的错位排版方法,学会这些方法你也可以快速设计出个性的标题排版。

    2023年1月18日
    12.4K0
  • web开发技术课程项目考查

    考查目的 一、专业能力目标 ①检验学生对《web开发技术》课程的理解与掌握情况 ②锻炼学生运用所学知识解决实际问题,进行项目开发的能力。 ③掌握web项目的开发流程,网站建设的技术和方法,具备一定的网站设计能力及网页制作能力。 ④培养学生网站规划建设、发布,以及管理维护的基本技能。 ⑤培养学生掌握项目开发的的思想和方法,树立严肃认真的工作作风。 二、技能目标…

    2018年6月1日
    11.5K0
  • 如何做好视觉设计中的层次?(精)

    如何做好视觉设计中的层次?(精)如何做好视觉设计中的层次?(精)如何做好视觉设计中的层次?(精)如何做好视觉设计中的层次?(精)

    对于视觉次序(视觉层次)的营造是每个设计师所必须精通的,无论是海报设计还是页面设计,从整体来看总会有强弱、主次之分,因为有了视觉上的变化,才使得整体更富有层次感;当用户在浏览信息很多的网页时,作为设计师要做到:即使用户只是简单的浏览,也要有能在用户脑海中形成记忆的视觉元素,而这些元素就是视觉中的主,而当用户仔细阅读时才能记忆到的元素才是视觉上的次;从局部来说…

    2018年7月9日 网页设计
    13.3K0

发表回复

登录后才能评论