DarylWxc

1. 实现方式 内联首屏关键CSS 异步加载CSS 资源压缩 合理使用选择器 减少使用昂贵的属性 不要使用@import 2. 细节 内联首屏关键CSS内联的CSS代码渲染提前，较大的CSS代码不合适，会阻塞，无缓存。关键CSS代码采用内联，其余代码采用外部引用。 异步加载CSS使用JavaScript将link标签插到head标签最后，1234const myCSS = document.createElement("link");myCSS.rel = "stylesheet";myCSS.href = "mystyles.css";document.head.insertBefore(myCSS,document.head.childNodes[document.head.childNodes.length-1].nextSibling); 设置link标签media属性为noexis，浏览器会认为当前样式表不适用当前类型，在不阻塞页面渲染的情况下再进行下载。加载完后将media的值设为screen或all。1< ...

1. 项目结构项目分node区和静态资源区，node区需要执行node index(入口文件)启动项目静态资源区需要build打包出dist用于node区访问，并且需要run dev启动webpack-dev-server。 2. 开发事项添加新页面需要新建HTML文件于node区，然后在node区路由处注册html外层路由，需要引入一些内部模块。在contorller内需要调用回调将方法引入HTML页面中。然后在静态资源区进行页面开发，vue或逻辑交互写在静态资源区，然后将这些函数与页面引入html当中。 3. 报错看控制层和静态层，调用位置。报错看控制台。 4. 失误 浏览器缓存 路径配置 断点，运行 路由渲染 官方组件的使用

1. 响应式是什么？网络页面设计布局，页面的设计与开发应当根据用户行为及设备环境进行相应的响应和调整。常见特点：1.同时适配PC + 平板 + 手机等2.标签导航在接近手持终端设备时改变为经典的抽屉式导航3.网站的布局会根据视口来调整模块的大小和位置2. 实现方式基本原理是通过媒体查询检测不同的设备屏幕尺寸做处理，为了处理移动端，页面头部必须有meta声明viewport。1<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no”>1.width=device-width: 是自适应手机屏幕的尺寸宽度2.maximum-scale:是缩放比例的最大值3.inital-scale:是缩放的初始化4.user-scalable:是用户的可以缩放的操作实现响应式布局的方式有:1.媒体查询2.百分比3.vw/vh4.rem3. 媒体查询1234567@media screen and ( ...

1. 网页站点配置自己开启nginx作为客户端，需要将webpack，nginx serve，constants的IP地址更改为自己的IP地址。入口文件为index.js，listen方法监听的端口为(实际入口)访问地址端口，对应nginx配置代理访问的端口。constants文件里的端口为页面路径上访问的地址，由nginx代理访问到实际地址。通过node指令node index启动项目入口。url->constants->nginx->proxy->real address(实际入口) 2. 服务端配置访问constants配置的服务端地址nginx配置地址需要添加/rest/ 路径访问服务端url->constants->nginx->server proxy(实际入口) 3. 静态资源配置其中静态资源需要npm run build输出dist用于访问字体图标与图片，npm run dev用于启动静态资源webpack-dev-serve访问constants里的静态资源路径，通过webpack里的代理，访问到真实的资源 ...

1. 什么是回流与重绘？1.1 回流根据样式计算盒子在页面上的大小与位置## 1.2 重绘计算完属性后根据每个盒子特性进行绘制## 1.3 渲染机制解析HTML->DOM->解析CSS->CSSOM->结合成Render Tree->回流->重绘->display2. 触发条件回流触发：1.添加或删除可见的DOM元素2.元素的位置发生变化3.元素的尺寸发生变化4.内容发生变化，文本代替图片5.页面一开始渲染的时候6.浏览器的窗口尺寸变化获取一些特定的值也会触发回流，取值。重绘触发：1.颜色的改变2.文本方向的改变3.阴影的修改3. 如何减少1.尽量使用class设定样式2.避免设置多项内联样式3.应用元素的动画使用position属性的fixed或absolute4.避免使用table布局5.css3硬件加速6.避免使用CSS的JS表达式7.避免太多导致需要回流的操作

1. CSS动画实现方式：1.transition实现渐变动画2.transform转变动画3.animation实现自定义动画2. transitiontransition的属性：1.property填写需要变化的CSS属性2.duration完成过渡效果需要的时间单位3.timing-function完成效果的速度曲线linear(匀速)，ease(从慢到快再到慢)，ease-in(慢慢变快)，ease-out(慢慢变慢)，ease-in-out(先变快在到慢)，cubic-bezier(定义自己的值)4.delay动画效果的延迟触发时间3. transformtranform有的属性1.translate 位移2.scale 缩放3.rotate 旋转4.skew 倾斜一般配合transition使用，不支持inline元素4. animationanimation自带属性：1.animation-duration指动画周期时间2.animation-timing-function指动画计时函数3.animation-delay延迟时间，默认为04.animation-itera ...

1. 选择器2. 边框新增3个边框属性：1.border-radius:创建圆角边框2.box-shadow:为元素添加阴影3.border-image:使用图片来绘制边框 3. 背景1.background-clip:确定背景画区2.background-origin:设置对齐方式3.background-break:设置盒子绘制 4. 文字1.word-wrap:normal(换行) break-all(单词内换行)2.text-overflow:clip(修剪文本) ellipsis(显示省略符代替遮盖文本)3.text-shadow:设置文本阴影4.text-decoration:设置深层渲染 5. 颜色rgba：rgb为颜色值，a为透明度hala：h为色相，s为饱和度，1为亮度，a为透明度 6. transition 过渡12345transition： CSS属性，花费时间，效果曲线(默认ease)，延迟时间(默认0)transition-property: width; transition-duration: 1s;transition-timing-function: ...

1. 双栏布局 使用float左浮左边栏 右边模块使用margin-left撑出内容块做内容展示 为父级元素添加BFC，防止下方元素飞到上方内容123456789101112131415161718192021222324252627282930313233343536<style> .box{ overflow: hidden; 添加BFC } .left { float: left; width: 200px; background-color: gray; height: 400px; } .right { margin-left: 210px; background-color: lightgray; height: 200px; }</style><div class="box"> <div class= ...

1. 定位+margin:auto12345678910111213141516171819202122<style> .father{ width:500px; height:300px; border:1px solid #0a3b98; position: relative; } .son{ width:100px; height:40px; background: #f0a238; position: absolute; top:0; left:0; right:0; bottom:0; margin:auto; }</style><div class="father"> <div class="son"></div></di ...

1. BFCBFC(Block Formatting Context)，即块级格式化上下文，有自己的渲染区域和渲染规则： - 内部的盒子会在垂直方向上一个接一个的放置 - 对于同一个BFC的俩个相邻的盒子的margin会发生重叠，与方向无关 - 每个元素的左外边距与包含块的左边界相接触（从左到右），即使元素浮动也是如此 - BFC的区域不会与float的元素区域重叠 - 计算BFC的高度时，浮动子元素也参与计算 - BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素，反之亦然 - BFC就是一个相对于外界独立的空间，内部的子元素不影响外部的元素2. 触发条件 根元素，HTML元素 浮动元素(float) overflow值不为visible display值为inline-block(cell,caption,table,flex,grid),flex,grid,table position值为absolute或fixed 3. 应用场景 放置margin重叠(塌陷) 清除内部浮动 自适应多栏布局