摘要:一一个页面上两个左右铺满整个浏览器,要保证左边的一直为,右边的跟随浏览器大小变化比如浏览器为,右边为,浏览器为,右边为,请写出大概的代码。如果需要使用,最好是通过动态给添加属性值,这样可以绕开以上两个问题。
一、一个页面上两个div左右铺满整个浏览器,要保证左边的div一直为100px,右边的div跟随浏览器大小变化(比如浏览器为500,右边div为400,浏览器为900,右边div为800),请写出大概的css代码。
//html
//css .box{ width: 400px; height: 100px; display: flex; flex-direction: row; align-items: center; border: 1px solid #c3c3c3; } .left { flex-basis:100px; -webkit-flex-basis: 100px; /* Safari 6.1+ */ background-color: red; height: 100%; } .right { background-color: blue; flex-grow: 1; }
在线demo
Left sidebarMain Content
demo
更多布局栗子 请移步
1.减少dom操作
2.部署前,图片压缩,代码压缩
3.优化js代码结构,减少冗余代码
4.减少http请求,合理设置 HTTP缓存
5.使用内容分发cdn加速
6.静态资源缓存
7.图片延迟加载
输入地址
1.浏览器查找域名的 IP 地址
2.这一步包括 DNS 具体的查找过程,包括:浏览器缓存->系统缓存->路由器缓存...
3.浏览器向 web 服务器发送一个 HTTP 请求
4.服务器的永久重定向响应(从 http://example.com 到 http://www.example.com)
5.浏览器跟踪重定向地址
6.服务器处理请求
7.服务器返回一个 HTTP 响应
8.浏览器显示 HTML
9.浏览器发送请求获取嵌入在 HTML 中的资源(如图片、音频、视频、CSS、JS等等)
10.浏览器发送异步请求
1.跨域问题
2.设置了HttpOnly
1.直接改变className,如果动态改变样式,则使用cssText
// 不好的写法 var left = 1; var top = 1; el.style.left = left + "px"; el.style.top = top + "px";// 比较好的写法 el.className += " className1"; // 比较好的写法 el.style.cssText += "; left: " + left + "px; top: " + top + "px;";
2.让要操作的元素进行”离线处理”,处理完后一起更新
a) 使用DocumentFragment进行缓存操作,引发一次回流和重绘;
b) 使用display:none技术,只引发两次回流和重绘;
c) 使用cloneNode(true or false) 和 replaceChild 技术,引发一次回流和重绘
1.beforcreate
2.created
3.beformount
4.mounted
5.beforeUpdate
6.updated
7.actived
8.deatived
9.beforeDestroy
10.destroyed
1、通过jsonp跨域
2、通过修改document.domain来跨子域
3、使用window.name来进行跨域
4、使用HTML5中新引进的window.postMessage方法来跨域传送数据(ie 67 不支持)
5、CORS 需要服务器设置header :Access-Control-Allow-Origin。
6、nginx反向代理 这个方法一般很少有人提及,但是他可以不用目标服务器配合,不过需要你搭建一个中转nginx服务器,用于转发请求
开发规范
模块化开发
组件化开发
组件仓库
性能优化
项目部署
开发流程
开发工具
1.使用jq的$.extend(true, target, obj) 2.newobj = Object.create(sourceObj),// 但是这个是有个问题就是 newobj的更改不会影响到 sourceobj但是 sourceobj的更改会影响到newObj 3.newobj = JSON.parse(JSON.stringify(sourceObj))十、js设计模式
总体来说设计模式分为三大类:
创建型模式,共五种:工厂方法模式、抽象工厂模式、单例模式、建造者模式、原型模式。
结构型模式,共七种:适配器模式、装饰器模式、代理模式、外观模式、桥接模式、组合模式、享元模式。
行为型模式,共十一种:策略模式、模板方法模式、观察者模式、迭代子模式、责任链模式、命令模式、备忘录模式、状态模式、访问者模式、中介者模
详细说明 请移步alloyteam的文章
十一、图片预览function showPreview(source) { var file = source.files[0]; if(window.FileReader) { var fr = new FileReader(); fr.onloadend = function(e) { document.getElementById("portrait").src = e.target.result; }; fr.readAsDataURL(file); } }十二、扁平化多维数组
var result = [] function unfold(arr){ for(var i=0;i< arr.length;i++){ if(typeof arr[i]=="object" && arr[i].length>1) { unfold(arr[i]); } else { result.push(arr[i]); } } } var arr = [1,3,4,5,[6,[0,1,5],9],[2,5,[1,5]],[5]]; unfold(arr)
var c=[1,3,4,5,[6,[0,1,5],9],[2,5,[1,5]],[5]]; var b = c.toString().split(",")
var arr=[1,3,4,5,[6,[0,1,5],9],[2,5,[1,5]],[5]]; const flatten = arr => arr.reduce((a, b) => a.concat(Array.isArray(b) ? flatten(b) : b), []); var result = flatten(arr)十三、iframe有那些缺点?
iframe会阻塞主页面的Onload事件;
搜索引擎的检索程序无法解读这种页面,不利于SEO;
iframe和主页面共享连接池,而浏览器对相同域的连接有限制,所以会影响页面的并行加载。
使用iframe之前需要考虑这两个缺点。如果需要使用iframe,最好是通过javascript动态给iframe添加src属性值,这样可以绕开以上两个问题。
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/81487.html
摘要:前端日报精选传送门浏览器性能优化渲染性能在生产中的使用发送推送第期巧用匿名函数重构你的代码中文可持久化数据结构以及结构分享众成翻译学习笔记的模板学习笔记教程的作用域插槽教程移动助手实践一基于的换肤功能掘金网站压力及性能测试一篇 2017-10-09 前端日报 精选 传送门:React Portal浏览器性能优化-渲染性能在生产中的Progressive Web App使用Service...
摘要:收集的一些前端面试题从面试题发现不足,进而查漏补缺,比通过面试更难得及各大互联网公司前端笔试面试题篇及各大互联网公司前端笔试面试题篇面试题个和个经典面试题前端开发面试题如何面试前端工程师很重要个变态题解析如何通过饿了么面试轻 收集的一些前端面试题 从面试题发现不足,进而查漏补缺,比通过面试更难得 1 BAT及各大互联网公司2014前端笔试面试题--Html,Css篇 2 BAT...
摘要:收集的一些前端面试题从面试题发现不足,进而查漏补缺,比通过面试更难得及各大互联网公司前端笔试面试题篇及各大互联网公司前端笔试面试题篇面试题个和个经典面试题前端开发面试题如何面试前端工程师很重要个变态题解析如何通过饿了么面试轻 收集的一些前端面试题 从面试题发现不足,进而查漏补缺,比通过面试更难得 1 BAT及各大互联网公司2014前端笔试面试题--Html,Css篇 2 BAT...
阅读 2284·2021-11-24 10:27
阅读 3539·2019-08-30 15:55
阅读 3325·2019-08-30 15:53
阅读 2307·2019-08-29 17:27
阅读 1409·2019-08-26 13:47
阅读 3533·2019-08-26 10:28
阅读 884·2019-08-23 15:59
阅读 2822·2019-08-23 15:19