前端开发 | 易学教程

web前端开发图文全面解析

阅读更多关于 web前端开发图文全面解析

【推荐】2019 Java 开发者跳槽指南.pdf(吐血整理) >>> 前端是什么？在回答这个问题之前，我想到了一道面试题：当我们在浏览器中输入网址并按回车之后，接下来会发生什么？我们来简单地看一看 “网页展现” 的整个过程。比如这里有一个用户，它需要访问 abc.com 这个网址。一般来说，当用户输入一个域名时，是在请求一个 HTML 资源。当他完成域名解析之后，他的浏览器会向 abc.com 这个域名所指向的 Web 服务器发出请求。有时候 Web 服务器直接就可以返回用户的请求了；有时候 Web 服务器还需要向数据库查询一些数据，然后才能把处理结果返回给用户。当用户的浏览器拿到服务器返回的 HTML 资源之后，就开始解析并显示 HTML 的内容了。一般来说，HTML 页面需要 CSS 资源来描述页面的样式。比如浏览器在解析 HTML 时发现了一个 CSS 外链 abc.com/a.css ，它就会去请求这个资源。 HTML 页面往往还需要加载外部的 JS 资源，比如 abc.com/a.js ，此时浏览器同样会向服务器请求这个资源。当所需的资源都加载完成之后，这个页面就可以提供完整的外观和功能了。整个过程差不多就是这个样子了。我们看一看这张流程图，可以在中间画一道竖线，把它分成左右两个部分。我们会发现，这道线左侧的事情发生在浏览器端，我们称之为 “前端”

动态rem解决移动前端适配

阅读更多关于动态rem解决移动前端适配

动态rem解决移动前端适配移动前端适配一直困扰很多人，我自己也是从最初的媒体查询，到后来的百分比，再到padding-top这种奇巧淫技，再到css3新单位vw这种过渡转变但这些都或多或少会有些问题，直到使用了动态rem 才真正不再在适配这个问题上发愁只因为叫动态rem 是因为他是真正意义上随着屏幕的大小来变化的。 rem rem官方解释是 font size of the root element 字面意思就是根元素的font-size值也就是rem是相对于元素的如下代码： <html> <meta charset="utf-8"/> <head> <style> html{ font-size:10px;} .p1{font-size:1rem;} .p2{ font-size:2rem;} </style> </head> <body> <p class="p1">这是一个1rem字体</p> <p class="p2">这是一个2rem的字体</p> </doby> </html> 从最终效果可以看出文档中元素的字体大小是基于html根元素的 p1的font-size为10px p2的font-size是20px viewport <meta name="viewport" content="width=device-width, initial-scale=1

web前端入门到实战：css实现的骨架屏方案

阅读更多关于 web前端入门到实战：css实现的骨架屏方案

优点简单，不需要工程，不用puppeteer生成骨架dom，也不需要二次开发维护定制程度高，想怎么搞就怎么搞不臃肿，只给你想要的缺点自动化程度低，需要在骨架dom上手动添加类协同要求高，不像工程化能通过工程去约束思路通过伪元素实现骨架样式，通过操作样式实现骨架和页面的动态切换实现 css部分(scss写法) 通过 after 伪元素生成骨架样式，并通过 absolute 覆盖到实际元素上专门建立的学习Q-q-u-n： 784-783-012 ，分享学习的方法和需要注意的小细节，不停更新最新的教程和学习技巧（从零基础开始到前端项目实战教程，学习工具，全栈开发学习路线以及规划） .skt-loading { pointer-events: none; /* 加载中阻止事件 */ .skeleton { position: relative; overflow: hidden; border: none !important; border-radius: 5px; background-color: transparent !important; background-image: none !important; &::after { content: ''; position: absolute; left: 0; top: 0; z-index: 9;

【精彩回顾】第二届微医前端技术沙龙（附PPT下载）

阅读更多关于【精彩回顾】第二届微医前端技术沙龙（附PPT下载）

5 月 25 日，以「无界」为主题的第二届微医前端技术沙龙成功举办。本届沙龙的演讲题目涵盖了前端技术几个主要的应用场景，包括服务端、桌面端以及跨平台的开发。最近几年前端技术发展非常快，各种可以提高开发效率的新技术和框架层出不穷，让原来的前端工程师蜕变成了新一代的全端工程师，技术之间的界限被打破，相互碰撞、融合和进化。活动伊始，本届沙龙活动主持人，来自用户技术部的前端团队负责人洪波对远道而来的微医外部30多家公司的同行和100多位来自内部各个部门的同事表示了欢迎，感谢大家挤出宝贵的周末时间来参加第二届微医前端技术沙龙，并对本次沙龙的主题进行了阐述和说明。本届沙龙邀请到了公司元老级的前端工程师立明为本次沙龙致开幕辞，立明目前是用户技术部负责人，带着近150人的技术团队。立明向大家介绍了微医的业务以及在互联网医疗领域做的创新探索。接下来，韩高钶、高翔、宋睿、蒋嘉巍、殷利萍、胡梦杰与张明峰7位讲师分别给大家做分享与交流。主题一《Feb.js - 基于 Vue 的通用应用框架》医院平台的韩高钶，结合微医在SSR实践中的经验为我们介绍了 Vue SSR 的实现原理，针对 SSR 架构中存在的一些挑战来介绍 Feb.js 是如何保证服务的高可用、高性能和高体验的，以及如何快速的使用 Feb.js 搭建一个企业级的 SSR 应用。主题二《微医在 Node.js 微服务方向的探索》

漫谈前端优化

阅读更多关于漫谈前端优化

　　近几年，移动端站点和app、手游井喷式的发展，大大出乎了当初从业者的预料，2010年前后中国还处于3G网时代，各种3G宣传铺天盖地，如果你稍稍回忆一下，那个时候中国几乎没有像样的移动站点；大约在12年左右，也就是iphone4s诞生的时代，在中国高级智能设备开始被普遍使用，4G的覆盖范围也越来越大，各种app、移动站点、Html5活动页面也逐渐火爆起来；随着行业的发展，对从业者及技术支持的要求也越来越高；对于前端，前端资源和页面优化是常见要求，对比移动端，移动端对前端优化的要求更高，可以说要达到极致，虽然现在基本都有使用WIFI了，但一些地方还是要靠4G甚至3G、2G，极致的优化能争取更多的pv和更多的可能，如果你去观察一些大厂的项目和一些比较有名的站点，也会发现他们的优化是做的非常专业非常好的；而我今天跟大家聊的就是关于前端优化的内容；　　话不多说，来看看有哪些选项；　　 1. 引用资源部分优化：　　· 合并引用的css、javascript，并使用压缩模式，这个很好理解吧；　　 · 合并页面引用的小图标，也就是合成一张图片，引用背景图片定位，俗称雪碧图；　　 · 使用按需加载，scroll加载的处理方式；　　· 服务器GZIP处理资源，这一般是指WWW服务器中安装的一个功能，当有人来访问这个服务器中的网站时

WebView性能、体验分析与优化

阅读更多关于 WebView性能、体验分析与优化

在App开发中，内嵌WebView始终占有着一席之地。它能以较低的成本实现Android、iOS和Web的复用，也可以冠冕堂皇的突破苹果对热更新的封锁。然而便利性的同时，WebView的性能体验却备受质疑，导致很多客户端中需要动态更新等页面时不得不采用其他方案。以发展的眼光来看，功能的动态加载以及三端的融合将会是大趋势。那么如何克服WebView固有的问题呢？我们将从性能、内存消耗、体验、安全几个维度，来系统的分析客户端默认WebView的问题，以及对应的优化方案。性能对于WebView的性能，给人最直观的莫过于：打开速度比native慢。是的，当我们打开一个WebView页面，页面往往会慢吞吞的loading很久，若干秒后才出现你所需要看到的页面。这是为什么呢？对于一个普通用户来讲，打开一个WebView通常会经历以下几个阶段：交互无反馈到达新的页面，页面白屏页面基本框架出现，但是没有数据；页面处于loading状态出现所需的数据如果从程序上观察，WebView启动过程大概分为以下几个阶段：如何缩短这些过程的时间，就成了优化WebView性能的关键。接下来我们逐一分析各个阶段的耗时情况，以及需要注意的优化点。 WebView初始化当App首次打开时，默认是并不初始化浏览器内核的；只有当创建WebView实例的时候，才会创建WebView的基础框架。

WebView性能、体验分析与优化

阅读更多关于 WebView性能、体验分析与优化

育新徐宏嘉洁 · 2017-06-09 20:03 在App开发中，内嵌WebView始终占有着一席之地。它能以较低的成本实现Android、iOS和Web的复用，也可以冠冕堂皇的突破苹果对热更新的封锁。然而便利性的同时，WebView的性能体验却备受质疑，导致很多客户端中需要动态更新等页面时不得不采用其他方案。以发展的眼光来看，功能的动态加载以及三端的融合将会是大趋势。那么如何克服WebView固有的问题呢？我们将从性能、内存消耗、体验、安全几个维度，来系统的分析客户端默认WebView的问题，以及对应的优化方案。性能对于WebView的性能，给人最直观的莫过于：打开速度比native慢。是的，当我们打开一个WebView页面，页面往往会慢吞吞的loading很久，若干秒后才出现你所需要看到的页面。这是为什么呢？对于一个普通用户来讲，打开一个WebView通常会经历以下几个阶段：交互无反馈到达新的页面，页面白屏页面基本框架出现，但是没有数据；页面处于loading状态出现所需的数据如果从程序上观察，WebView启动过程大概分为以下几个阶段：如何缩短这些过程的时间，就成了优化WebView性能的关键。接下来我们逐一分析各个阶段的耗时情况，以及需要注意的优化点。 WebView初始化当App首次打开时

前端常见跨域解决方案（全）

阅读更多关于前端常见跨域解决方案（全）

什么是跨域？跨域是指一个域下的文档或脚本试图去请求另一个域下的资源，这里跨域是广义的。跨域的根本原因就是浏览器，所以在后台是不存去前端一样上的跨域的，后台调后台是不会跨域的，但是必须网络是通的广义的跨域： 1.) 资源跳转： A链接、重定向、表单提交 2.) 资源嵌入： <link>、<script>、<img>、<frame>等dom标签，还有样式中background:url()、@font-face()等文件外链 3.) 脚本请求： js发起的ajax请求、dom和js对象的跨域操作等其实我们通常所说的跨域是狭义的，是由浏览器同源策略限制的一类请求场景。什么是同源策略？同源策略/SOP（Same origin policy）是一种约定，由Netscape公司1995年引入浏览器，它是浏览器最核心也最基本的安全功能，如果缺少了同源策略，浏览器很容易受到XSS、CSFR等攻击。所谓同源是指"协议+域名+端口"三者相同，即便两个不同的域名指向同一个ip地址，也非同源。同源策略限制以下几种行为： 1.) Cookie、LocalStorage 和 IndexDB 无法读取 2.) DOM 和 Js对象无法获得 3.) AJAX 请求不能发送常见跨域场景 URL 说明是否允许通信 http://www.domain.com/a.js http://www.domain

你不可不知的HTML优化技巧

阅读更多关于你不可不知的HTML优化技巧

如何提升Web页面的性能，很多开发人员从多个方面来下手如JavaScript、图像优化、服务器配置，文件压缩或是调整CSS。很显然HTML 已经达到了一个瓶颈，尽管它是开发Web 界面必备的核心语言。HTML页面的负载也是越来越重。大多数页面平均需要40K的空间,像一些大型网站会包含数以千计的HTML 元素，页面Size会更大。如何有效的降低HTML 代码的复杂度和页面元素的数量，本文主要解决了这个问题，从多个方面介绍了如何编写简练，清晰的HTML 代码，能够使得页面加载更为迅速，且能在多种设备中运行良好。在设计和开发过程中需要遵循以下原则：结构分离：使用HTML 增加结构，而不是样式内容；保持整洁：为工作流添加代码验证工具；使用工具或样式向导维护代码结构和格式学习新语言：获取元素结构和语义标记。确保可访问：使用ARIA 属性和Fallback 属性等测试：使网站在多种设备中能够良好运行，可使用emulators和性能工具。 HTML,CSS 和JavaScript三者的关系 HTML 是用于调整页面结构和内容的标记语言。HTML 不能用于修饰样式内容，也不能在头标签中输入文本内容，使代码变得冗长和复杂，相反使用CSS 来修饰布局元素和外观比较合适。HTML元素默认的外观是由浏览器默认的样式表定义的，如在Chrome中h1标签元素会渲染成32px的Times

WEB 前端跨域解决方案

阅读更多关于 WEB 前端跨域解决方案

跨域定义广义的定义：跨域是指一个域下的文档或脚本试图去请求另一个域下的资源。 1.) 资源跳转：链接、重定向、表单提交 2.) 资源嵌入： <link>、<script>、<img>、<frame>等dom标签，还有样式中background:url()、@font-face()等文件外链 3.) 脚本请求： js发起的ajax请求、dom和js对象的跨域操作等同源策略同源策略/SOP（Same origin policy）是一种约定，由Netscape公司1995年引入浏览器，它是浏览器最核心也最基本的安全功能，如果缺少了同源策略，浏览器很容易受到XSS、CSFR等攻击。所谓同源是指"协议+域名+端口"三者相同，即便两个不同的域名指向同一个ip地址，也非同源。同源策略限制以下几种行为： 1.) Cookie、LocalStorage 和 IndexDB 无法读取 2.) DOM 和 Js对象无法获得 3.) AJAX 请求不能发送跨域解决方案 1）jsonp跨域关于jsonp的原理把握一下几点： 1）html标签的src属性没有同源限制（支持跨域），浏览器解析script标签时，会自动下载src属性值（url）指向的资源； 2）script标签指向的资源文件被下载后，其中的内容会被立即执行； 3）服务器端的程序会解析src属性值中的url传递的参数

订阅前端开发