Novidades do Chrome 63 para os desenvolvedores \| TreinaWeb Promoção no ar Matricule-se agora e garanta **54% de desconto** Termina em Tempo restante da oferta: 03 Horas 05 Min 07 Seg Tempo restante da oferta: 03 05 07 [Assinar →](https://www.treinaweb.com.br/checkout/pagamento/plano/anual?cupom=TW-SCLIENTE26) [ ](https://www.treinaweb.com.br) Explorar [ Quanto custa? ](#assinatura) [ FAQ ](https://www.treinaweb.com.br#faq) [Matricule-se](#assinatura) [ Entrar ](https://www.treinaweb.com.br/login) [ Início ](https://www.treinaweb.com.br) [ Artigos ](https://www.treinaweb.com.br/blog) Novidades do Chrome 63 para os desenvolvedores [ Desenvolvimento Front-end ](https://www.treinaweb.com.br/blog/categoria/desenvolvimento-front-end) # Novidades do Chrome 63 para os desenvolvedores Veja algumas das novidades presentes no Chrome 63, última versão do navegador a ser lançada em 2017. [ Akira Hanashiro ](https://www.treinaweb.com.br/blog/autor/akira-hanashiro) 9 anos atrás ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2017/12/13103521/chrome53.png) Olá, Web Developers! Veremos algumas novidades do Chrome 63, última versão do navegador a ser lançada em 2017. ## Importação de módulos JavaScript dinâmicamente Já faz um tempo que o JavaScript possui um modo nativo de importação de módulos, mas não faz tanto tempo que os navegadores começaram a dar suporte a essa funcionalidade. O problema é que até pouco tempo, essa habilidade era estática. Agora, com as mudanças no Chrome 63, podemos importar módulos em tempo de execução baseados em condições. Isso significa que, caso o usuário não precise do módulo, podemos evitar o seu carregamento. ```JavaScript button.addEventListener('click', event => { import('./dialogBox.js') .then(dialogBox => { dialogBox.open(); }) .catch(error => { /* Error handling */ }); }); ``` No exemplo acima, o módulo só será carregado caso o usuário clique em um botão. Isso facilita aplicar a estratégia de Lazy Loading, melhorando a performance do carregamento da sua aplicação. Apenas o necessário será carregado no início e o resto será chamado apenas se for preciso. [ ![Google Chrome Developer Tools](https://d2knvm16wkt3ia.cloudfront.net/assets/svg-icon/chrome-developer-tools.svg) Curso Google Chrome Developer Tools Conhecer o curso ](https://www.treinaweb.com.br/curso/google-chrome-developer-tools) ## Sobrescrita do comportamento do overflow scroll com CSS Em dispositivos móveis podemos usar o scroll para recarregar a página, como mostrado na imagem abaixo: ![Recarregamento Mobile](https://dkrn4sk0rn31v.cloudfront.net/2017/12/11083101/entire_page_reload.png) Mas esta funcionalidade faz a página inteira ser recarregada, o que muitas vezes não é necessário. Agora é possível sobreescrever esse comportamento para criar uma funcionalidade igual a de certos aplicativos, onde fazemos o scroll apenas para carregar mais conteúdo (ou atualizar apenas uma parte da página). É o que a [PWA (Progressive Web App)](https://www.treinaweb.com.br/blog/devo-transformar-meu-site-em-uma-pwa/ "PWA (Progressive Web App)") do Twitter está fazendo atualmente. Ao invés de recarregar a página, ele adiciona novos tweets à página. Para isso nós usamos a propriedade CSS `overscroll-behavior`. Na imagem abaixo, evitamos o recarrgamento total da página para implementar nosso próprio reload. Neste exemplo, ao invés de recarregar toda a página, apenas atualizaríamos a lista de emails. ![Recarregamento Mobile Customizado](https://dkrn4sk0rn31v.cloudfront.net/2017/12/11083101/custom_page_reload.png) ## Mudança na interface de permissões Mais de 90% de todas as requisições de permissões são ignoradas ou temporariamente bloqueadas. É muito ruim para a experiência do usuário quando um site já pede permissões de notificação assim que você entra, sem contexto nenhum. Para diminuir isso, o Chrome 59 começou a bloquear temporariamente uma permissão caso o usuário a negasse três vezes. Agora o Chrome 63 para Android fará requisições em modais. Isso chamará mais a atenção do usuário, mas eles já aconselham para que os desenvolvedores exibam as requisições apenas em momentos que fazem sentido. Acredita-se que assim os usuários estarão 2,5x mais dispostos a aceitar uma permissão. ## Device Memory API A nova API JavaScript `Device Memory` nos ajuda a entender melhor o que está limitando a performance da sua página dando dicas sobre o total de memória RAM disponível no dispositivo do usuário. Com isso, podemos adaptar algumas funcionalidades em tempo de execução para melhorar a experiência do usuário, assim como o YouTube altera a qualidade dos vídeos dependendo da velocidade da sua conexão. ## Intl.PluralRules API Essa API nos permite criar aplicações que entendem como aplicar regras de plural das palavras em diversas línguas dependendo do número aplicado. Essa API também pode ajudar com números ordinais. [ ![Google Chrome Developer Tools](https://d2knvm16wkt3ia.cloudfront.net/assets/svg-icon/chrome-developer-tools.svg) Curso Google Chrome Developer Tools Conhecer o curso ](https://www.treinaweb.com.br/curso/google-chrome-developer-tools) - [ #Front-end ](https://www.treinaweb.com.br/blog/tag/front-end) - [ #navegadores ](https://www.treinaweb.com.br/blog/tag/navegadores) - [ #chrome ](https://www.treinaweb.com.br/blog/tag/chrome) Autor ![Akira Hanashiro](//secure.gravatar.com/avatar/d107ca73135bc62770a67ebbfe4cf80d?d=mm) ## Akira Hanashiro Graduado em Análise e Desenvolvimento de Sistemas, Pós-graduado em Projetos e Desenvolvimento de Aplicações Web e MBA em Machine Learning. Especializado em Front End e curte desenvolvimento de jogos. [Todos os artigos](https://www.treinaweb.com.br/blog/autor/akira-hanashiro) ## Continue estudando Transforme leitura em prática com os cursos e formações da TreinaWeb. [Ver cursos](https://www.treinaweb.com.br/cursos) Continue lendo ## Artigos relacionados - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2018/01/12091849/novidades-html5-2-400x280.jpg) [ HTML ](https://www.treinaweb.com.br/blog/categoria/html) 9 anos atrás ## [ Novidades do HTML 5.2 ](https://www.treinaweb.com.br/blog/novidades-html-5-2) Conheça as novidades do HTML 5.2, suas adições e depreciações. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2020/05/14141423/node-vs-deno-400x280.png) [ Node ](https://www.treinaweb.com.br/blog/categoria/node-js) 7 anos atrás ## [ Deno: conheça o suposto substituto do Node.js ](https://www.treinaweb.com.br/blog/deno-conheca-o-suposto-substituto-do-node-js) Conheça o Deno, ambiente de execução de JavaScript desenvolvido pelo criador do Node.js e que pode substituí-lo num futuro próximo. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2018/04/03142818/GOOGLE-COMPUTE-ENGINE-400x280.png) [ Google Cloud Platform (GCP) ](https://www.treinaweb.com.br/blog/categoria/google-cloud-platform-gcp) 9 anos atrás ## [ Criando instâncias de VM no Google Cloud Platform ](https://www.treinaweb.com.br/blog/criando-instancias-de-vm-no-google-cloud-platform) Conheça o compute engine e veja como criar novas instâncias de VM no Google Cloud Platform. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2021/05/GUIA-LINGUAGEM-JAVASCRIPT-400x280.png) [ Desenvolvimento Front-end ](https://www.treinaweb.com.br/blog/categoria/desenvolvimento-front-end) 6 anos atrás ## [ Guia da Linguagem JavaScript ](https://www.treinaweb.com.br/blog/guia-da-linguagem-javascript) Neste Guia da Linguagem Javascript vamos abordar aspectos fundamentais, como: tipos de dados, variáveis, objetos, arrays e muito mais. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2017/11/27101528/NOVIDADES-WORDPRESS-400x280.png) [ WordPress ](https://www.treinaweb.com.br/blog/categoria/wordpress) 9 anos atrás ## [ Novidades do WordPress 4.9 ](https://www.treinaweb.com.br/blog/novidades-wordpress-4-9) Veja as novidades do WordPress 4.9, lançado no dia 16 de novembro. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2017/10/24121508/novidades-do-php-7-2-400x280.jpg) [ PHP ](https://www.treinaweb.com.br/blog/categoria/php) 9 anos atrás ## [ Novidades do PHP 7.2 ](https://www.treinaweb.com.br/blog/novidades-do-php-7-2) Quase um ano depois da última versão, o PHP 7.2 bate à porta. Saiba tudo sobre essa versão. O que de novo entrará e o que será descontinuado. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2017/06/novidades-do-android-o-para-desenvolvedores-400x280.png) [ Android ](https://www.treinaweb.com.br/blog/categoria/android) 10 anos atrás ## [ Novidades do Android O para desenvolvedores ](https://www.treinaweb.com.br/blog/novidades-do-android-o-para-desenvolvedores) O Google está a todo vapor para lançar o Android O. Porém, antes mesmo do lançamento oficial, já é possível conferir as novidades. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2025/01/NOVIDADES-REACT-19-400x280.jpg) [ Desenvolvimento Front-end ](https://www.treinaweb.com.br/blog/categoria/desenvolvimento-front-end) 2 anos atrás ## [ 4 Novidades do React 19 ](https://www.treinaweb.com.br/blog/4-novidades-do-react-19) Descubra 4 novidades do React 19, incluindo novos hooks, otimizações de performance e uso prático das Actions para formulários. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2017/09/conheca-as-novidades-que-estao-por-vir-no-android-studio-3-400x280.jpg) [ Android ](https://www.treinaweb.com.br/blog/categoria/android) 9 anos atrás ## [ Conheça as novidades que estão por vir no Android Studio 3.0 ](https://www.treinaweb.com.br/blog/conheca-as-novidades-que-estao-por-vir-no-android-studio-3) Veja as principais novidades e atualizações que a equipe de desenvolvedores do Android Studio preparou para a versão 3.0. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2021/05/php7-400x280.jpg) [ PHP ](https://www.treinaweb.com.br/blog/categoria/php) 10 anos atrás ## [ PHP 7 e novidades do PHP 7.1 ](https://www.treinaweb.com.br/blog/php-7-e-novidades-do-php-7-1) Veja um pouco mais sobre o PHP 7 e, principalmente, as novidades do PHP 7.1, recém lançado. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2020/06/AWS-CLI-400x280.png) [ Amazon ](https://www.treinaweb.com.br/blog/categoria/amazon) 7 anos atrás ## [ AWS CLI v2: confira as novidades da nova versão ](https://www.treinaweb.com.br/blog/aws-cli-v2-confira-as-novidades-da-nova-versao) O AWS CLI v2 é uma ferramenta em linha de comando capaz de gerenciar recursos na AWS. Com ela é possível listar todas as EC2 no seu ambiente, ou até mesmo criar um novo banco de dados com RDS com poucos comandos. Nesse artigo vamos conhecer as novidades dessa segunda versão. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2016/10/seja-bem-vindo-400x280.jpg) [ Tecnologia ](https://www.treinaweb.com.br/blog/categoria/tecnologia) 10 anos atrás ## [ Seja bem-vindo! ;) ](https://www.treinaweb.com.br/blog/seja-bem-vindo) Primeiro post do nosso novo Blog. Siga e confira dicas e novidades sobre o dia-a-dia dos profissionais de TI. Ler artigo ## Um ano de acesso total para você viver de programação. Todos os cursos e formações da TreinaWeb numa única assinatura, com professores que atuam no mercado, suporte direto e certificados. Do primeiro `console.log` ao mercado de trabalho. - **1 ano** de acesso a **todos os cursos** - Cursos novos **toda semana** - Suporte **direto com professores** - Plano de carreira **personalizado** - **Certificados digitais** inclusos - **Aplicativos** para Android e iOS, com **acesso offline** **Garantia incondicional de satisfação** Teste por 7 dias e, se não fizer sentido para você, devolvemos seu dinheiro. ### Acesso completo a todos os cursos e dezenas de Formações. 12 meses Economize R$ 840,00 54% OFF de 12x R$ 129,00 por apenas 12x R$ 59,00 sem juros no cartão de crédito ou R$ 599,00 à vista Oferta termina em **03h 05min 07s** - Acesso imediato e ilimitado durante 1 ano. - Plano de carreira personalizado. - Suporte direto com professores. - E muito mais! [Matricule-se agora](https://www.treinaweb.com.br/checkout/pagamento/plano/anual?cupom=TW-SCLIENTE26) [ ](https://www.treinaweb.com.br) Escola online de programação, tecnologia e IA. - [ ](https://www.facebook.com/TreinaWeb/) - [ ](https://www.instagram.com/treinaweb/) - [ ](https://www.youtube.com/user/TreinaWeb) - [ ](https://twitter.com/treinaweb) - [ ](https://www.linkedin.com/company/treinaweb) - [ ](https://github.com/treinaweb) ## Inscreva-se em nossa newsletter Receba lançamentos, promoções e novidades. Seu nome Seu WhatsApp Seu melhor e-mail Inscrever-se ## Cursos - [ Base para Devs ](https://www.treinaweb.com.br/categoria/base-para-devs) - [ Front-end ](https://www.treinaweb.com.br/categoria/desenvolvimento-front-end) - [ Back-end ](https://www.treinaweb.com.br/categoria/desenvolvimento-back-end) - [ Mobile ](https://www.treinaweb.com.br/categoria/desenvolvimento-mobile) - [ Bancos de Dados ](https://www.treinaweb.com.br/categoria/bancos-de-dados) - [ Cloud ](https://www.treinaweb.com.br/categoria/cloud-computing) - [ IA ](https://www.treinaweb.com.br/categoria/ia) - [ E mais ](https://www.treinaweb.com.br/categoria/e-mais) - [ Ver todos os cursos ](https://www.treinaweb.com.br/cursos) ## Conteúdo - [ Formações ](https://www.treinaweb.com.br/formacoes) - [ Projetos práticos ](https://www.treinaweb.com.br/projetos-praticos) - [ Direto ao ponto ](https://www.treinaweb.com.br/direto-ao-ponto) - [ Planos ](https://www.treinaweb.com.br#assinatura) - [ Depoimentos ](https://www.treinaweb.com.br#depoimentos) - [ Comunidade ](https://www.treinaweb.com.br#comunidade) - [ Corpo docente ](https://www.treinaweb.com.br#docente) ## A empresa - [ Sobre a TreinaWeb ](https://www.treinaweb.com.br#sobre) - [ Perguntas frequentes ](https://www.treinaweb.com.br#faq) - [ Vantagens de estudar na TreinaWeb ](https://www.treinaweb.com.br/vantagens-de-estudar-na-treinaweb) - [ Cursos para empresas ](https://www.treinaweb.com.br/empresas) - [ Sugira um novo curso ](https://www.treinaweb.com.br/sugerir-curso) - [ Trabalhe conosco ](https://www.treinaweb.com.br/trabalhe-conosco) - [ Artigos ](https://www.treinaweb.com.br/blog) - [ Desenvolvedores e agentes ](https://www.treinaweb.com.br/developers) - [ Contato ](https://www.treinaweb.com.br/contato) - [ Política de privacidade ](https://www.treinaweb.com.br/politica-de-privacidade) - [ Termos de uso ](https://www.treinaweb.com.br/termos-de-uso) ## Baixe nosso aplicativo [ Disponível na **App Store** ](https://apps.apple.com/us/app/treinaweb/id1322729447) [ Disponível no **Google Play** ](https://play.google.com/store/apps/details?id=br.com.treinaweb.mobile) Av. Paulista, 1765, Conj 71 e 72 · Bela Vista · São Paulo · SP · 01311-200 © 2004 – 2026 TreinaWeb Tecnologia LTDA · CNPJ 06.156.637/0001-58