CSS JS 常见总集篇

掌握html语义化，避免通篇div
扎实css基础

1. 提升可访问性；
2. SEO；
3. 结构清晰，利于维护；

1. css页面布局

题目一：高度已知，三栏布局，左右栏固定宽度，中间自适应

1. float浮动布局
2. absolute绝对定位布局，左右固定好width，左侧设置left:0，中间设置left与right为左右width宽度，右侧设置right:0
3. flex布局，左右宽度固定，中间设置flex:1
4. table表格布局，左右设置宽度固定
5. grid网格布局

---- 课题延伸 ----

优缺点 / 比较
1.  缺点：float脱离文档流，需要处理清除浮动
    优点：兼容性好
2.  缺点：子元素都将脱离文档流，使用性比较差
    优点：快捷，不容易出问题
3.  缺点：存在兼容性问题
    优点：较新型解决方案，解决以上两种布局的不足
4.  缺点：存在历史诟病问题
    优点：使用简单，兼容性好
5.    缺点：可能存在兼容问题
    优点：较新型解决方案，可实现多种复杂布局，起源是栅格布局


高度改变(某栏内容撑开容器)时哪个布局将不适用：
float溢出部分样式出错；
absolute依据内容撑开所在栏，其他栏不会变
flex布局自适应改变（可用）
table布局自适应改变（可用）
grid布局不随内容改变，内容直接溢出

真实开发中哪个最实用？

2. css盒模型

标准模型+IE模型，两种模型区别

margin
    border
        padding
            content
        padding
    border
margin

标准模型：

height * width = content

IE模型：

height * width = content + padding + border

css如何设置两种模型:

box-sizing: content-box (浏览器默认)
box-sizing: border-box

js获取模型宽高：

dom.style.width / height （只能取元素内联的样式）

dom.currentStyle.width / height （获取渲染后的值，但只有IE支持）

dom.getComputedStyle(dom).width / height （兼容性好，获取实际宽高）

dom.getBoundingClientRect().width / height （获取实际宽高，以及相对位置）

边距重叠问题（父子元素 / 相邻元素）：

BFC 块级格式化上下文

overflow: hidden / auto;

3. DOM事件类

Dom事件级别（不同时期的标准）：

DOM0 : element.onclick=function(){}

DOM1 : 没有制定过跟事件相关的标准

DOM2 : element.addEventListener('click',function(){},false)

DOM3 : element.addEventListener('keyup',function(){},false) 相比DOM2多出一些键盘鼠标事件等类型

Dom事件模型（捕获 / 冒泡）：

事件流（浏览器与用户交互响应）：

捕获 ↓    目标元素     冒泡 ↑

描述DOM事件捕获具体流程：

window -> document -> html(document.documentElement) -> body(document.body) -> HTML结构 目标元素

Event对象的常见应用：

event.preventDefault()
    阻止默认事件（比如阻止点击a标签会触发页面跳转）
event.stopPropagation()
    阻止冒泡事件（点击子元素时阻止触发父级元素冒泡）
event.stoplmmediatePropagation()
    事件响应优先级（同时注册两个事件时阻止另一个事件触发）
event.currentTarget
    事件代理 当前触发事件的对象
event.target
    事件代理 获取点击的元素对象

自定义事件：

var eve = new Event('custome') // 只定义了事件名
var eve2 = new CustomeEvent('custome', obj) // 可传参
// 注册事件
document.addEventListener('custome', function(){
    ....
})
// 触发事件
document.dispatchEvent(eve)

自定义事件 :
true表示捕获阶段触发 false表示冒泡阶段触发

4. 原型链类

创建对象有几种方法

1. 字面量
    var o1 = {xx:''}
    var o11 = new Object({xx:''})

2. 构造函数
    var M = function(xx){this.xx=xx}
    var o2 = new M('')

3. Object.create
    var P = {xx:''}
    var o3 = Object.create(P)

原型、构造函数、实例、原型链

构造函数 -- new >> 实例对象 -- _proto_ >> 原型对象<br>
    | prototype (系统自动加上的属性)<br>
原型对象.constructor

原理：共享原型对象，实例通过原型链找到方法

instanceof的原理
                    instanceof
    实例对象.__proto__  --->  构造函数.prototype

    实例对象.__proto__  --constructor--> 构造函数
new运算符
    一个新对象被创建，继承foo.prototype
    var new2 = function (func) {
        var o = Object.cteate(func.prototype)
        var result = func.call(o)
        if (typeof result === 'object') {
            return result
        } else return o
    }

5. 面向对象

类的声明

ES5：
function Animal() {
  this.name = 'name'
}
ES6：
class Animal2 {
  constructor () {
    this.name = name
  }
}

实例化

new Animal() ......

借助构造函数实现部分继承

function Parent(params) {
  this.name = 'parent'
}
function Child(params) {
  Parent.call(this) // /apply
  this.type = 'child'
}
// 存在问题：无法继承原型对象上的方法

借助原型链实现继承

function Child2(params) {
  this.type = 'child2'
}
Child2.prototype = new Parent()
// 存在问题：操作实例对象改变的是同一个原型对象，会导致其他实例对象也发生改变

组合后解决以上问题

function Child3() {
    Parent.call(this)
    this.type = 'child3'
}
Child3.prototype = new Parent()
// 存在问题：构造函数被多余执行

组合优化写法

function Child4() {
    Parent.call(this)
    this.type = 'child4'
}
Child4.prototype = Parent.prototype // 引用类型
// 存在问题：共用了父类的原型对象

组合优化写法2

function Child5() {
    Parent.call(this)
    this.type = 'child5'
}
Child5.prototype = Object.create(Parent.prototype)
Child5.prototype.constructor = Child5

6. 通信类

同源策略
限制从一个源加载的文档或脚本与来自另一个源的资源进行交互
隔离潜在恶意脚本
前后端如何通信
Ajax
WebSocket
CORS
如何创建Ajax
  • XMLHttpRequest对象的工作流程
  • 兼容性的处理
  • 事件的触发条件和顺序

7. 安全类

CSRF 跨站请求伪造
攻击原理
    网站B中引诱用户点击链接，向网站A发起请求
    网站A中某一接口存在漏洞
    用户登录过该网站A，本地存在着cookie
防御措施
    token验证
    referer验证（页面来源）
    隐藏令牌
XSS 跨域脚本攻击
往页面注入脚本
插入js不执行

8. 算法类

0. 排序
1. 堆栈、队列、链表
2. 递归
3. 波兰式和逆波兰式

9. 渲染机制

DOCTYPE
    告诉浏览器当前什么文档类型，浏览器根据此选择解析方式
    HTML5
        <!DOCTYPE html>
    HTML4.01
        严格模式:不解析已废弃的元素
        传统模式
  • 浏览器渲染过程
  • 重排
  • 重绘
  • 布局

10. JS运行机制

单线程
任务队列

同步任务 while for ..
异步任务 setTimeOut setinterval promise ..

        异步任务被挂起，同步任务执行完后异步任务进入队列
    for(i=0;i<4;i++){
        setTimeOut(function(){
            console.log(i)
        },1000)
    } // 结果为间隔一秒后输出4次4

11. 页面性能

资源压缩合并，减少HTTP请求
非核心代码的异步加载
    异步加载方式：

        1. 动态脚本加载
        2. defer (script标签属性)
        3. async (同上)
    区别：

        defer在HTML解析完之后执行，会按顺序执行
        async在加载完成后立即执行，不一定会按顺序
浏览器缓存
        强缓存 Expires Cache-Control
        协商缓存 Last-Modified Etag If-None-Match
CDN加速
预解析DNS (https默认关闭了预解析，需要添加meta开启)
    <link rel="dns-prefetch" herf="">

12. 错误监控

即时运行错误的捕获方式

try..catch
window.onerror

资源加载错误

object.onerror
performance.getEntries() 
Error事件捕获 widow.addEventListener('error',func..)

上报错误

(new Image()).src = 'http://xx.com/?a=1'

题外

业务能力

做过什么业务
负责的业务有什么业绩
使用了什么技术方案
突破了什么技术难点
遇到了什么问题
最大的收获

团队协作能力

其他

乐观积极 主动沟通 逻辑顺畅 上进有责任心 有主张 做事果断

职业竞争力
    业务能力  行业前列
    思考能力  同一事物多思考最优解
    学习能力  不断学习新技术，沉淀总结

职业规划
    目标是什么：业务上成为专家，技术上成为行业大牛
    近阶段目标：不断学习积累各方面经验
    长期目标：做几件有价值的事情，如开源作品，技术框架
    方式方法：先完成业务，做到极致，逐步向目标靠拢

希望公司能提供什么：技术分享会；对于开发可以给到相关平台工具权限等资源