前端

在前端开发过程中，非IE浏览器下，当容器的高度自动，并且容器内容中有浮动元素（float为left或right），此时如果容器的高度不能自适应内容的高度，从而使得内容溢出破坏整体布局，这种现象叫做浮动溢出，为了方式这个现象的发生，就需要对CSS样式进行处理，而这个过程就叫做CSS清除浮动。现在常用的CSS清除浮动的方法有哪些呢？ 一般使用clear属性清除浮动。但是要注意的是clear属性只能清除标记左右两侧浮动的影响，然而在网页开发时，经常会受到一些特殊的浮动影响，例如，对子标记设置浮动时，如果不对其父标记定义高度，则子标记的浮动会对父标记产生影响。使用clear属性并不能消除子标记浮动对父标记的影响。因此小编整理了三种清除浮动的方法： 1)使用空标记清除浮动 在浮动标记之后添加空标记，并对该标记应用“clear: both”样式，可清除标记浮动所产生的影响，这个空标记可以是<dv>、<p>、<hr/>等任何标记。 2)使用 overflow属性清除浮动 对标记应用 overflow:hidden”样式，也可以清除浮动对该标记的影响。这种方式弥补了空标记清除浮动的不足。 需要注意的是，在使用“ overflow: hidden”样式清除浮动时，一定要将该样式写在被影响的标记中。 3)使用after伪对象清除浮动 使用 after伪对象也可以清除浮动

　　在实际开发中，前端和后端之所以存在跨域的问题，主要是受到了 “同源策略”的限制，“同源”一般是指： 协议、域名（主域名以及子域名）和端口号三者相同，三者中的任何一个不相同都算作是跨域，不同域之间的相互请求资源就算作是跨域，这样都是会被限制的；之所以设置同源策略的限制主要是为了避免浏览器受到xss、CSFR等的攻击；同源策略限制的内容有： Cookie、LocalStorage、IndexdDB等存储数据，Dom节点，AJAX请求发送后，被浏览器的拦截；但是，img标签中的src、link中的href以及script中的src是允许跨域加载资源的； 　　需要注意的是，如果是协议和端口造成的跨域问题，前端是无能为力的，只能通过服务器的配置来解决；其次，在跨域问题上，仅仅是通过“url的首部”来识别而不会根据域名对应的IP地址来判断，也就是根据域名，协议，端口来判断； 　　跨域并不是请求发布出去，请求是能发出去的，服务器是能够收到请求并且正常的返回结果的，只是结果被浏览器给拦截了； 　　 跨域的解决方案 　　1、jsonp原理 　　　　利用script标签没有跨域限制的漏洞，网页可以得到从其他源动态产生的json数据。 JSONP请求一定需要对方的服务器做支持才可以；JSONP主要是通过声明一个回调函数，然后利用script的src属性后边跟上 ？callback=声明的回调函数

现在学前端的人是越来越多，学习质量也是参差不齐。过来人的身份告诉你，如果你还没有下定决心花时间去学习Web前端，那也可以先找些视频学习下，Web前端开发有哪些常见技术点!接下来，就看看Web前端开发有哪些常见技术点! 1、你有哪些性能优化的方法? (1)减少http请求次数：CSSSprites,JS、CSS源码压缩、图片大小控制合适;网页Gzip，CDN托管，data缓存，图片服务器。 (2)前端模板JS+数据，减少由于HTML标签导致的带宽浪费，前端用变量保存AJAX请求结果，每次操作本地变量，不用请求，减少请求次数 (3)用innerHTML代替DOM操作，减少DOM操作次数，优化javascript性能。 (4)当需要设置的样式很多时设置className而不是直接操作style。 (5)少用全局变量、缓存DOM节点查找的结果。减少IO读取操作。 (6)避免使用CSSExpression(css表达式)又称Dynamicproperties(动态属性)。 (7)图片预加载，将样式表放在顶部，将脚本放在底部加上时间戳。 2、什么叫优雅降级? 优雅降级：Web站点在所有新式浏览器中都能正常工作，如果用户使用的是老式浏览器，则代码会检查以确认它们是否能正常工作。由于IE独特的盒模型布局问题，针对不同版本的IE的hack实践过优雅降级了,为那些无法支持功能的浏览器增加候选方案

欢迎大家前往 腾讯云+社区 ，获取更多腾讯海量技术实践干货哦~ 本文分享了腾讯防水墙团队关于机器对抗的动态化思路，希望能抛砖引玉，给现在正在做人机对抗的团队一些启发，帮助更多中小型公司的业务摆脱机器和爬虫之痛。 0x00 前言 浏览器作为当今互联网的一大流量入口，正在变得越来越强大。为了有更好的Web体验，各类新的标准被制定并实施。PWA的出现，更是把移动端H5的体验推向了另一个极致。越来越多业务使用H5作为主要入口的同时，也带来了另一个问题：机器行为泛滥。只要有利益的地方就会有恶意，登录注册、投票领券等页面很容易成为机器刷量的重灾区，如今写一个普通刷投票脚本的难度基本就跟写一个“Hello World!”的难度差不多。在与机器对抗的历程中，Web前端一直是非常薄弱的一环。浏览器毫无保留地把所有前端代码拉取到本地并执行、所有前端代码均透明可见，拿什么拯救前端代码安全？ 0x01 名词解释 代码安全 本文中所提及的代码安全，是指前端JavaScript代码的安全。通常，如果一段JavaScript代码只能在正常的浏览器中运行，无法或尚未在非正常浏览器的运行环境执行得到结果、无法被等价翻译成其他编程语言的代码，则认为这段代码是安全的。 一段重要的JavaScript逻辑被置于其他环境以高于正常浏览器几个数量级的效率运行并得到正确的结果，对于服务端及后面的业务来说，几乎是一个灾难。

为什么JavaWeb放弃jsp，去做前后端分离 前后端分离已成为互联网项目开发的业界标准使用方式，通过nginx+tomcat的方式（也可以中间加一个nodejs）有效的进行解耦，并且前后端分离会为以后的大型分布式架构、弹性计算架构、微服务架构、多端化服务（多种客户端，例如：浏览器，车载终端，安卓，IOS等等）打下坚实的基础。这个步骤是系统架构从猿进化成人的必经之路。 核心思想：前端html页面通过ajax调用后端的restuful api接口并使用json数据进行交互。 在互联网架构中， web服务器：一般指像nginx，apache这类的服务器，他们一般只能解析静态资源。 应用服务器：一般指像tomcat，jetty，resin这类的服务器可以解析动态资源也可以解析静态资源，但解析静态资源的能力没有web服务器好。 一般都是只有web服务器才能被外网访问，应用服务器只能内网访问。 以前的JavaWeb项目大多数都是java程序员又当爹又当妈，又搞前端（ajax/jquery/js/html/css等等），又搞后端（java/mysql/oracle等等）。 随着时代的发展，渐渐的许多大中小公司开始把前后端的界限分的越来越明确，前端工程师只管前端的事情，后端工程师只管后端的事情。正所谓术业有专攻。 对于后端java工程师： 把精力放在java基础，设计模式，jvm原理

随着互联网的发展，Web前端开发成为目前最火热的岗位。Web前端开发的技术知识也是在不断更新，致使Web前端开发工作变得越来要复杂；以前，只要会编写HTML, CSS 和Java就能够找到一份不错的前端开发工作。而现在，web开发远远不止是简单编码，人们对于互联网的要求也越来越高，web前端开发技能也就更多了。对于Web前端初学者而言，应该如何学习Web前端呢？下文是Web前端开发新手的六个建议和经验技巧，希望能对大家学习前端一些帮助。 夯实基础 ： 要成为一名年薪30W的前端工程师，基础一定要掌握牢固，基础知识一问三不知，岂不是要贻笑大方。 css，js基础知识一定要掌握得很熟练，你能使用css实现斑马条纹背景，毛玻璃效果吗？能给图片实现滤镜效果，能实现所有自适应布局效果吗？原型，原型链，闭包是实现设计模式的必备知识，你真的弄懂了吗？闭包导致内存泄漏的原因是什么，你弄明白了吗？ajax跨域的解决方案你可以说几种？2019年了，你还是只告诉我jsonp吗？http协议有了解过吗？如何在http协议中实现不缓存静态资源？ 现在是2019年了，这些问题老掉牙了。可是我要告诉你的是，掌握好这些老掉牙的基础，就是很重要。上层的技术可以变更的很快，基础变动很慢，投入时间学好基础，性价比很高。 深究原理： Angular，React,Vue框架和脚手架的普及，越来越多的前端工程师浮于表面

蚂蚁金服和饿了么好像不错 饿了么官网: http://element.eleme.io/#/zh-CN 饿了么github: http://github.com/elemefe 蚂蚁金服 https://ant.design/ Mint UI 项目主页: http://mint-ui.github.io/#!/zh-cn demo: http://elemefe.github.io/mint-ui/#/ github地址: https://github.com/ElemeFE/mint-ui 中文文档地址: http://mint-ui.github.io/docs/#!/zh-cn iview iView 配套的工作流: https://github.com/icarusion/vue-vueRouter-webpack github地址: https://github.com/iview/iview 官网: https://www.iviewui.com/ vue-mui 官网: http://mui.yaobieting.com/ github地址: https://github.com/creatshare/vue-mui radon-ui 中文文档： https://luojilab.github.io/radon-ui/#!/ github: https:/

https://blog.csdn.net/gao_xu_520/article/details/80365799 来源： CSDN 作者： 快乐de馒头 链接： https://blog.csdn.net/chunxiaqiudong5/article/details/103703674

前言 之前看了一篇文章：@ Charlie.Zheng Web系统开发构架再思考-前后端的完全分离 ，文中论述了为何要前后分离，站在前端的角度来看，是很有必要的；但是如何说服团队使用前端渲染方案却是一个现实问题，因为如果我是一个服务器端，我便会觉得不是很有必要，为什么要前后分离，前后分离后遗留了什么问题，如何解决，都得说清楚，这样才能说服团队使用前端渲染的方案，而最近我刚好遇到了框架选型的抉择。 来到新公司开始新项目了，需要做前端框架选型，因为之前内部同事采用的fis框架，而这边又是使用的php，这次也就直接采用fis基于php的解决方案： http://oak.baidu.com/fis-plus 说句实话，fis这套框架做的不错，但是如果使用php方案的话，我就需要蛋疼的在其中写smarty模板，然后完全按照规范走，虽然fis规范比较合理，也可以接受，但是稍微深入解后发现fis基于php的方案可以概括为（我们的框架用成这样，不特指fis）： 服务器端渲染html全部图给浏览器，再加载前端js处理逻辑 显然，这个不是我要的，梦想中的工作方式是做到静态html化，静态html装载js，使用json进行业务数据通信，这就是一些朋友所谓的前端渲染了 JS渲染的鄙利 前端渲染会带来很多好处： ① 完全释放前端，运行不需要服务器； ② 服务器端只提供接口数据服务，业务逻辑全部在前端

前端埋点主要是为了服务运营人员采集用户行为数据，进行后续的数据分析工作。 前端监控和埋点能做什么 数据监控（用户行为） pv，uv 记录操作系统 用户在每一个页面的停留时间(离开页面，进入页面) 用户进入的入口 用户在相应页面的触发行为，点击按钮 性能监控 (js中的performance) 用户的首屏加载 http请求响应时间 页面渲染时间 页面交互动画完成时间 关键代码 let timing = performance.timing, start = timing.navigationStart, dnsTime = 0, tcpTime = 0, firstPaintTime = 0, domRenderTime = 0, loadTime = 0; //DNS解析时间 dnsTime = timing.domainLookupEnd - timing.domainLookupStart; //TCP建立时间 tcpTime = timing.connectEnd - timing.connectStart; //首屏时间 firstPaintTime = timing.responseStart - start; //dom渲染完成时间 domRenderTime = timing.domContentLoadedEventEnd - start; //页面onload时间